週刊Webテク通信

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

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

ネットで見かけた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をすぐにプレビューできるサービス

今週の気になるWebネタ

速報:Google+,メジャー・アップデートへ―スライダーによるストリーム管理,ページ管理者を50人まで指定可能など新機能多数http://jp.techcrunch.com/archives/20111219google-updates-improved-stream-controls-photo-tagging-and-more/

日々進化を続けるGoogle+ですが,先日大きなアップデートがありました。「Google+ページ」に複数人の管理者を指定できるようになったことがうれしいですが,個人ユーザーにとって大きな変更点はサークルボリュームスライダーの登場でしょう。

メインストリームに表示する情報量を,サークル別にコントロールしようというのが,サークルボリュームスライダーです。サークルごとに,どの程度の件数をメインストリームに表示するのかを設定できます。といっても4段階しかなく,そのうちの2つは全件表示と全件非表示で,あとは「大部分(most)」「減らす(fewer)」という表記になっています。

Facebookではニュースフィードに表示される記事は,「エッジランク」という独自のアルゴリズムで選別されます。自動のFacebookと自分でコントロールできるGoogle+とでアプローチが違うわけですが,どちらも大量のデータからユーザーが必要とするデータを選別する仕組みを用意しているところでは共通しています。

サークルごとの表示にすれば取りこぼしなく全ての投稿をチェックすることもできるので,もれなくチェックしたいという人にはGoogle+のアプローチの方がよさそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入