週刊Webテク通信

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

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

ネットで見かけた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の角丸とグラデーションのジェネレーター

今週の気になるWebネタ

Google Japan Blog: 選手と同じピッチに立とう! 7 つのスタジアムと南アフリカの街角がストリートビューに登場http://googlejapan.blogspot.com/2010/06/7.html

Google マップのストリートビューで,南アフリカのサッカースタジアムや周辺の市街地が見られるようになっています。

スタジアムの中に入り,ピッチに立っているような目線で楽しむこともできます。ストリートビュー撮影用の三輪自転車が,グラウンドの隅を走り回る様子のムービーも公開されていました。

ところで,このことを伝えているGoogle Japanのブログですが,⁠ワールドカップ」という名称をたくみに避けて書かれていますね(最後に出てきてますが)⁠⁠ワールドカップ」という言葉を出して宣伝活動をするには許可が必要だからなのかな,と大人の事情を勘ぐってみました。

「ワールドカップ」でGoogle検索すると試合結果が出てくるのは便利ですが,関連情報のリンクがFIFAの英語サイトだけなのが残念に思えます。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入