週刊Webテク通信

2010年6月第2週号1位は、クロスブラウザ向けのCSSコーディングを行うための原則、気になるネタは、7つのスタジアムと南アフリカの街角がストリートビューに登場

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

1. The Principles Of Cross-Browser CSS Coding - Smashing Magazinehttp://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/

クロスブラウザ向けのCSSコーディングを行うための原則についてまとめた記事です。

以下の項目に分けて説明してあります。

  • CSSボックスモデルを理解する
  • ブロック要素とインライン要素の違いを理解する
  • フロートとクリアを理解する
  • Internet Explorerでの表示チェックを最初に(あるいはあとで)行う
  • Internet Explorerのよくある問題を理解する
  • ブラウザ間で全く同じ見え方にならないものもある
  • CSSリセットを使う
  • SitePointが提供するCSSリファレンスを使う

IEでの表示チェックについては、この記事の作者は最初の段階でと書いています。しかし、Smashing Magazine編集部は、最初にモダンブラウザでチェックして、そのあとでIEでチェックすべきだという主張を載せています。後者の方が今の主流のはずですが、作者は早い段階でチェックしておくことの重要性を伝えたかったのでしょう。

ブラウザ間で見え方が同じにならないものとしては、フォームの要素とフォントが例として挙げられていました。

図1 クロスブラウザ向けCSSコーディングの原則
図1 クロスブラウザ向けCSSコーディングの原則

2. 25 jQuery Based Content And Images Sliders ? SmashinGeeks - Blogging | Designs | Tutorials | Graphics | Wordpress | Blogging | Tech News | Downloadshttp://www.smashingeeks.com/featured/25-jquery-based-content-and-images-sliders.html

コンテンツ/イメージのスライダーを作るための、jQueryを利用したテクニックを多数紹介しています。画像ギャラリーやメニューとして使えそうな効果が揃っています。

わたしは、横に滑って移動する動きのことがスライダーだと思い込んでいたのですが、動きに関わらずスライダーと呼ぶんだと気づきました。スライドしなくてもスライドショーというのと同じですね。

図2 jQueryベースのコンテンツ/イメージのスライダー
図2 jQueryベースのコンテンツ/イメージのスライダー

3. 見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式http://toshiiy.blog22.fc2.com/blog-entry-95.html

見出しをCSSだけで装飾する、シンプルで実用的なサンプル集です。

見出しのギャラリーなど、参考になるリンク集も最後に掲載されています。

図3 見出しをCSSでデザインするサンプル集
図3 見出しをCSSでデザインするサンプル集

4. 30+ iPad Apps For Designers, Developers And Creative Types | SpyreStudioshttp://spyrestudios.com/30-ipad-apps-for-designers-developers-and-creative-types/

Webデザイナーやデベロッパー、クリエイターの役に立つiPad用アプリをまとめた記事です。

  • スケッチ、ドローなどお絵かき系
  • 画像編集、加工など写真系
  • ノート、コードエディタなどエディタ系
  • Dropbox、Evernoteなどクラウド系

などのアプリが紹介されています。

個人的には、モックアップ作成ツールとFTP機能を持ったエディタが気になります。

図4 デザイナー、デベロッパーのためのiPadアプリ集
図4 デザイナー、デベロッパーのためのiPadアプリ集

5. 70 Attractive Examples Of Big Typography In Web Design | DesignBeephttp://designbeep.com/2010/06/11/70-attractive-examples-of-big-typography-in-web-design/

大きなタイポグラフィが効果的に使われたWebデザインのショーケースです。

タイポグラフィ部分が画像ではなくテキストをCSSで装飾しているというサイトも結構ありますね。

図5 大きなタイポグラフィを使ったサイトのショーケース
図5 大きなタイポグラフィを使ったサイトのショーケース

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

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

CSS Corners, CSS3 Gradienthttp://csscorners.com/

CSS3による角丸ボタンを作るのに特化したジェネレーターです。

角丸とグラデーションを同時に設定することができます。

角丸は四隅同時にしか設定できないように見えるのですが、個々の数字を直接編集して四隅バラバラに指定することが可能です。

パディングは上下左右で個別に設定できないなど、機能は限定されています。とはいえ、CSS3の新機能に対する設定は押さえているので、リファレンス代わりにちょっと手助けしてもらいたいときに役立ちそうです。

図6 CSS3の角丸とグラデーションのジェネレーター
図6 CSS3の角丸とグラデーションのジェネレーター

おすすめ記事

記事・ニュース一覧