gihyo.jpサイトのロゴ

週刊Webテク通信

2009年2月第4週号1位は、CSSでの縦方向のセンタリング／気になるネタは、アップル、Safari 4を発表

2009-03-05

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

1. In the Woods - Vertical Centering With CSShttp://blog.themeforest.net/tutorials/vertical-centering-with-css/

CSSでは意外とむずかしい縦方向のセンタリングを実現する方法を5パターン紹介しています。

  1. 「display:table」を使う方法
  2. 絶対配置で要素の半分の高さをマイナスのマージンにする方法
  3. 高さの50%から「要素の半分の高さ」を引いた値分の空白を上部に配置にする方法
  4. IEではうまく動かないけど「margin:auto」を使う方法（IE8では動く）
  5. 一行のテキストだけの場合限定で「line-height」を要素の高さと同じにする方法

といった5つの方法を紹介し、それぞれのいい点、悪い点が解説されています。

この記事での一番のおすすめは3番目の方法だそうです。

3.で紹介されている方法だと、上部の空白エリア（つっかえ棒として使う領域はフロートされている）にタイトルなど別の要素を入れることができるし、ウィンドウサイズを小さくしても上部に入れた要素がメインコンテンツの領域（縦方向にセンタリングされたボックス）によって隠れてしまうことがないんだとか。

なお、コンテンツの入る領域の高さをピクセル指定することになるので、文字サイズの関係でコンテンツが領域からはみだす可能性はありますね。

「[CSS]上部のエリアを確保しつつ、要素をページの中央に配置するスタイルシート | コリス」でも、3.の方法を中心にこの記事が紹介されていました。

図1　縦方向中央揃えのまとめページです
図1　縦方向中央揃えのまとめページです

2. 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces | Webdesigner Depohttp://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/

シンプルで混乱させないインターフェイスデザインテクニックの解説です。

Webサイト上で最近よく見かけるインターフェイスがいろいろ紹介されていますが、実装するにはCSSやJavaScriptの知識がそれなりに必要そうです。この記事ではサンプルとなるサイトへのリンクはありますが、コードやライブラリなどの紹介はありません。

「2. Hover controls.」のマウスオーバー時に操作ボタンなどが出現するのはわたしも好きなんですが、iPhoneなどタッチパネルだとマウスオーバーという操作ができないからなぁと思ったり…。

「5.Labels inside inout forms.」の、「⁠フォームに付けるラベルはフィールドの中に入れてしまえ」というのは、確かにログイン時など項目の少ないフォームのときにはいいですね。

3. Quick & Easy CSS Development with Firebug - Tutorial9http://www.tutorial9.net/web-tutorials/quick-easy-css-development-with-firebug/

FirefoxのアドオンとしておなじみFirebugを使って、CSSをすばやく制作しようという初心者向けチュートリアル記事です。

Firefoxでページを開き、Firebugを起動して「Inspect（調査⁠）⁠」を選んでページ上の要素をクリックすると、その部分のHTMLとCSSが表示されます。あとは、CSSの値などを変更すれば、リアルタイムにプレビューしながら編集することができます。

と、既に知っている人には目新しさはないチュートリアルですが、知らなかった人はこれを機会にぜひおためしください。

FirebugでCSSを編集してFirefoxでうまく見えても、IEでは表示が違っているかもしれないということで、後半はIE対策中心のCSSテクニック紹介になっています。

なお、FireBug LiteというJavaScript版もあり、これを使うとInternet ExplorerやSafariなどでもFirebugの機能を利用できるそうです。

図2　FirebugでCSSを制作しようという記事
図2　FirebugでCSSを制作しようという記事

4. logo design processes and logo inspiration | Hein Maas - Freelance Graphic/Web Designerhttp://www.heinmaas.com/2009/02/logo-design-processes-and-logo-inspiration/

優れたロゴデザイナーの作品にインスピレーションを受けつつ、そのデザインプロセスに関する記事も読んでみようという内容です。

ここからリンクされている「Hidden Secrets of Corporate Logos - It’s fun to find them!」には、ロゴのうんちくが載っていて面白いです。

  • amazonのロゴは「a to z」を意味して「a」から「z」まで矢印がのびている
  • FedExのロゴの「E」と「x」の間に矢印が隠されている

といったところは話の種になりそうですが、有名なので知っている人も多いかもしれません。

図3　このサイトのロゴはHMVに似てる気も
図3　このサイトのロゴはHMVに似てる気も

5. 13 Most Desirable Collection Of Free Resources For Every Designer - Opensource, Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2009/02/28/13-most-desirable-collection-of-free-resources-for-every-designer.html

デザイナーのための、様々なフリー素材サイトのリンク集です。

アイコン、オープンソースのアプリケーション、PSD素材、テクスチャー、Wordpressのテーマ／プラグインなど、種類別に1番おすすめのサイトを紹介しています。

やたらに長いリンク集より、こういった厳選されたものの方がわたしは好きです。長いリンク集の方が「あとで読む」と言った意味合いでブックマークされやすいのかもしれませんが。

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

ほかにも、先週はWeb制作に役立つツールがいろいろ紹介されていました。

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

Fliggo - Create Your Own Video Sitehttp://www.fliggo.com/

「Fliggo」は自分専用の動画共有サイトを作成できるサービスです。ビデオブログを作る、YouTubeのような動画共有サイトを作る、動画を特定のメンバーで共有する場所にする、といったことができるようですね。

「Y Combinator発のFliggo、専用動画共有サイト構築サービスを提供開始」に紹介記事がありました。

Flickrの動画版みたいなものみたいです。なかなか期待できそうですね。ちなみにFlickrでも有料版だと動画にも対応していますし、最近HD動画にも対応しました。ただ、Flickrは90秒までという短い動画を対象にしているので、やはり動画共有とは済み分けていくのでしょう。

図4　すぐに自分専用動画サイトが作れます
図4　すぐに自分専用動画サイトが作れます

おすすめ記事

記事・ニュース一覧