iPhoneだけでノマドワーク

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

　

details要素の中にdetails！(連続開閉式)

　　

　　　

(株)セレス系ポイントサイト

　　　　

株式会社セレスでは、ポイントサイトを３サイト運営しています。最近、VISA系のプリペイドカードを発行していて、３サイトのポイントをまとめる事ができるようになりました。プリペイドカードですから審査も無くて、直ぐに発行して貰えます。

　 　　　　

　　　　　

モッピー

　　　　　　

　　　　　　　

お勧めポイント

　　　　　　　　

１ポイント(以後(P))が１円です。換金やポイント移行する場合、最低３００Pから交換でしたが、プリペイドカードを発行して貰うと１００Pからカードに移して使う事ができるようになりました。交換所コーナーからカードを発行して貰えて、３００P頂けるので会員さんは作らないと損ですね！

　　　　　　　　

モッピー 詳細

　　　　　　

　　　　

　　　　

　　　　　

お財布.com

　　　　　　

　　　　　　　

詳細

　　　　　　　　

ここも１ポイントが１円の価値になりますが、このサイトではポイントの事を「コイン」と表現しています。最低換金はモッピー同様で、プリペイドカードに移すのは１００コインからできます。カード発行もモッピー同様です。

　　　　　　　

お財布.com 詳細

　　　　　　

　　　　

　　　　

　　　　　

モバトク

　　　　　　

　　　　　　　

詳細

　　　　　　　　

ここは１０ポイントで１円です。ポイントの表現は(pt)と表現しています。ここはプリペイドカードを発行して貰うだけで３０００ptが貰えます！結局どこで作っても３００円分が貰えるって事です。

　　　　　　　　

モバトク 詳細

　　　　　　

　　　　

　　

　　

　　　

Gamboo BET

　　　

ギャンブルサイトでギャンブルをしなくても収入が発生する方法です！もちろん、ギャンブルもできます！

　【以前の記事です】耳より情報！登録500円、紹介500円 　　

一見見出しですがタップ(クリック)してみて下さいね。先日も記事で書きましたが、『details』要素で階層式に仕上げてみました。

このタグで色々工夫するとスッキリしたページが作れそうですね。『details』の中に『details』を組み込んでいくと無限に開閉式アコーディオンが作れます。でも、私は独学でスキルアップして試しただけですので、この使い方が正しいかどうかは分かりません;^_^A

『details』に関しては、最近【details】要素を知った話も読んでみて下さい。

上部のアコーディオンを開いて読んで頂ければ、勘のいい方はどんな風にコードを書いたか分かると思います。しかし、ひょっとしたらブラウザによっては開けない事があるかもしれないので、中身をもう一度お伝えします。

POINT WALLET VISA PREPAIDというプリペイドカードを発行して貰えば３００円分のポイントが貰える事。そのポイントは直ぐにカードに移して使うことができる事です。

モッピー、お財布.com、モバトクのいづれかのポイント交換所にてPOINT WALLET VISA PREPAIDを発行して貰って、３００円分のポイントを頂いて下さい。

１週間くらいでポイントがつき、カードも届くと思います。そしたら、頂いたポイントをカードに移せば１０日程で３００円分が直ぐに使えるようになります。

何を３００円くらいで.....と思われるかもしれませんが、この方法を今まで否定的だったお友達に紹介すれば、３００円分とはいえ即金は証明できます。初めてわずか１０日程で実際に買い物ができるのは、ポイントサイトのポイントとしては異例です。事実、私はこれで身内にお友達登録して貰いました。今では毎日ポチポチしています。

(株)セレスがこれを分かって企画しているのであれば暫くはこの方法は使えると思います。逆に、300円貰って退会する人が増えたら終わってしまう企画かもしれませんが、キャンペーン中ですので暫くは使えるでしょう。

っと、ポイントサイトのお話はここまでにして話題を戻したいと思います。

最初はポイントサイトを例にしていなかったのですが、『details』タグでスッキリし過ぎてしまったので少し余談を追加したという事です。

しかし、このタグで早見表や辞書などを作成できそうなので、サーバーにて色々試しています。

アメブロで『details』タグを紹介して読者の反応が良かったことから推測すると、まだ知らない方々が多いように感じますが、あまり凝り過ぎるとページが重くなるかもしれませんね。 とりあえず、テキストボックスに２階層分だけサンプルコードを記入しておきたいと思います。 <details> 　<summary>始めの表示文字<summary> 　　<details> 　　　<summary>次のタイトル</summary> 　　　　【ここに内容】 　　</details> </details> 装飾はしていませんが、必要な部分にCSS形式で装飾を工夫すれば色々できそうだと思いませんか？ 今回はここで終了致しますが、また面白いことができたら記事にしてみたいと思います。 毎度、最後までお読み頂きましてありがとうございましたm(_ _)m

目次

• １、備忘録作成中に
• ２、進化するHTML
• ３、iPhoneだけでHP作成
• ４、スキルアップの薦め

---

備忘録作成中に

私は新しくプログラミングコードを覚えようとすると、以前覚えていた簡単なHTMLを忘れてしまう事が良くあります！それをカバーする為にiPhoneのノートアプリにHTMLの備忘録を作成していました。 いつでも思い出せる様に自分の分かりやすいメモ帳を作りたかったというところですが、なかなか希望通りの仕様にはなりません;^_^A とりあえずでメモ帳アプリにHTMLタグを書き出して、得意のGoogle検索でHTMLの基本的な部分を復習しながら色々読んでいいました。 あるリファレンスで、HTML５の新規タグで、新たに追加されたタグ【details】というタグが紹介されていました。 今まで気が付かなかったのが不思議ですが、以前はCSSやJavascriptを併用して必死に作成していました。 しかし、この【details】を使うと簡単に開閉式のタブができます。 <details><summary>開閉式の見出し</summary><ul><li>項目１</li><li>項目２</li> <li>項目３</li></ul></details> と、これだけで開閉式の項目が作成できます。

上記基本コードの表示

開閉式の見出し

• 項目１
• 項目２
• 項目３

これだけで開閉式にできました。試しに上部の目次も作成してみましたが、HTMLに少しのCSSで目次ができました。 これならブログ記事にHTMLだけでアコーディオン風に色々表示できると思います*\(^o^)/*

---

進化するHTML

この【details】要素がアメブロでも使えるか試しましたが、みごとに開閉式になって表示してくれました。 HTML５のタグはほぼ知っているつもりでいましたが、油断していると遅れてしまいそうな気がします。HTMLだけではありませんが、プログラミング言語の改定について行けて無い事を気付かされました。 私のように毎日iPhoneで勉強していてもこの様な感じですから、仕事をしながらスキルアップしている方々には頭が下がりますね;^_^A 色々な仕組みをマスターしたい私にとって、『iPhoneだけで...』の意思が揺らぎます。 これからも、どんどん簡単になりどんどん進化するんだろうと痛感します。

---

iPhoneだけでHP作成

以前から、宣伝しているiPhoneだけでHP作成にしても、全体を無料テンプレートで作成して、部分的に開閉式にしたいところをCSSアコーディオンで表示させています。この表示をさせる為に数日かけて表現した気がします;^_^A 苦労した割に閲覧してくださる方々が少ないので、凹みがちのテンションですが、無料のサーバーなので気長にカスタマイズしてみたいと思います。 また、エックスサーバー の無料プランも試しているので、そこにこのタグを使った備忘録ページを作成すれば、スッキリと備忘録を作成できそうです。 独自ドメインや有料サーバーも検討中ですが、療養中の身には小額でもイタイので我慢して無料で攻めています。

---

スキルアップの薦め

私の場合は、働けなくなってから本格的に勉強し始めましたが、もっと早くスキルアップしておけば良かったと後悔しています。 もしも、私がiPhoneを持っていなかったら......多分完全にノイローゼになっていると思います。 iPhoneのおかげで、少ないながら収入を得る事ができ、iPhoneのおかげで落ち着いて冷静にスキルアップできています。 今日も、「iPhoneだけしか無くても生活費の足しになるような情報」を探しながら、療養生活を楽しんでいます。 健康な頃は浪費家でしたが、職を失った事でなるべく節約するようにもなってきました。健常者の方々でも、私のようにスキルアップと節約ができると思います。 貴方もスキルアップしてみませんか？

リンクリストサンプル

iPhoneでポイント貯める一覧表

• モッピー


• お財布.com


• モバトク


• ポイントタウン


• げんだま


• イッカツ(紹介コード=ff44a)


• ハニースクリーン(招待ID = JS義経)


• モニタータウン(アンドロイド)


• モニタータウン（iOS)

最後まで読んで頂き、ありがとう御座いましたm(_ _)m

HTMLでブラウザ上で境界線を引くタグは<hr>ですよね。この境界線に飽きてきたら、CSSで装飾してみるのも楽しいと思います。

基本

<hr style="border:太さ 形状 色;">

赤い線（太さ1px）

<hr style="border:1px solid red">

---

赤い点線（太さ3px）

<hr style="border:3px dotted red;">

---

青い破線（太さ2px）

<hr style="border:2px dashed blue;">

---

緑の２重線（太さ3px）

<hr style="border:3px double green;">

---

青い凹線(5px)

<hr style="border:5px inset #00f;">

---

グラデーション境界線１(太さ5px)

<hr style="display:block; width:100%; height:5px; border:0; border:1px solid #0f0; -webkit-border-radius:5px; background:#0f0; background:-moz-linear-gradient(left,#0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,#0f0),color-stop(25%,#0ff),color-stop(50%,#fff),color-stop(75%,#ff0),color-stop(100%,#f00)); background:-webkit-linear-gradient(left,#0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%); background: linear-gradient(to right, #0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%);">

---

グラデーション境界線2(太さ5px)

<hr style="display:block; width:100%; height:5px; border:0; border:1px solid #00f; -webkit-border-radius:5px; background:#00f; background:-moz-linear-gradient(left,#00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,#00f),color-stop(25%,#f00),color-stop(50%,#fff),color-stop(75%,#f00),color-stop(100%,#00f)); background:-webkit-linear-gradient(left,#00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%); background: linear-gradient(to right, #00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%);">

---

---

自分で覚えきれないので、コピーして使える様にしちゃいました。幅,線種,色を変えてオリジナルラインでブログを飾ってみてはいかがでしょうかね？サンプルでは濃い色を使いましたが、薄めの色にすればさりげなく境界線が引けると思います。(グラデーションは、ブラウザによっては反映されないかもしれませんσ^_^;

相変わらずにiPhoneで色々やっているj.sakamotoですが、スマホ用のボタンは大きいほうが良いですよね。

input type="button"でボタンを作成できますが、スタイルシートでカスタマイズすると目立つボタンが作れますね。

<input type="button" onclick="location.href='URL'" value="表示文字列">

普通に作るとこんなボタンになりますが、スタイルシートで装飾して試してみました。

<input type="button" onclick="location.href='URL'" value="表示文字列" style="width:270px; height:40px; background-color:rgba(150,255,150,0.5); color:#800; font-size:22px; font-weight:bold; text-shadow:2px 2px 1px #ff7;">

CSSで色々できるので、オリジナルボタンが作成できますね。

色々なデザインなどをiOSアプリ 「FTP精霊」で作成しています。

ゲームを作成するときのボタンのデザインをしていた時に、ふと「ブログではinput type="button"がどう表示されるか気になってしまい、テストしてみました。プレビューが様々で勉強になりました。

では、ゲーム制作に戻りますm(_ _)m

SVG

CSSアニメーションは表示できる事が分かったので、次はSVGで落書きをしてみます。

実は午前中に複雑なSVGを作成してブログにアップしてみましたが、表示されていないようなので記事を削除してしまいました。今度は簡単なSVGを試してみますが、表示されなくても分かる様にテキストエリアにコードを書いてあります。

アメブロではもう少し複雑なコードを読んでくれましたが、こっちはいかがでしょうかね。

去年から少しサボっていましたが、HTML５,CSS,javascriptとiPhoneで復習しています。

色々な事を覚えたつもりが、少し経つと忘れてしまいます。なので、備忘録用にテキストエリアにコードを残しておきますが、一応自分用のメモという事なので御了承願います。

今後はコードを残しながら色々やってみたいと思います。

午前中は<svg width="60" height="40">で書いていましたが、今回は<svg width="60" height="40" viewBox="0 0 60 40">に修正してみました。

これでも表示されなければ諦めるかも...