お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

CSS 入門

標準に従ってデザインする

Daniel J Lewis, Computer Scientist, Vanir Systems

Daniel John Lewis は、イギリスでグラフィックス/カラー・デザインのエキスパートの息子として生まれた、フリーランス・コンピューター・サイエンティストです。各種の言語 (PHP、Ruby、Java、XHTML など) で Web アプリケーションを開発する彼は、1980年代後半から開発およびデザイン・ソフトウェアを使っています。コンピューター・サイエンスの研究およびコンサルタントでは、セマンティック Web、Linked Data、人口知能、マシン・ラーニング、データ・マイニング、そして「人文科学のための計算」の分野に大きな比重が置かれているようです。

概要： CSS 2.1 とクロスブラウザーの CSS3 を含め、標準化された CSS スタイルの設定方法を学んでください。具体的には、データの邪魔にならないスタイル設定方法で検索エンジンの最適化を強化する方法と、印刷用、モバイル表示用、および Web のビュー用に、異なる CSS スタイルを設定する方法、そしてアクセシビリティーを改善するためのヒントについて学びます。

タグを付ける!

日付： 2011年 6月 10日
レベル： 初級
この記事の原文： 英語
アクティビティー： 5426 ビュー
お気軽にご意見・ご感想をお寄せください：

カスケーディング・スタイル・シート (CSS) とは、ごく簡単に言えば、(X)HTML Web ページの上に重ねられるデザインの層のことです。このスタイル・シートがなぜ「カスケーディング」であるかと言えば、それは、CSS ではスタイル・シートをサイト全体に適用できるためです。つまり、スタイルを Web サイトに適用すると、そのスタイルはサイト内の各ページの全要素に適用されます。

よく使われる頭文字語

API: Application Programming Interface
CSS: Cascading Style Sheet
HTML: HyperText Markup Language
XHTML: Extensible HTML

Web サイトでは、データをデザインとは切り離すことが重要な概念となっています。データは (X)HTML の形でブラウザーに送信され、そのデータには CSS を使用してデザインが適用されます。このように分離されていれば、ユーザーが特殊なアクセシビリティーを必要とする場合には、デザインを適用することなく、Web ページをレンダリングすることができます。さらに、マシン (例えば検索エンジン) が Web サイトに索引を付ける場合にも、デザインに「妨害」されることはありません。

この記事では、Web サイトのルック・アンド・フィールを強化するための新旧 CSS 手法を詳しく説明するにあたり、読者が (X)HTML に関する知識をある程度お持ちであることを前提としています。したがって、この記事は、Web サイトをデザインするための初期プラットフォームの役割を果たすものとして、開発の際の拠り所としてください。

CSS のフォーマット

CSS スタイル要素の構造は、以下のようにシンプルです。

html-tag-name {
	css-property-key-1: css-value-1;
	css-property-key-2: css-value-2;
}

上記の html-tag-name は、HTML コードで使われるタグのいずれかになります (<a>、<div>、<li>、<label> など)。HTML タグの代わりに、CSS コードでハッシュ記号 (#) に続いて表示される ID 参照が使われる場合もあります。

#id-of-html-tag {
	…
}

あるいは、CSS コードでドット/ピリオド記号 (.) に続いて表示されるクラス参照にすることも可能です。

.class-of-html-tag {
	…
}

CSS のこれらのパーツ (html-tag-name、id-of-html-tag、class-of-html-tag) はシンプル・セレクターとして知られ、HTML に詳細な設定をするために (スペースを間に入れて) ネストすることができます。以下は、その一例です。

outer-html-tag-name inner-html-tag-name { … }

また、ネストは 1 つのデザイン要素を多数のセレクターに適用するためのリストとして使われることもあります。

1st-html-tag-name, 2nd-html-tag-name { … }

確かに、上記のコードは CSS の正式な構文を理解するにはかなり抽象的なので、記事の残りでは、これよりも具体的で有用な例に絞って、CSS の単純さ、潜在力、そして柔軟性を明らかにしていきます。

上に戻る

基本スタイル

サイトのデザインを作成するときに最初に必要となる作業の 1 つは、基本スタイルを確立することです。それには、<body> タグにスタイルを設定します (リスト 1 を参照)。

リスト 1. body タグの CSS 基本スタイル


body{
background-color: #EEEEEE;
color: #000000;
margin: 0;
padding: 0;
text-align: left;
font-size: 100%;
  	font-family: sans-serif;
}

このマークアップは、背景色 (background-color) をオフホワイトに設定し、フォントの色 (color) を黒に設定します。また、コンテンツの端 (margin および padding) がすべてブラウザーのウィンドウ枠と同じになるようにして、テキスト・コンテンツを左端に揃えます (text-align)。このスタイルでは最後に、フォント・サイズ (font-size) をブラウザーのデフォルトに設定し、sans-serif (つまり、文字のストロークの端に小さな飾りが付いていないフォント) フォント・ファミリー (font-family) を使用するように設定しています。

もちろん、この例の設定は単純なものです。通常は、以下のガイドラインを適用することができます。

色を指定する場合は、RGB (Red-Green-Blue) 形式の 16 進数による明度を使用します。
サイズを指定する場合は、ピクセル (数値の後に px を続けて指定)、em (数値の後に em を続けて指定し、その指定した値を現在のフォント・サイズに乗算したフォント・サイズです)、またはパーセンテージ (数値の後に % を続けて指定) を使用します。
テキストは左端、右端、または中央に揃えることができます。浮動小数点数も、左寄せまたは右寄せにすることができます。縦方向の場合には、上端、中央、または下端に揃える必要があります。
フォントは任意のフォントまたはフォント・ファミリー (serif、sans-serif、または monospace) にすることも、ダウンロード可能なフォントにすることもできます。

Web サイトのデザインを決定する際に最も重要な決定事項の 1 つとなるのは、流動レイアウトと固定レイアウトのどちらを使用するかです。固定レイアウトでは、要素の高さと幅を指定します。指定した値は、Web サイトをどのオペレーティング・システムまたはブラウザーで表示するかに関わらず、常に同じです。大抵、これらの要素はピクセルを使用して指定します。一方、流動レイアウトでの要素の高さと幅には柔軟性があり、ブラウザー・ウィンドウ、オペレーティング・システム、およびユーザーの設定に応じて拡大/縮小します。流動レイアウトで要素を指定するには、パーセンテージや em を使用するのが通常です。流動レイアウトと固定レイアウトには、それぞれに利点と欠点があります。どちらのレイアウトを選択するかは、コンテンツのタイプ、コンテンツの量、そして Web サイトにどのようなユーザーがアクセスするかに依存します。

上に戻る

CSS を (X)HTML に適用する方法

CSS を適用するには、まず始めにブラウザーに CSS の置かれている場所を指示する必要があります。この場所は、(X)HTML が CSS を参照する唯一の正しい参照先でなければなりません。参照する方法には、<style> タグを使用する「手軽で汚い」方法、または <link> タグを使用する「手軽で綺麗な」邪魔にならない方法の 2 つがあります。

手軽で汚い方法: style タグ

この方法は大抵の場合、ある Web ページに適用されるスタイルを確認する最も手っ取り早い方法となります。この方法では、HTML 以外のコードを追加してページを「汚す」ことになりますが、1 つの Web ページにしかスタイルが適用されないため (もちろん、サーバー・サイドの言語を使用してヘッダーを組み込んでいる場合はその限りではありません)、スタイルを各ページにコピー・アンド・ペーストするとなると、ページのサイズが大きくなります (ここで「サイズ」と言っているのは、ページの幅や高さではなく、容量を示すキロバイトの話です)。ページのサイズが大きくなれば、各ページをロードする時間が長くなり、したがってユーザーを待たせてしまうことになります。たとえ超高速インターネットの時代に生きているとしても、ユーザーにとってロード時間は、人々が考えているよりも遥かに重要な要素です。

では、その方法はと言うと、極めて簡単で、以下のマークアップをHTML <head> タグに追加すればよいのです。

<style>
	/** Your CSS goes here **/
</style>

手軽で綺麗な方法: 邪魔にならないように CSS にリンクする

この方法は大抵の場合、スタイルを適用する「綺麗な」方法となります。CSS を外部ファイルに含めた場合、他のページからもそのファイルにリンクすることができるので、HTML が簡潔になり、ページ・サイズも小さくなります (ここでも同じく「ページ・サイズ」とは、ページの幅や高さではなく、容量を示すキロバイトのことを言っています)。しかも、この方法は使用するのも簡単で、以下のコードを HTML の <head> タグ・セクションに追加すればよいのです。

<link href="http://www.example.com/styles/style.css" media="screen" 
        rel="stylesheet" type="text/css" />

上記に含まれている style.css は、CSS コードが含まれるプレーン・テキストのファイルです。適切なプラクティスとして、私は自分の Web サイトのパブリック html フォルダーに以下の基本構造を使用しています。

/. このパブリック html フォルダーには、HTML ファイルまたはサーバー・サイドのスクリプト (PHP など) を格納します。
/index.html (PHP 開発の場合は index.php) は、ホーム/スタート・ページです。
/styles/ ディレクトリーには、各種 CSS ファイルを格納します。
/scripts/ ディレクトリーには、各種 JavaScript ファイルおよびライブラリーを格納します。

このディレクトリー構造を使用すると、すべてを整然とまとめられると同時に、それぞれのグループごとに分けて保持されているファイルを参照することができます。

上に戻る

スタイル設定ガイド

このセクションでは、CSS バージョン 3 (CSS3) を適用した場合、これをサポートしていないブラウザー (つまり、CSS3 を無視してデフォルト・スタイルに戻るブラウザー) ではどのような事態が発生するのかを詳しく説明します。また、ブラウザーに固有のCSS3 スタイルの実装 (-moz や -webkit などで始まるスタイル) についても概説します。

単純な <div> タグ

(X)HTML では、かなりシンプルな <div> タグを使用します。このタグは基本的に、Web ページをそれぞれ意味のある領域に区分するために使用します。デザインの観点からすると、このタグは基本的にコンテンツを囲むボックスなので、このようにシンプルなタグで領域を区分するのは良い考えです。

CSS 2.1 での標準的な <div> 効果

CSS はこれまで常に、<div> のスタイル設定をサポートしてきました。これらの要素のなかには、以下のようなボーダーを調整するための設定が組み込まれるものがあります。

border: size type color

上記のパラメーターは以下のとおりです。

size は数値です。
type には、実線、破線、点線、二重線、あるいはいくつかの 3D 形式のボーダーがあります。
color は通常、RGB 形式の 16 進の値です。

したがって、例えばボーダーを 1 ピクセル幅の黒い実線にするには、border: 1px solid #000000; と設定します。

body と同じく、標準の背景色や文字のフォントおよび色を変更することもできます。それには、基本スタイルの場合と同じ方法で変更します。

CSS3 での強化された <div> 効果

CSS2.1 にはないデザイン要素のなかで、特に切望されていたのは、角の丸いボーダーです。これまで、多くのデザイナーは角丸のボーダーを使用するために、画像をベースとしたボーダーを作成するか、CSS と JavaScript を組み合わせる煩雑な手法を使用しなければなりませんでしたが、CSS3 の場合、その必要はありません。CSS3 には border-radius プロパティーが導入されているからです (例えば、border-radius: 10px; というように指定することができます)。

このプロパティーをブラウザーで機能させるには、以下のようなマークアップを組み込む必要があります。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

上記の例は、古い Mozilla ベースのブラウザー (Mozilla Firefox など) と Webkit ベースのブラウザー (Apple Safari など) でマークアップが機能するようにしているにすぎません。必要に応じて、上記の 3 つのプロパティーに別の値を設定すれば、このスタイルが例えば Firefox や Google Chrome などのブラウザーでは異なって表示されるようにすることもできます。

さらに、<div> には影を付けることもできます。それには、以下の 3 つのプロパティーを使用します (同じく、さまざまなブラウザーに対処する必要があります)。

-webkit-box-shadow: 8px 8px 6px #AAAAAA;
-moz-box-shadow: 8px 8px 6px #AAAAAA;
box-shadow: 8px 8px 6px #AAAAAA;

上記の例での最初のプロパティーは横方向の影、2 番目のプロパティーは縦方向の影、そして 3 番目のプロパティーはぼかし具合です。4 番目のプロパティーは、影の色を指定します。ぼかし具合と影の間には、もう 1 つのプロパティー (サイズを基準とした、影の広がりに関する値) を指定することもできますが、このプロパティーはそれほど使用されていないようです。

リスト

(X)HTML で一般的となっている要素には、リストもあります。リストには 2 つの形があります。1 つは順不同リスト (<ul>)、もう 1 つは順序付きリスト (<ol>) です。これらのリストは、手順を説明するために番号が付けられたリストや、レシピの材料などの番号のないリストを Web ページに記載するのに役立ちます。サイトのレイアウトに関して言うと、サイトのナビゲーション構造を作成するのにリストが不可欠となることは珍しくありません。そのことから、リストはスタイル設定をする際に特に重宝します。

順序のあるなしに関わらず、(X)HTML リストにはデフォルトで、リスト・マーカーというものが設定されます。砕けた言い方をすれば、これは「黒丸」と呼ばれるものです。CSS2.1 には限られた種類のリスト・マーカーしかありません。これらのリスト・マーカーを設定するには、list-style-type プロパティーを使用します。順不同リスト・マーカーの場合、このプロパティーの値には none、disc、circle、および square が設定されるのが通常です。

順序付きリスト・マーカーの場合の値は、番号の表記方法に応じます。最もよく使用されるオプションには、decimal、lower-roman、lower-greek があります。

この記事を執筆している時点では、Web ブラウザーがサポートしている CSS3 の新しいリスト関連のプロパティーおよび属性は多くありません。もっと多くサポートされていれば、この記事で (一例として) 趣向を凝らした新しい list-style-type 属性を紹介していたところでしたが、この属性の代わりに、広範にサポートされている別の CSS3 プロパティーを紹介します。それは、text-shadow です。

前に定義した box-shadow と同じく、text-shadow は影を付けるためのプロパティーです。ただし、box-shadow とは異なり、text-shadow は個々の文字に影を付けます。したがって、このプロパティーをリスト項目に適用する場合には、以下のようなマークアップを使用することになります。

li {
  text-shadow: 2px 2px 2px #AA00FF;
}

例えば、nav という (X)HTML ID を持つ順不同リストをナビゲーション・バーとして使用しているとしたら、以下のようなマークアップを作成することができます。

ul#nav li:hover {
  text-shadow: 2px 2px 2px #AA00FF;
}

このマークアップは、#nav 順不同リスト内のリスト要素にマウスが重なったときにだけ、text-shadow を適用します。

リンク

かつて、CSS3 標準の開発者たちは、クリックされていないリンク、アクセスされたリンク、アクティブなリンク、そしてマウスが重ねられているリンクを区別できるようにすることが賢明だと考えました。(X)HTMLでは、これらのリンクにはすべて同じタグ (つまり、<a> タグ) が使用されますが、ブラウザーでのリンクの状態はそれぞれに異なります。ありがたいことに、多くのデザイナーはリンクの状態の違いを無視することから、スタイルを設定するのは、一般的なリンクとマウスが重ねられたリンクの 2 種類であることが一般的となっています。

ほぼ不可欠と言えるタスクは、特定のスタイルを一般的なリンクに適用することです (したがって、クリックされていないか、アクセスされたか、アクティブであるかなどとは関係なくリンクを設定します)。リスト 2 に、リンクに適用するスタイルの一例を記載します。

リスト 2. CSS でリンクを装飾する例


a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
a:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

このマークアップは、一般的なリンクのフォント色を黒に設定し、デフォルトの下線を取り消し、フォントを太字に設定し、背景色をオフホワイトに設定します。マウスが重なった状態のリンクには、再び下線を適用し、新しい背景色を明るい黄色に設定します。このマークアップをブラウザーでテストすると、リンクにマウスを重ねるとその背景が明るいグレーから黄色に代わり、マウスが離れると、黄色から明るいグレーに戻ることがわかるはずです。さらに、前述したテキストの影を a:hover に適用するのも一考です。

CSS3 を概念化する際に、開発者たちはある特定の <a> タグに関連するスタイルは一切除外し、一般的なスタイルに力を入れました。したがって、この記事では transform:rotate といったような技は使わずに (これは例えば、ナビゲーションでの <li> タグに使用することができます)、これまで説明してきた要素を組み合わせて実現できる例を紹介します (リスト 3 を参照)。

リスト 3. CSS3 プロパティーで強化した CSS ナビゲーションの例


a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
li {
  text-align: center;
  list-style-type: none;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color:#EEEEEE;
  border: 1px solid #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  transform:rotate(-20deg);
}
li:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

上に戻る

表を使用しないカラムの作成

概して言うと、表はレイアウト手法としては好ましくありません。表を使用して Web ページをレイアウトすると、データの論理的な流れに手を加えることになるためです。記事の冒頭で、CSS は (X)HTML の上に重ねられる層であり、(X)HTML は実際のところ、デザインとは切り離されて表されるデータであると説明したことを思い出してください。そこで、最善の設計方法となるのが、デザインやスタイルなどを一切使うことなく、データを (X)HTML として表現することです。そして、デザインやスタイルなどが含まれていない (X)HTML になったと思ったら、CSS スタイル・シートを適用します。特定のデザインを有効にするために、どうしても (X)HTML を編集しなければならない場合には、CSS を無効にし、(X)HTML がデザインやスタイルなどが含まれていない状態を維持していることを確認してください。

このことが重要なのは、次の 2 つの理由からです。1 つ目の理由は、そうすることで視覚的に特別な要求があるユーザーに対するアクセシビリティーを提供できるからです (これらのユーザーは、独自のデフォルト・スタイル・シートの設定やソフトウェアを使っていることがよくあるはずだからです)。そして 2 つ目の理由は、そうすることで Web サイトがマシンで読み取れるようになるからです。検索エンジンやその他のソフトウェアが Web サイトに索引を付けるには、Web サイトを読み取って、そのコードを追えるということが必須となります。

ここで疑問となるのは、表を使わずに、どうやってカラムを作成するかですが、その答えは単純です。それには、2 つの <div> ボックスを使用します (リスト 4 を参照)。

リスト 4. (X)HTML による div カラムの例


<div id="left" class="equal-column">
</div>
<div id="right" class="equal-column">
</div>
<div class="something-below">
</div>

このようにカラムを作成すれば、後は CSS 内にさまざまなデザイン・プロパティーを設定することができます。リスト 5 は、その一例です。

リスト 5. div カラムを作成した場合の CSS の例


div.equal-column {
  width: 45%;
  height:100%:
}
div#left {
 float: left;
}
div#right {
 float: right;
}
div.something-below {
 width: 100%;
 clear: both;
}

上記のマークアップは、両方のカラムの幅を 45% に設定し、左側のカラムを左に寄せて、右側のカラムを右に寄せます。そして、クラスが something-below となっているもう 1 つの <div> は、2 つのカラムの下に、画面幅で表示します。これは、素早く簡単に画面に 2 つのカラムを表示するのに便利な手法です。

CSS3 にはさらにもう 1 つ、テキスト・カラムという巧妙な概念があります。別の言葉に置き換えると、これは、column-count プロパティーに数値が設定されている場合には、その数のカラムに自動的に分割されるパラグラフのことです。

div#textual-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

上記のマークアップは、textual-columns という ID の <div> が 2 つのテキスト・カラムに分割されるように設定しています。ただし、分割後の各カラムの高さは均一にされます。新聞や雑誌に見られるようなカラムと比べると、これは多少予想外に映るかもれません。

上に戻る

フォントのタイポグラフィー

CSS2.1 で定義されている汎用フォント・ファミリーは、serif、sans-serif、および monospace の 3 つです。これらのフォントは、どのシステムでも機能します。すべてのシステムで必ずしも同じように表示されるわけではありませんが、少なくとも、最優先のフォントが失敗した場合のバックアップ・フォントとして使用するべきです。例えば、body の CSS 宣言では、以下のようにしてバックアップ・フォントを使用することができます。

body {
  font-family: Univers, sans-serif;
}

上記では、まず Univers フォントを選択し、Univers がユーザーのコンピューターで使用できない場合のデフォルトとして sans-serif を選択しています。

CSS3 はこの機能を少し改善するために、@font-face 要素を導入しています。これは、Web サイト専用のフォントを Web サイト全体で使用できるようにするための極めて複雑なメカニズムです。この要素は、手の込んだフォントを使用する場合には極めて重宝しますが、これは高度なトピックなので、タイポグラフィーの専門家に任せておくのが無難です。その一方、こうしたフォントの書体開発は、Google Font API や Typekit などのサード・パーティーのプロバイダーによって、フォントのダウンロードという形に単純化されています。

フォントのダウンロード

Google Font API と Typekit では、さまざまなシステムで趣向を凝らしたフォントを使えるようにダウンロードできる独自のシステムを提供しています。フォントのダウンロードは、(X)HTML、JavaScript、そして CSS3 が連動して機能するため、おそらく最近のブラウザーでないと機能しません。

ここでは、無料で簡単にアクセスできる Google Font API に焦点を当てます。これを機能させるためにはまず、(X)HTML の head 領域に、Google Font Directory に含まれる Architects Daughter フォントを使用することを指定する行を追加します。

<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' 
        rel='stylesheet' type='text/css'>

あとは、CSS を使用したスタイルを適用するだけです。

body {
  font-family: 'Architects Daughter', serif;
}

これで、サイトは Google Font の Architects Daughter フォントを使用するようになります。ただし私からの忠告として、あまりにも凝ったフォントをサイト全体で使用することは避けてください。必ずサイトが簡潔かつ明瞭でまとまりのある状態に保たれるようにしてください。

上に戻る

まとめ

CSS2.1 と CSS3 は、どちらもそれだけで一冊の本が書けるほどの壮大なトピックです。この記事では質の高いスタイル・シートを作成する方法を表面的にかじっただけにすぎませんが、World Wide Web で公開されている CSS に関する参考文献を調べる際には、この記事で学んだ知識が生きてくるはずです。

(X)HTML と CSS をそれぞれ独立させて、互いが干渉しないように使用することにより、標準との互換性、アクセシビリティー、そして検索エンジンの最適化を実現する可能性を最大限にすることができます。CSS は XHTML や HTMLと同じく優れた技術ですが、標準化された方法で使用しなければなりません。これらの標準は、Web デザインの基本的な材料にはなりうるものの、デザインそのものではありません。優れたデザインは、経験を積むことによって完成されていくものです。

参考文献

学ぶために

CSS3 の新機能について詳しく学んでください。
マルチカラム・レイアウト・モジュールについて調べてください。
「Retrofit your Web pages for wireless compatibility」(developerWorks 著、2005年11月) は、XHTML と CSS を併用してモバイル・ブラウジングの互換性を実現する方法を説明している優れた記事です。
「Create modern Web sites using HTML5 and CSS3」(developerWorks、2010年3月) では、今どきのデザインに HTML5 と CSS3 を適用する方法を説明しています。この Joe の記事で特に興味深いのは、CSS3 のセクションです。このセクションでは、この記事で説明した基本よりも一段と高度な話題として、新しい CSS3 セレクターについて非常に詳しく説明しています。
「HTML5 と CSS3 でクロスブラウザーの機能を実現する」(developerWorks、2011年2月) では、HTML5 のデザインを細かく説明しています。HTML5 は、HTML5 「言語」に JavaScript および CSS を加えた一種のパッケージであり、デザインに重点を置いているわけではありません。この点は、データが主体の Web アプリケーションを構築するときに問題になることがあります。
Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
developerWorks の Technical events and webcasts で最新情報を入手してください。
developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
Twitter で developerWorks をフォローしてください。