週刊Webテク通信

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

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

ネットで見かけた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 - Its 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 すぐに自分専用動画サイトが作れます

今週の気になるWebネタ

アップル,Safari 4を発表--Cover Flow,Tabs on Topなど多数の新機能:ニュース - CNET Japanhttp://japan.cnet.com/news/media/story/0,2000056023,20388810,00.htm

Safari 4のパブリックベータが公開されました。結構ネットで話題になっているのは,やはりWindows版もあるからでしょうか。 今回のWindows版Safariは,Windowsの流儀に従ったユーザーインターフェイスになっているようです。

自慢の速度はやはり速いようですが,ネットの評価を見る限りではChromeと同等ではないかという意見が多いようです。また,タブがウィンドウの一番上にあるところなど,Chromeをかなり意識しているんじゃないかと各所で言われていますね。

個人的に気になったポイントは,これでIE,Firefox,Safariともデフォルトでの拡大/縮小が「文字サイズの拡大/縮小」ではなく「ページ全体の拡大/縮小」になることです。IE7でズーム機能がついてから,こっちの挙動が標準という流れになっているようです。

Webデザインにおいてそんなに大きな影響はないかもしれませんが,極端に文字を大きくしたときにレイアウトが崩れるといったケースは,もうあまり気にしなくてもいいのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入