ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年12月19日～12月25日の間に見つけた記事のベスト5です。
CSSリセットについて見直してみたという記事です。normalize.cssという、ブラウザ間での見た目の差をなるべくなくして標準化するCSSファイルの考え方を取り入れつつ、影響の大きそうな部分はリセットしておくというアプローチで作ったCSSを公開しています。
normalize.cssをベースに、段落やリストなどの要素のマージン類をなくし、微調整を加えた感じのCSSになっています。このCSSを適用させた後に、各自でマージン類の設定を行うという考え方ですね。
解説がとても勉強になりますし、いろいろなテクニックが詰まっています。
図1 ノーマライズの考え方を取り入れたリセットCSSの紹介企業サイトなど、ブログではないサイトをWordPressで作るテクニックがまとめられています。サンプルとして用意した企業サイトを完成目標として、WordPressでサイトを作るための手順が解説されています。
jQueryの読み込み方や、必要に応じたプラグインの紹介などもあり、実践に即した充実した内容の記事です。
図2 企業サイトをWordPressで作るときの手順を紹介カバー写真とプロフィール写真の組み合わせで面白い表現をしている、Facebookのタイムラインを多数紹介しています。
いろいろなアイデアが満載で、マネしてやってみようかなと思える表現も少なくないですね。
図3 Facebookタイムラインのデザイン51選Web制作者に役立つiPadアプリを7本紹介した記事です。
モックアップ作成、FTP、コードエディタなど、便利そうなツールが揃っています。有料のもの中心ですが、どれも10ドル以下ですね。
図4 Web制作者に役立つiPadアプリ各種ソーシャルメディアのアイコンセットが多数紹介されています。
日本のサービスのものが入っていないのが残念ですが、シンプルで使い勝手のよさそうなアイコンが揃っています。
図5 ソーシャルメディアのアイコンセットいろいろそのほか、先週の記事の中から、Google+とFacebookに関する興味深いコラムを2つ紹介します。
先週の気になるWebサービス
dabblet.comは、ブラウザ上で書いたCSSをすぐにプレビューできるサービスです。右上のタブからCSS、HTML、結果表示を切り替えることができます。また、コードとプレビューとを水平や垂直に分割表示するほか、重ね合わせて表示することも可能です。
コード上のポップアップでカラーやグラデーションなどがプレビューできるのが、その見せ方がステキです。roteteの角度や、transitionの秒数、easingなども、なるほどねという表現でプレビューされます。「 Previewer test ✿ dabblet.com 」などで是非確認してみてください。
開発者のブログの「Introducing dabblet: An interactive CSS playground | Lea Verou 」には、ほかにもサンプルが紹介されているほか、機能紹介なども載っていますのでこちらもチェックを。
図6 ブラウザ上でCSSをすぐにプレビューできるサービス
今週の気になるWebネタ
日々進化を続けるGoogle+ですが、先日大きなアップデートがありました。「 Google+ページ」に複数人の管理者を指定できるようになったことがうれしいですが、個人ユーザーにとって大きな変更点はサークルボリュームスライダーの登場でしょう。
メインストリームに表示する情報量を、サークル別にコントロールしようというのが、サークルボリュームスライダーです。サークルごとに、どの程度の件数をメインストリームに表示するのかを設定できます。といっても4段階しかなく、そのうちの2つは全件表示と全件非表示で、あとは「大部分（most） 」 「 減らす（fewer） 」という表記になっています。
Facebookではニュースフィードに表示される記事は、「 エッジランク」という独自のアルゴリズムで選別されます。自動のFacebookと自分でコントロールできるGoogle+とでアプローチが違うわけですが、どちらも大量のデータからユーザーが必要とするデータを選別する仕組みを用意しているところでは共通しています。
サークルごとの表示にすれば取りこぼしなく全ての投稿をチェックすることもできるので、もれなくチェックしたいという人にはGoogle+のアプローチの方がよさそうです。
