週刊Webテク通信

2013年1月第2週号1位は、CSSによるレイアウトについて学習できるサイト、気になるネタは、iPad好きの子供向けトイレトレーニング用おまる「iPotty」

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年1月7日~1月13日の間に見つけた記事のベスト5です。

1. Learn CSS Layouthttp://learnlayout.com/toc.html

CSSによるレイアウトについて学習できるサイトです。順を追って初歩からCSSによるレイアウトを学ぶことができます。

もちろん、レスポンシブWebデザインについても触れられており、古いIEへの対応などブラウザサポートについても考慮された内容となっています。

はずかしながら、flexboxの使い方を初めて知ってその便利さに驚いたのですが、ここでのサンプルはChromeのみの対応ということでした。ブラウザの対応がまだまだのようで残念です。

図1 CSSレイアウトについて学ぶサイト
図1 CSSレイアウトについて学ぶサイト

2. Web Developer Checklisthttp://webdevchecklist.com/

Webデベロッパーのためのチェックリストです。

モバイル対応、解析、パフォーマンス、ユーザビリティなどのカテゴリごとに、チェック項目が掲載されています。それぞれの項目の横の三角形をクリックすると、参考リンクが現れます。

チェックリストと、それを実現するためのヒントが一緒になっているところがポイントですね。

図2 Web制作者のためのチェックリスト
図2 Web制作者のためのチェックリスト

3. The Ultimate Complete Final Social Media Sizing Cheat Sheet - Blog About Infographics and Data Visualization - Cool Infographicshttp://www.coolinfographics.com/blog/2013/1/8/the-ultimate-complete-final-social-media-sizing-cheat-sheet.html

各種ソーシャルメディアで使われる様々な画像のサイズをまとめています。

取り上げられているのは、Facebook、Twitter、Google+、YouTube、Linked In、Pinterestです。

図3 各種ソーシャルメディアの画像サイズまとめ
図3 各種ソーシャルメディアの画像サイズまとめ

4. The Best Web Designs of 2012 | TutsListhttp://www.tutslist.com/the-best-web-designs-of-2012/

2012年のベストWebデザインと題したギャラリーです。

やはり昨年流行した、単ページ完結の縦スクロールで見せていくサイトが目立ちます。

図4 2012年のベストWebデザインいろいろ
図4 2012年のベストWebデザインいろいろ

5. Fresh Resources For Designers And Developers ? January 2013http://www.hongkiat.com/blog/designers-developers-monthly-01-2013/

Webデザイナー&デベロッパーのためのツールやテンプレートなどをまとめた記事です。

昨年末に急に注目を集めたSublime Text 2のカラースキームも掲載されています。

図5 Webデザイナー&デベロッパーのための各種リソース
図5 Webデザイナー&デベロッパーのための各種リソース

そのほか、最近の記事の中から、日本語での気になるハウツー記事を紹介します。

先週の気になるWebサービス

OneClickCSShttp://css.miugle.info/

HTMLを元にCSSのベースとなる記述を生成してくれるサービスです。

HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成してくれます。

まとまりごとにコメントも付きますし、HTMLがきちんと記述できていれば、適切なCSSが生成されると思います。

ソース全体でまとめてやるより部分的に生成させていく方が現実的な気がしますが、結構長いHTMLでも瞬時にCSSを生成することができるようです。

図6 HTMLソースをもとにCSSのベースとなる記述を生成
図6 HTMLソースをもとにCSSのベースとなる記述を生成

おすすめ記事

記事・ニュース一覧