週刊Webテク通信

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

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

ネットで見かけた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サービス

今週の気になるWebネタ

コクヨ,iPad 1500台導入 「次世代オフィス」サービス開発に活用 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/1008/17/news060.html

コクヨが来年度から年間約1500台のiPadの導入を予定しているそうで,各所でニュース記事になっていました。次世代オフィス環境を実現するサービス開発に向け,まずは社内での活用を始めるとのことです。

プレゼンや会議のときには,確かにiPadは活躍しそうです。パソコンをiPadに置き換えることができれば,経費節減にもつながるでしょうね。⁠母艦」としてのパソコンは必要なんですが。

Wi-Fiモデルと3Gモデルのどちらを導入するのかということが,ちょっと気になります。Wi-Fiモデルだろうなとは思うのですが,商談などで外で使うには3Gモデルの方が便利ですよね。

こうやってニュースに取り上げられることによって,iPadをビジネスに活用している企業というイメージが付くのもメリットになるでしょう。実際の導入が進んだところで,実用例などを色々聞いてみたいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入