週刊Webテク通信

2011年12月第4週号1位は、ノーマライズの考え方を取り入れたリセットCSS、気になるネタは、Google+メジャー・アップデートへ―スライダーによるストリーム管理など新機能多数

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

1. 俺の CSS リセット: 2011 冬 - terkel.jphttp://terkel.jp/archives/2011/12/css-reset-2011-winter/

CSSリセットについて見直してみたという記事です。normalize.cssという、ブラウザ間での見た目の差をなるべくなくして標準化するCSSファイルの考え方を取り入れつつ、影響の大きそうな部分はリセットしておくというアプローチで作ったCSSを公開しています。

normalize.cssをベースに、段落やリストなどの要素のマージン類をなくし、微調整を加えた感じのCSSになっています。このCSSを適用させた後に、各自でマージン類の設定を行うという考え方ですね。

解説がとても勉強になりますし、いろいろなテクニックが詰まっています。

図1 ノーマライズの考え方を取り入れたリセットCSSの紹介
図1 ノーマライズの考え方を取り入れたリセットCSSの紹介

2. WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)http://webdesignrecipes.com/wordpress-corporate-website/

企業サイトなど、ブログではないサイトをWordPressで作るテクニックがまとめられています。サンプルとして用意した企業サイトを完成目標として、WordPressでサイトを作るための手順が解説されています。

jQueryの読み込み方や、必要に応じたプラグインの紹介などもあり、実践に即した充実した内容の記事です。

図2 企業サイトをWordPressで作るときの手順を紹介
図2 企業サイトをWordPressで作るときの手順を紹介

3. インスピレーションを刺激する!Facebook新タイムラインのデザイン51選! | KAYAC DESIGNER'S BLOG - デザインやマークアップの話http://design.kayac.com/topics/2011/12/facebook51.php

カバー写真とプロフィール写真の組み合わせで面白い表現をしている、Facebookのタイムラインを多数紹介しています。

いろいろなアイデアが満載で、マネしてやってみようかなと思える表現も少なくないですね。

図3 Facebookタイムラインのデザイン51選
図3 Facebookタイムラインのデザイン51選

4. The Developer's Arsenal of iPad Appshttp://www.webdeveloperjuice.com/2011/12/15/the-developers-arsenal-of-ipad-apps/

Web制作者に役立つiPadアプリを7本紹介した記事です。

モックアップ作成、FTP、コードエディタなど、便利そうなツールが揃っています。有料のもの中心ですが、どれも10ドル以下ですね。

図4 Web制作者に役立つiPadアプリ
図4 Web制作者に役立つiPadアプリ

5. 21 Sets of Free Social Media/Bookmarking Icons - DesignModohttp://designmodo.com/free-social-media-icons/

各種ソーシャルメディアのアイコンセットが多数紹介されています。

日本のサービスのものが入っていないのが残念ですが、シンプルで使い勝手のよさそうなアイコンが揃っています。

図5 ソーシャルメディアのアイコンセットいろいろ
図5 ソーシャルメディアのアイコンセットいろいろ

そのほか、先週の記事の中から、Google+とFacebookに関する興味深いコラムを2つ紹介します。

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

dabblet.comhttp://dabblet.com/

dabblet.comは、ブラウザ上で書いたCSSをすぐにプレビューできるサービスです。右上のタブからCSS、HTML、結果表示を切り替えることができます。また、コードとプレビューとを水平や垂直に分割表示するほか、重ね合わせて表示することも可能です。

コード上のポップアップでカラーやグラデーションなどがプレビューできるのが、その見せ方がステキです。roteteの角度や、transitionの秒数、easingなども、なるほどねという表現でプレビューされます。Previewer test ✿ dabblet.comなどで是非確認してみてください。

開発者のブログのIntroducing dabblet: An interactive CSS playground | Lea Verouには、ほかにもサンプルが紹介されているほか、機能紹介なども載っていますのでこちらもチェックを。

図6 ブラウザ上でCSSをすぐにプレビューできるサービス
図6 ブラウザ上でCSSをすぐにプレビューできるサービス

おすすめ記事

記事・ニュース一覧