週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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のベースとなる記述を生成

今週の気になるWebネタ

iPad好きの子供向けトイレトレーニング用おまる「iPotty」http://ipodtouchlab.com/2013/01/ipotty-ipad.html

ラスベガスで行われたCES 2013(国際家電見本市)で,iPadを装着できるスタンドの付いた「おまる」が発表されていたそうです。楽しくトイレができるとともに,トイレトレーニングにも役立つということですね。

iPadがよごされるんじゃないかと不安になるところですが,ちゃんと表面は透明なカバーが付いているとのことで安心です。こういうのを使っている子供が,将来はトイレでiPadを使う大人になるのかもしれませんが。

そもそも小さい子供にiPadを使わせるのがどうかという議論もあるかもしれませんが,実際に子育てしている親にとっては理想論だけではやってられないというケースもあります。iPadで気をひいてトイレトレーニングがうまくいくのなら,それはそれで良いモノなんじゃないかと思う次第です。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入