週刊Webテク通信

2010年8月第4週号1位は、CSS3のメディアクエリの使い方、気になるネタは、コクヨ、iPad 1500台導入

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

1. CSS3 Media Querieshttp://www.webdesignerwall.com/tutorials/css3-media-queries/

CSS3のメディアクエリの使い方を紹介した記事です。

CSS2ではメディアタイプによって、スクリーン用とプリント用などでCSSを分けることができました。CSS3ではメディアクエリを使い、ディスプレイの解像度の違いなどによって、より効果的なCSSの切り分けができるようになっています。

メディアクエリによる実際の指定方法として、以下の例が解説されていました。

  • Max Width(指定した幅より小さい場合に適用)
  • Min Width(指定した幅より大きい場合に適用)
  • Multiple Media Queries(最大幅と最小幅を指定して、幅がその間の場合に適用)
  • Device Width(表示エリアではなくデバイスの幅による指定方法)

iPhone 4用、iPad用として指定するコードも紹介されています。

メディアクエリに対応していないIE8以前のために、JavaScriptを使って同様のことを実現する方法へのリンクも載っていました。

実際にメディアクエリを使ってCSSを切り替えているサイトの実例も必見です。

図1 CSS3のメディアクエリの使い方
図1 CSS3のメディアクエリの使い方

2. Mastering Typography in Web Design with Inspirations & Tools | Onextrapixel - Showcasing Web Treats Without A Hitchhttp://www.onextrapixel.com/2010/08/17/mastering-typography-in-web-design-with-inspirations-tools/

Webデザインにおけるタイポグラフィに関するまとめ記事です。

タイポグラフィに関して気をつける点として、以下のことが解説されています。

  • フォントタイプの選択が訪問者の第一印象に影響を及ぼす
  • 多くのフォントを使いすぎるな
  • 大きすぎる、または小さすぎるフォントサイズはダメ
  • トラッキング、カーニング、行間とマージンはよいタイポグラフィに必要不可欠

タイポグラフィが優れたサイトのギャラリーや、タイポグラフィ関連のオンラインツール、関連記事へのリンクが充実しています。

図2 Webデザインでのタイポグラフィについて
図2 Webデザインでのタイポグラフィについて

3. 3 Advanced CSS3 Techniques You Should Learnhttp://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/

必ずマスターしたいCSS3の3つのテクニックを紹介した記事です。

進化したセレクタ(新たな疑似クラス⁠⁠、アニメーション、メディアクエリの3つについて、実例を挙げて解説しています。

「:nth-child(n)」という疑似クラスで、親要素のn番目の子要素を指定できます。また、数値の部分は「odd(奇数⁠⁠/even(偶数⁠⁠」を使うことも可能です。これで、リストの一行おきに背景色を付けることも簡単に実現できます。⁠:not」という「○○ではない要素」の指定も便利ですね。

メディアクエリについては、1位の記事でも詳しく学べます。メディアクエリを使ってiPhoneやiPad向けのCSSを用意できることが、いまアメリカでは注目されているのでしょうね。

図3 必ずマスターしたいCSS3の3つのテクニック
図3 必ずマスターしたいCSS3の3つのテクニック

4. Impressive Examples Of Minimalism In Web Design (Part One) | The Inspiration Bloghttp://www.theinspirationblog.net/showcases/impressive-examples-of-minimalism-in-web-design-part-one/

ミニマルなWebデザインのギャラリーです。ミニマリズムはWebデザインの主流のトレンドで、ミニマルでクリーンなデザインを好むユーザーは多いと書いてありました。

パート1とパート2の2ページに分けて紹介されています。

図4 ミニマルなWebデザインのギャラリー
図4 ミニマルなWebデザインのギャラリー

5. 46 Captivating Examples of Extremely Colorful Web Designshttp://www.1stwebdesigner.com/inspiration/extremely-colorful-web-designs/

カラフルなWebデザインのギャラリーです。⁠生活にとっての色は料理にとっての塩のようなもの(Color to life is like salt to food⁠⁠」という色の重要性をあらわすフレーズがいいですね。

ミニマルとカラフルとは相反するものではないですが、ミニマルデザインのギャラリーと対比して見るのも興味深いです。

図5 カラフルなWebデザインのギャラリー
図5 カラフルなWebデザインのギャラリー

そのほか先週の記事から、気になるニュース記事を紹介します。

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

HTMLのインデントを綺麗にするサービス - Ham Cutlethttp://hamcutlet.fjord.jp/

Ham CutletはHTMLのインデントを綺麗に揃えるWebサービスです。ソースを見やすくわかりやすくすることができます。

インデントを揃えるだけでなく、余計な空行が削除されたり、改行が追加されるケースもあるようです。意図せずに改行が追加されてしまうので、その点は注意が必要だと思います。ソースを配布しているので、その辺は自分でカスタマイズすることも可能なようです。

CMSが生成した、無駄な空白やインデントだらけのコード、他人の作ったグチャグチャなコードなどをいじる必要があるという人も少なくないと思います。そういうときは、このサービスで一旦綺麗にしてから作業すると便利だと思います。

なお、Dreamweaverの「ソースフォーマットの適用」機能でも、同様のことができるようです。

Ham Cutletは「ハムカツレツ」でハムのマークが付いています。ボタンも鍋の絵柄に「cook」となっていたりとシャレていますね。

図6 HTMLのインデントを綺麗にするWebサービス
図6 HTMLのインデントを綺麗にするWebサービス

おすすめ記事

記事・ニュース一覧