<p>デザインを制作していると、フリー素材を使うことがよくあります。<br />
ブログで紹介していたり、専用のサイトがあったりと様々で、それを見つける度に、ブックマークをしているのですが、そういったサイトを一つに集約しているサイトがありましたので紹介します。</p>
<p>ちなみに写真のフリー素材を漁っていると、その辺の広告なんかでよくフリー素材が使われています。</p>
<h2>Makerbook</h2>
<p>海外のサイトになります。</p>
<p>以下のカテゴリでわかれています。</p>
<p>・Photography(写真)<br />
・Mockups(モックアップ)<br />
・Graphics(アイコン、ベクター素材等)<br />
・Textures(パターンやテクスチャ)<br />
・Fonts(フォント)<br />
・Colours(スウォッチ)<br />
・Video(動画)<br />
・Audio(音楽)</p>
<p>中には元々日頃お世話になっているサイトもありましたので、<br />
このサイトを起点にすると探しやすいかもと思いました。</p>
<p><a href="http://makerbook.net/" target="_blank" class="link">Makerbook &#8211; The best free resources for creatives.</a></p>
<p>皆さんもぜひ使ってみてください！</p>


デザイナー向けフリー＆有料素材まとめサイト「Makerbook」

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」

jQueryでページ上に表示されるローディングのバーを作ってみる

<p>この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、<br />
今は、Photoshop CCを使用しております。<br />
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a><br />
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)</p>
<p>Dreamweaverは数年前に辞め、<br />
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、<br />
Photoshopをやめたら、脱Adobeになってしまうかもしれません。</p>
<p>とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、<br />
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。</p>
<p>よく目にする3つをご紹介します。</p>
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。<br />
$99ですが、trialも出来るので試してみて良かったら購入できますね！</p>
<p>cssへワンクリックで書き出せるとか、<br />
起動が早いとかあるみたいで、</p>
<p>以下でしっかりまとめられてるのでご覧ください！<br />
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a></p>
<p>私もTrialをダウンロードしましたが、今だ試せずにいます。</p>
<p><a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a></p>
<h3>Pixelmator</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらもmac向けですが、価格は3600円と安め。<br />
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。<br />
最近iPhone用のアプリも発売されたようです。</p>
<p><a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a></p>
<p><a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a></p>
<h3>GIMP</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。<br />
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。<br />
初心者で試しに・・・という人にこちらはオススメです！！</p>
<p><a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a><br />
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a></p>


Photoshop以外の画像編集ツールでついにAdobe脱却！？

<p>今年の春からクロネコヤマトで「ネコポス」と「宅配便コンパクト」という新しいサービスがはじまりました。運営しているＥＣサイトでは今まで他の配送業者を利用して商品を発送していましたが、最近「ネコポス」の利用を開始したので送り状の作り方をまとめてみました。</p>
<p>これから説明する送り状の作成方法は「ヤマトビジネスメンバーズ」に登録が必要になります。ヤマトビジネスメンバーズは法人が対象のサービスです詳しくはこちらで確認してください。<a href="https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html">https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html</a></p>
<p>ネコポスの送り状作成にはインストール型の「<a href="http://www.kuronekoyamato.co.jp/newb2/newb2.html">送り状発行ソフトＢ２</a>」とクラウド型の「Ｂ２web」があります、今回はＢ２webの方で送り状を作成します。</p>
<h3>ヤマトビジネスメンバーズにログインする</h3>
<p>まずはヤマトビジネスメンバーズにログインします。お客様コードとパスワードは契約完了後に担当の営業所からもらえます。</p>
<p><a href="/uploads-archive/2015/05/nekopos1.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7349" src="/uploads-archive/2015/05/nekopos1.gif" alt="nekopos1" width="625" height="231" /></a></p>
<p>ログインが完了すると次のような画面になります。</p>
<p><a href="/uploads-archive/2015/05/nekopos2.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7351" src="/uploads-archive/2015/05/nekopos2.gif" alt="nekopos2" width="624" height="353" /></a></p>
<p>送り状発行システムＢ２webのを開いてください。カーソルを上にのせるとポップアップが出るので利用するを選択して下さい。すると下のような画面になります。</p>
<p>この画面で送り状を作成したり、送り状番号のデータを出力したりします。</p>
<p><a href="/uploads-archive/2015/05/nekopos3.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7352" src="/uploads-archive/2015/05/nekopos3.gif" alt="nekopos3" width="623" height="370" /></a></p>
<p>&nbsp;</p>
<h3>B2webに届け先のデータを取り込む</h3>
<p>つづいて届け先の名前、住所、電話番号などのデータをB2webに取り込みます。（※送り状を一枚ずつ作成する場合は「個別発行」から操作して下さい。）</p>
<p>「外部データ取込み」をクリックします、すると取り込むデータの紐付けを行う画面が出てきます。</p>
<p><a href="/uploads-archive/2015/05/nekopos4.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7354" src="/uploads-archive/2015/05/nekopos4.gif" alt="nekopos4" width="624" height="480" /></a></p>
<p>&nbsp;</p>
<p>取り込むデータが既にB2用に整えられていない場合は、まず取込パターンで「新規レイアウト」を選択し項目の紐付けを行います。</p>
<p>データ形式は取り込むデータの形式を確認してください。yahooや楽天などモールの場合はほとんどがCSV形式になっていると思います。</p>
<p>データの紐付けは以下の項目が必須になっています。</p>
<p>・出荷予定日</p>
<p>・送り状種別</p>
<p>・お届け先電話番号</p>
<p>・お届け先名</p>
<p>・お届け先郵便番号</p>
<p>・お届け先住所</p>
<p>・ご請求先顧客コード※</p>
<p>・運賃管理番号※</p>
<p>ここで「ご請求先顧客コード」と「運賃管理番号」はB2web上で必須と表示されていませんが必ず入力が必要になります。この２つは紐付けではなく固定値を入力した方が良さそうです。</p>
<p>「ご請求先顧客コード」はログインした際のお客様コードと同じ文字列が入り、「運賃管理番号」は通常「01」となりますが念のため担当の営業所に確認してください。</p>
<p>そして「送り状種別」ですが配送方法によって番号が決められています。ネコポスの場合は「７」になります。これも固定値で入力するか、もしくはCSVを出力する側で調整して下さい。</p>
<p>ちなみに「レイアウト項目」の「記事」にモールの注文番号を紐付けておくと、複数のモールを運営している場合送り状を見ただけでモールが判断できるので便利です。</p>
<p><a href="/uploads-archive/2015/05/nekopos5.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7357" src="/uploads-archive/2015/05/nekopos5.gif" alt="nekopos5" width="625" height="337" /></a></p>
<p>&nbsp;</p>
<p>それぞれのレイアウト項目をクリックすると取り込むデータの方式や最大文字数などの説明が表示されます。紐付けを行う際に参考にしてください。</p>
<p>紐付けが完了したら取込開始のボタンが浮き上がってくるのでクリックします。</p>
<p><a href="/uploads-archive/2015/05/nekopos6.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7359" src="/uploads-archive/2015/05/nekopos6.gif" alt="nekopos6" width="625" height="494" /></a></p>
<p>&nbsp;</p>
<p>修正が必要な送り先データに関しては通し番号のセルが赤くなるので、「編集」から必要な部分を修正して下さい。</p>
<p>修正が全て完了したら、印刷する全てのデータで「選択」にチェックが入っている事を確認して送り状発行のボタンをクリックします。</p>
<h3>送り状を印刷する</h3>
<p>続いて下の様な画面がでてきます。</p>
<p>ラベルシールの枚数を表示させてたい場合は「プレビュー画面を表示」にチェックを入れておいて下さい。</p>
<p><a href="/uploads-archive/2015/05/nekopos7.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7360" src="/uploads-archive/2015/05/nekopos7.gif" alt="nekopos7" width="622" height="413" /></a></p>
<p>プリンターにラベルシールをセットしたら「発行開始」をクリックして下さい。</p>
<p><a href="/uploads-archive/2015/05/nekopos9.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7387" src="/uploads-archive/2015/05/nekopos9.gif" alt="nekopos9" width="583" height="347" /></a></p>
<p>&nbsp;</p>
<p>すると上のようなポップアップが出てきます。１/１となっている箇所にラベルシールの印刷枚数が表示されます。</p>
<p>これで送り状の作成は完了です。</p>


ネコポスの送り状をB2webで作成する方法

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】

<p>私自身、エンジニアってわけではないのですが、プログラムに片足突っ込んでいるようなものなので、よくわからないことがあり、ググってみたりすると、最近エンジニアに特化している質問サイト等に出くわすことが多くなりました。</p>
<p>以前は誰か個人のブログが多いのですが、最近徐々にこのようなサイトが台頭しているよう感じます。</p>
<p>それでは早速ご紹介します！</p>
<h2>teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</h2>
<p><a href="https://teratail.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7311" src="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg" alt="teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム" width="620" height="380" srcset="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg 1024w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-300x184.jpg 300w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-228x140.jpg 228w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
2014年7月に誕生したレバレジーズさんが運営しているサイトです。<br />
デザインがスッキリしていて見やすいです。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://teratail.com/" target="_blank">teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</a></p>
<p>&nbsp;</p>
<h2>スタック・オーバーフロー</h2>
<p><a href="http://ja.stackoverflow.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7314" src="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg" alt="スタック・オーバーフロー" width="620" height="380" srcset="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg 1024w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-300x184.jpg 300w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-228x140.jpg 228w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはよくググると、海外版のサイトがひっかかっていたのですが、その日本語版が2014年12月頃にベータ版として登場したようです。<br />
こちらもシンプルなデザインで見やすいですね！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://ja.stackoverflow.com/" target="_blank">スタック・オーバーフロー</a></p>
<p>&nbsp;</p>
<h2>Qiita &#8211; プログラマの技術情報共有サービス</h2>
<p><a href="https://qiita.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7310" src="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg" alt="Qiita - プログラマの技術情報共有サービス" width="620" height="380" srcset="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg 1024w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-300x184.jpg 300w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-228x140.jpg 228w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはどちらかと言うと、技術情報共有に重きを置いていて、その中でフィードバックもらうことが出来るようになっています。<br />
緑が印象的で記憶に残りやすいサイトですね。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://qiita.com/" target="_blank">Qiita &#8211; プログラマの技術情報共有サービス</a></p>
<p>&nbsp;</p>
<h2>CodePen</h2>
<p><a href="http://codepen.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7307" src="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg" alt="CodePen - Front End Developer Playground &amp; Code Editor in the Browser" width="620" height="380" srcset="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg 1024w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-300x184.jpg 300w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-228x140.jpg 228w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらは質問＆回答ではなく、技術共有のサイトです。<br />
プログラミングよりはフロントエンドよりの技術が多いかと思います。<br />
実行の結果とソースが一画面に表示されとても見やすいです！</p>
<p>例えば以下のようなものになります。<br />
<a href="http://codepen.io/egrucza/pen/bNjQLY" target="_blank">&#8220;Stupid&#8221; Case Study Hover</a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://codepen.io/" target="_blank">CodePen</a></p>
<p>&nbsp;</p>
<h2>Forkwell &#8211; エンジニアのためのポートフォリオサービス</h2>
<p><a href="https://forkwell.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7308" src="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg" alt="Forkwell - エンジニアのためのポートフォリオサービス" width="620" height="380" srcset="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg 1024w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-300x184.jpg 300w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-228x140.jpg 228w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
ポートフォリオサービスとありますが、技術共有サイトです。<br />
エンジニアだけでなく、webクリエイター全般に対応しております。<br />
求人サイトと直結しているようなので、転職を目指す人にはいいかもしれません。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://forkwell.com/" target="_blank">Forkwell</a></p>
<p>&nbsp;</p>
<h2>WordPress フォーラム</h2>
<p><a href="https://ja.forums.wordpress.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7313" src="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg" alt="WordPress › フォーラム" width="620" height="380" srcset="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg 1024w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-300x184.jpg 300w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-228x140.jpg 228w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはご存知の通り、wordpress専用のサイトです。<br />
wordpress関連のことを調べるとよくたどり着きます。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://ja.forums.wordpress.org/" target="_blank">WordPress フォーラム</a></p>
<p>&nbsp;</p>
<h2>jsdo.it</h2>
<p><a href="http://jsdo.it/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7309" src="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg" alt="jsdo.it - Share JavaScript, HTML5 and CSS" width="620" height="380" srcset="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg 1024w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-300x184.jpg 300w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-228x140.jpg 228w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはカヤックさんが運営しているサイトで、<br />
JavaScript,HTML5,CSSに特化しているようなので、エンジニアというよりフロントエンドよりですね。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://jsdo.it/" target="_blank">jsdo.it</a></p>
<p>&nbsp;</p>
<h2>W3Q &#8211; Web制作のお悩みを解決するQ&amp;Aとまとめサービス</h2>
<p><a href="http://w3q.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7312" src="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg" alt="W3Q - Web制作のお悩みを解決するQ&amp;Aとまとめサービス" width="620" height="380" srcset="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg 1024w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-300x184.jpg 300w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-228x140.jpg 228w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはweb制作、web業界に関する質問をなんでもっていうサイトなのですが、<br />
今まで紹介してきたサイトと比べると、匿名のため品のない回答も多く見受けられます・・・</p>
<p>&nbsp;</p>
<p><a class="link" href="http://w3q.jp/" target="_blank">W3Q</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>私自身エンジニア歴は長くはないので、<br />
調べたらなんとかなるという状況にいましたが、当初からすると贅沢な状況になっているのかもしれません。</p>
<p>私にとってありがたいサービスが生まれて来ているので、こうゆうサイトで知識を蓄えつつ、<br />
回答する側に行きたいなぁと思います。</p>


webエンジニアが技術共有＆質問できるサイト7つ

<p>マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、</p>
<p>WEB端末向けの新たなデザイン体系です。</p>
<p>&nbsp;</p>
<p>Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、</p>
<p>具体的にどんなものなのか知らずにいました。</p>
<p>私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、</p>
<p>実際には別物だということを知り、</p>
<p>今後のためにもちゃんと調べようと思ったので、</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、</p>
<p>内容をまとめてみました。</p>
<p>&nbsp;</p>
<p>公式のガイドライン</p>
<p><a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
<p>ガイドラインでは、度々dpという単位が使われています。</p>
<p>この単位は解像度が160dpiの場合の1pxを基本としています。</p>
<p>解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。</p>
<p>(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)</p>
<p>&nbsp;</p>
<p>まず、マテリアルデザインの核となる部分</p>
<h3>３次元空間(3D)を意識する</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、</p>
<p>マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。</p>
<p><a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、</p>
<p>この奥行きを視覚的に知らせることを目的としています。</p>
<p>そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、</p>
<p>その要素の奥行の状態に合わせて変化させる必要があります。</p>
<p>また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。</p>
<p>&nbsp;</p>
<p>重要な要素についてはその奥行が決められていて、</p>
<p>デバイスによっても、その奥行が変化します。</p>
<p><a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>マテリアルデザイン上では、各要素を薄い紙として扱います。</p>
<p>ただ、実際の紙と違って、その紙は様々に変形することが許容されています。</p>
<p>とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、</p>
<p>折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。</p>
<p>形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。</p>
<p>&nbsp;</p>
<h3>アニメーションの基本</h3>
<p>マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。</p>
<p>そのアニメーションにももちろんルールがあります。</p>
<p>通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、</p>
<p>入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。</p>
<p>ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。</p>
<p>&nbsp;</p>
<h3>Responsive interaction</h3>
<p>ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。</p>
<p>マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。</p>
<p>日本では波紋エフェクトとも呼ばれています。</p>
<p>タッチした場所を中心に、波紋のようなアニメーションを表示することで、</p>
<p>タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。</p>
<p><a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。</p>
<p>&nbsp;</p>
<h3>視覚的な連続性のあるアニメーション</h3>
<p>マテリアルデザインの中で、私が最も共感するアニメーションルールですが、</p>
<p>タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。</p>
<p>例えば記事の一欄があった場合、</p>
<p>一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、</p>
<p>記事の詳細のページヘ遷移するというアニメーションをつけます。</p>
<p>一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。</p>
<p>そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、</p>
<p>ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、</p>
<p>マテリアルデザインという枠を超えてデザインの勉強になると思います。</p>
<p>動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。</p>
<p>興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。</p>


マテリアルデザイン(material design)の基本の基本についてまとめてみました

videoタグの動画をcanvasを使って表示する

ECサイトでよくある横並びのリストのいろいろなコーディング方法

jQueryのよく使いそうなAjax関係のAPIをまとめてみました

レスポンシブ＆フラットに合ったLightbox系jQueryプラグイン「strip」

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>2014年の秋に正式にW3Cから勧告されたHTML5では、</p>
<p>それまで一部のブラウザ用に作られたタグで、</p>
<p>正式なタグとして採用されたものがいくつかあります。</p>
<p>その中でも、利用すると便利だと思われる&lt;ruby&gt;というタグがあります。</p>
<p>このタグは感じなどに読み仮名などをルビとして表示させるためのものです。</p>
<p>&nbsp;</p>
<p>↓<ruby>表示例<rp>(</rp><rt>ひょうじれい</rt><rp>)</rp></ruby></p>
<p><a class="demo" href="/demo/ninomiya/70/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>基本的には、以下のように記述して使います。</p>

		<div id="crayon-64954015859e2846033237" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ruby&gt;文字A&lt;rt&gt;るびa&lt;/rt&gt;文字B&lt;rt&gt;るびb&lt;/rt&gt;&lt;/ruby&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015859e2846033237-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015859e2846033237-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まず、&lt;ruby&gt;でルビを付ける対象の文字全体を囲みます。</p>
<p>次に、ルビを付けたい文字のあとに、&lt;rt&gt;タグでルビの文字を記述すれば完了です。</p>
<p>&nbsp;</p>
<p>ただ、Firefoxでは、現時点(Firefox36)ではrubyの表示に対応しておらず(プラグインが必要; <a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">38より正式に対応予定</a> →追記(2015/05/22)：無事38から正式に対応されたようです<a href="https://hacks.mozilla.org/2015/05/trainspotting-firefox-38/" target="_blank">&lt;参考&gt;</a>)、</p>
<p>そういったruby非対応のブラウザに配慮したい場合は、以下のように記述します。</p>

		<div id="crayon-64954015859e6117137372" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ruby&gt;文字A&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015859e6117137372-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015859e6117137372-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここではルビの文字を括弧で<ruby>括<rp>(</rp><rt>くく</rt><rp>)</rp></ruby>るようにします。</p>
<p>&lt;rp&gt;で囲った文字は、</p>
<p>&lt;ruby&gt;に対応したブラウザでは表示されず、非対応のブラウザのみで表示されるため、</p>
<p>非対応のブラウザではカッコ書きでルビの文字が表示されるようになります。</p>
<p>&nbsp;</p>
<p>ルビがたくさんあって記述が面倒な場合は、以下のように&lt;rt&gt;や&lt;rp&gt;の閉じタグを省略することも可能です。</p>

		<div id="crayon-64954015859e7760458886" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ruby&gt;文字A&lt;rp&gt;(&lt;rt&gt;るびa&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;rt&gt;るびb&lt;rp&gt;)&lt;/ruby&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015859e7760458886-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015859e7760458886-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>以下のように、ルビを付けたい文字を&lt;rb&gt;で囲む方法もあります。</p>

		<div id="crayon-64954015859e8657677934" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ruby&gt;&lt;rb&gt;文字A&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;rb&gt;文字B&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015859e8657677934-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015859e8657677934-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;rb&gt;はHTML5が正式に勧告される前に廃止されそうになったのですが、</p>
<p>より複雑なルビの表記に対応させるために、採用されることになりました。</p>
<p>また、さらに&lt;ruby&gt;タグ内全体のルビを下付けで表示させる&lt;rtc&gt;というタグも採用されていますが、</p>
<p>ブラウザで表示に対応しているものが<ruby>殆<rp>(</rp><rt>ほとん</rt><rp>)</rp></ruby>どないようですので、省略いたします。</p>
<p>&nbsp;</p>
<p>使ってみると意外と簡単に使えますので、</p>
<p>ぜひお試しください。</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a href="http://www.htmq.com/html5/ruby.shtml" target="_blank">&amp;lt;ruby&amp;gt;－HTML5タグリファレンス</a></p>
<p><a href="http://www.w3.org/TR/html5/" target="_blank">HTML5</a></p>
<p><a href="http://www.html5.jp/tag/elements/ruby.html" target="_blank">ruby 要素 &#8211; テキストレベルの意味づけ &#8211; HTML要素 &#8211; HTML5 タグリファレンス &#8211; HTML5.JP</a></p>
<p><a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">Firefox 38でルビ機能が有効化へ &#8211; Mozilla Flux</a></p>

HTML5で正式な要素になった&lt;ruby&gt;の基本的な使い方

video：動画自体をクリックで再生・停止させる

<p>以前、CSSの優先順位についての記事を書いたのですが、<br />
<a href="/designer/%e5%88%9d%e7%b4%9a%e8%80%85%e3%81%af%e6%84%8f%e5%a4%96%e3%81%a8%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%aa%e3%81%84css%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84.html">初級者は意外と理解してない(?)CSSの優先順位について | スターフィールド株式会社</a></p>
<p>その順位をチェックできるツールがありました。<br />
ポイント制になっておりわかりやすくなっています。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7175" src="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg" alt="Specificity Calculator" width="640" height="369" srcset="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg 1024w, /uploads-archive/2015/03/Specificity-Calculator-300x173.jpg 300w, /uploads-archive/2015/03/Specificity-Calculator-228x132.jpg 228w, /uploads-archive/2015/03/Specificity-Calculator.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>「+Duplicate」で比べたいセレクタを追加し、左上にある「Sort by specificity」を押すと、高い順に並べてくれます。</p>
<p><a class="link" href="http://specificity.keegan.st/" target="_blank">Specificity Calculator</a></p>
<h2>CSS3のブラウザサポート表</h2>
<h3>HTML5 &amp; CSS3 Web Design</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7174" src="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg" alt="HTML5 &amp; CSS3 Web Design" width="640" height="369" srcset="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg 1024w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-300x173.jpg 300w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-228x132.jpg 228w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /><br />
各css3がどのブラウザに対応しているかを表にしているサイトです。わかりやすいですね！</p>
<p><a class="link" href="http://fmbip.com/litmus/" target="_blank">HTML5 &amp; CSS3 Web Design</a></p>
<h3>Can I use&#8230; Support tables for HTML5, CSS3, etc</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7176" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg" alt="Can I use... Support tables for HTML5, CSS3, etc" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちら同様ですが、もっと細かく別れており、詳細ページへ行くと以下のようにわかり易く表示してくれています。こちらのサイトの方がブラウザ、バージョンの数は多いですね。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7177" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg" alt="Can I use... Support tables" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>赤がサポート外ですね。<br />
あとそれぞれの四角い項目にマウスオンすると、そのブラウザ（＆バージョン）のシェアの％を教えてくれます。<br />
便利ですね！</p>
<p><a class="link" href="http://beta.caniuse.com/" target="_blank">Can I use&#8230; Support tables for HTML5, CSS3, etc</a></p>
<p>これらを見ると、今はほぼIE9以上の対応でいい雰囲気なので、</p>
<p>・Box Sizing<br />
・Border Radius<br />
・Box Shadow<br />
・Background Size<br />
・CSS Transforms<br />
・nth-child等の擬似要素</p>
<p>なんかはもう普通に使用してもいいかもしれませんね！<br />
これを使用できるだけでだいぶ違いますね〜</p>
<p>あとはcss animationやcss transitionが使えるようになると変わりますね。</p>


CSSの優先順位をチェックできるツール＆CSS3のブラウザサポート表

SVG.JSを使ったSVGファイルの読み込みと操作

<p>だいぶお恥ずかしい話、非推奨になっているの気づきませんでした。。。<br />
version 2.2から非推奨になっているとのことで、だいぶ前ですね〜・・・</p>
<p><a href="http://codex.wordpress.org/Function_Reference/bloginfo" class="link" target="_blank">codex</a></p>
<p>wordpressでサイト制作を始めた時から</p>
<p><strong>bloginfo(&#8220;url&#8221;)<br />
bloginfo(&#8220;stylesheet_url&#8221;)<br />
bloginfo(&#8220;template_url&#8221;)</strong></p>
<p>を使っていたのですが、一回使った後にこのタグを検索するなんてことは特になかったので全く知りませんでした。<br />
なんていいわけを言ってみたり・・・</p>
<p>とにかく、非推奨らしいので、違うタグを使わないといけません。</p>
<p>なので、僕の場合は、以下のようにすることにしました。</p>
<table>
<tr>
<th>今まで</th>
<th>今後</th>
<th>タグの内容</th>
</tr>
<tr>
<td>bloginfo(&#8220;url&#8221;)</td>
<td>echo home_url()</td>
<td>サイトのURL(ドメイン)</td>
</tr>
<tr>
<td>bloginfo(&#8220;stylesheet_url&#8221;)</td>
<td>echo get_stylesheet_uri()</td>
<td>スタイルシートのパス(style.css)</td>
</tr>
<tr>
<td>bloginfo(&#8220;template_url&#8221;)</td>
<td>echo get_template_directory_uri()</td>
<td>wordpressのテーマの位置のパス</td>
</tr>
</table>
<p>wordpressはアップデート頻度が多いので、たまにチェックしていないと、<br />
マズイことになりますね〜・・・</p>
<p>しっかりアンテナはっておかないとなと思う出来事でした。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2015/05/28

2015/05/20

2015/05/20

2015/05/13

2015/05/13

2015/05/12

2015/04/22

2015/04/22

2015/04/21

2015/04/15

2015/04/14

2015/04/08

2015/04/01

2015/04/01

2015/04/01

2015/03/25

2015/03/18

2015/03/18