子要素の大きさをCSSで指定しなくてもOKなセンタリング

このやり方はCSS Trickに載っていたものですが、日本語ではみかけなかったのでご紹介します。

<div class="box">
   <div class="centered">
       <p>テキストテキストテキスト。テキストテキストテキスト</p>
   </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.box { 
  text-align: center;
  height:300px;
  min-width:410px;
}
 
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
}

<div class="box">
<img src="samplejpg" alt="" width="300" height="240" class="centered">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.box { 
  text-align: center;
  background-color:#FFF;
  height:400px;
  min-width:410px;
}
 
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
  background-color:#F00;
}
 
.centered {
  display: inline-block;
  vertical-align:middle;
}

1. Webで出来ることが広がる

HTMLとCSSだけではどうしても限界がありますが、JavaScriptを使うことで様々な機能や動きを実装することができます。またtwitterやFacebook、Instagramといった多くのWebサービスはAPIを公開していますので、JavaScriptからそれらを利用することが出来ます。身近な例で言えばJavaScriptとtwitterのAPIを使ってtwitterのタイムラインを表示したり、FacebookのAPIを用いてイイねボタンを表示したりといったことが可能です。

あなたがJavaScriptを習得すればHTMLとCSSだけでは出来なかった「機能」を実装することができるようになります。Webで出来る事、可能性が広がるのです。

2. プログラムの勉強になる

JavaScriptはコンパイルの必要が無く、Webブラウザさえあれば実行できるというメリットがあります。このため他の多くのプログラム言語のように開発環境を構築する必要が無く、すぐにプログラムを書き始めることができます。

JavaScriptはその導入の敷居が低いことからもプログラムのイロハを学ぶのに向いています。JavaScriptではif文、for文などどのプログラムでも出てくる基本的な構文を学ぶ事が出来ます。また関数やオブジェクトといったものも学ぶ事が出来ます。

JavaScriptはプロトタイプベースのオブジェクト指向(風)言語でありながら、関数型言語としての特徴も備えているので、初学者や他の言語を学んで来た人にとっては少々分かりづらい部分もありますが、それを補っても余りある程魅力的な言語です。

• 私がJavaScriptを初心者用の言語として選んだわけ – 404 Blog Not Found

3. jQueryプラグインをカスタマイズできる

jQueryのプラグインは非常に手軽に導入できますが、自分でカスタマイズしようとすると中身を読みつつコードを弄らなければなりません。そういった場面でこれまで諦めてきた人も、JavaScriptを勉強することでプラグインのカスタマイズも出来るようになるでしょう。

4. プラグインを自分でも書けるようになる

JavaScriptをしっかり勉強すればjQueryのプラグインを自分で書くことが出来るようになります。最初はちょっとした機能でも良いですから自分で書いてみることが大切です。どんどん実験しましょう。

5. FirefoxやChromeの拡張を作れる

FirefoxやChromeの拡張機能はその大部分がJavaScriptによって実装されています。JavaScriptが出来るようになれば自分で拡張機能も作れるようになります。

• mozila 拡張機能開発入門
• Google Chrome Extensions[英語]
• Chrome Extensions API リファレンス

6. サーバーサイドもNode.jsで開発できる

これまでJavaScriptはクライアントサイドの言語としてブラウザ上でしか動かすことができませんでしたが、Node.jsというサーバーサイドでJavaScriptを動かす技術が出てきたことで、その利用範囲がサーバー側にも広がりました。Node.jsは導入事例も増えてきているので今後も要注目です。

• Node.jsでサーバサイドJavaScript開発入門
• node.jsに関する基礎や開発・チュートリアルのまとめ

7. Android,iPhoneアプリも開発も出来る

JavaScriptはWebサイトを作成するだけではありません。AndroidやiOSのネイティブアプリだって開発可能です。Titanium Mobileを使えばJavaScriptを使ってAndroidやiPhoneアプリを開発することが出来ます。実際に数多くのアプリがTitanium Mobileによって産み出されています。

8. Windows8のアプリも開発出来る

今年(2012年)発売が予定されているWindows8ではネイティブアプリの開発にHTML+CSS+JavaScriptを使うことができます。Windows8用のアプリを販売する「Windows Store」にHTML+JavaScriptで作ったアプリを登録し、販売することもできます。今JavaScriptを学ばない手はありません。

9. 将来性が担保されている

AdobeのFlashはiOSデバイスとHTML5の普及により今後の戦略の変更を余儀なくされました。つまりAdobeのさじ加減ひとつでFlashやActionScriptの未来も大きく変わる可能性があるということです。またGoogleはJavaScriptの欠点を補うべくDartという新しいプログラミング言語を提唱してますが、今後どうなるかは未知数です。

一方JavaScriptはECMAという団体が標準仕様を策定しておりWeb標準の技術の一つとして確固たる地位を築いています。今後もHTML5とともにWebの中核技術として使われ続けるのは疑いようがありません。JavaScriptはActionScriptやDartと異なり、常にオープンな場で仕様策定が進められ、そしてWeb標準の一翼を担うものとして将来性が担保されている言語と言えるでしょう。

10.Webアプリの時代が来る

現在のスマートフォンではネイティブアプリと呼ばれるアプリケーションがほとんどです。しかし、こういった状況はいずれ変化しHTML5+CSS3+JavaScriptを用いたWebアプリケーションが主流の時代になるだろうと予見されています。

JavaScriptはLL(Lightweight Language)に属する言語でありながら、その実行速度は過去数年間で飛躍的に高まりました。良い意味でブラウザベンダー各社が競い合っているので、今後も処理速度の向上が見込まれます。処理能力が上がるということはネイティブアプリと遜色無いレベルのWebアプリが出来るということにも繋がります。

またAndroid, iOS, WindowsといったOSの異なる各デバイスに対して、同一の言語(HTML+CSS+JS)で開発が出来るというのは唯一の方法です。

一方ではAndroid, iOS, Windows Phoneといったデバイス間の実装の差異や通信速度など越えなければならない壁がいくつもあります。しかし、これから数年かけてじわじわとWebアプリが拡大していく事は間違いありません。

• アプリ帝国の衰亡

結論

長々と書いてきましたが言いたい事は１つ「JavaScriptを勉強しておけば可能性が広がるよ！楽しいよ！」って事です。これから先もJavaScriptはフロントエンドにおける重要な技術の1つであり続けるでしょう。さらにアプリ開発やサーバーサイド、そしてWebアプリと現在進行形でその利用範囲は拡大し続けています。初心者の方、デザイナーの方、「今年こそJavaScriptを」と思っている方、あなたもいまから本気でJavaScriptを学んでみてはいかがでしょうか？

ちりも積もればパフォーマンスに影響?

CSSのセレクタは右側から解釈されるというのは既にご存知の方も多いかと思います。(知らなかった方はこちらの記事をどうぞ→ CSSセレクタ高速化の話し)。

Profiling CSS for fun and profit. Optimization notesではさらにつっこんで、どのセレクタが遅くなるのかという事をOperaとWebkitのプロファイリングによる実験結果を踏まえて詳しく書かれています。この記事の要点だけを書いていくと…

• トータルのセレクタ数を減らす(.ie .foo .bar{}なども使わない方が良い)
• ユニバーサルセレクタ(*)は避けるべき。(ユニバーサルセレクタは最もコストの高いセレクタ)
• ページズームは一部のブラウザ(Opera)のcssパフォーマンスに影響を与える。
• ウィンドウサイズの変更はOperaは影響ないが、Chromeはパフォーマンスに影響が出る。
• ページのリロードはCSSのパフォーマンスに悪影響を与える(Opera)
• border-radiusとtransformは最新版のwebkit, operaでも最もコスト(レンダリングの時間)がかかるプロパティである。
• セレクタのマッチングはWebkitは非常に優秀(Operaよりも)

以前書いた「HTML初心者が知っておくべきリセットCSS と3つのポイント」でもユニバーサルセレクタについてそのデメリットを言及しましたが、この記事の実験結果からもユニバーサルセレクタは非常にコストが高いプロパティなのが分かります。

またCSS3のプロパティでコストが高いのがtransformプロパティです。たった1度だけ傾けるだけでも非常にコストのかかるプロパティのようです。なんとなくtransformはコストが高いってのは分かる気がしますね。一方意外だったのがborder-radiusプロパティ。border-radiusはtext-shadowやグラデーションを指定するlinear-gradientなどと比べてもコストの高いプロパティのようです。

ただし、border-radiusがコストが高いプロパティと言っても1つ１つは微々たる時間しかかかりません。このテストページのように400個ものボタンにborder-radiusを適用させると顕著に現れるレベルですので、普通に使う分にはあまり気にする必要は無いでしょう。ただし、CPUが非力なスマートフォン向けサイトだったり、ブラウザ上で動かすWebアプリやゲームなど、対象とするデバイスと作成するもの次第ではこれらの積み重ねが全体のパフォーマンスに影響してくると思われます。

この記事ではOperaに搭載されたStyle profilerを使ってCSSのコストを計測しています。一方webkitではOperaと同じ機能はまだ無いのでJavaScriptとTimlineなどを組み合わせて実験しています。…が、ここで気になる記述を発見。

Opera folks came out with an experimental “style profiler” (followed by WebKit’s ticket+patch shortly after).

ん？Webkitも直ぐに同じような機能が来るの？ということで調べてみたところ、なんとCSS  ProfilerがWebkitにもキテター！

とは言ってもまだ正式にリリースされている訳ではなく、WebkitのNightly Build(WebKit r104394)で試す事ができます。(Nighty Build版のインストールは自己責任で)

Webkitに搭載されたCSSプロファイラを試してみる

CSSプロファイラーを使う場合にはWebkitのNightly Build版を立ち上げて上部のメニューバーから「開発 > Webインスペクタを表示」をクリックします。そしてProfileタブをクリックします。

「Select profiling type」という画面でJavaScriptか、CSSを選ぶ事ができます。CSSのプロファイルを見たいので「Collect CSS Selector Profile」を選びます。

その下にある「Startボタン」若しくは左下の「●ボタン」を押します。するとCSSのProfilingがスタートします。この状態でページをリロードすると、CSSの各セレクタのマッチング数とそれに要する時間が記録され、もう同じボタンを押すとストップし、Profileファイルが左ペインに表示されます。

「CSS SELECTOR PROFILES」に表示されたアイコンをクリックすると一覧で表示されます。これで、どのセレクタがボトルネックになっているのかが一目瞭然で分かります。

もちろんWebkitなのでChromeにも搭載予定です。さらにさらにソースコードマッピングとかもできちゃうようになるみたいですよ！ますますChromeの開発者ツールが充実していきそうで非常に楽しみですね。

そもそもアウトラインって何？

“アウトライン”の言葉には「人や物の輪郭(線)・外形」又は「骨子・主要な部分」という意味があります。前者の意味では「Illustratorの文字のアウトライン化」と言えばデザイナーさんはしっくりくるでしょうか。後者は「企画書の骨子」というように、物事や文章の大筋という意味で使われます。「文章のアウトライン」と言えば「文章全体の骨子、又は構造・区切り」を指していることになります。

Web制作・HTMLコーディングにおける「アウトライン」も本質的な意味は一緒です。「HTMLのアウトライン」と言えばでHTMLでマークアップした「文章の構造」という意味で使われています。見出しを適切に用いてマークアップをしていれば必然的に見出しを抜き出したものが文章全体の構造を表している事になります。

(ただしHTML5は見出しだけではなくセクショニングコンテンツがアウトライン生成に深く関わっています。現在の仕様ではnavやasideは見出しを含まなくても良いとされています。このためHTML5では「見出しを抜き出したもの≠アウトライン」であって、必ずしもアウトラインを表している訳ではありません。 )

アウトラインをインデントで表す

Webに限らず、文章は『入れ子構造』になっている場合がほとんどです。小説で言えば「第一章」の中に「第一節」「第二節」があります。大きな章という区切りの中に「節」という小さな単位のまとまりが入っているのです。文章はそれぞれネストされた構造になっています。

入れ子構造を表す時はインデントを付けて表します。インデントを付ける事でどの部分に属しているのかが一目で分かるようになるのです。

文章や企画書を作成する際に用いるMS OfficeのWordやPowerPointといった身近なアプリケーションにもアウトライン機能が搭載されています。左図はMS OfficeのPowerPointをアウトライン表示にした時のものです。

HTML4とHTML5のアウトラインの生成の違いを理解する

アウトラインはHTML5から導入されたものだと思っている方もいるかもしれませんが、実はHTML4.01やXHTML1.0でもアウトラインの考え方はありました。しかしHTML5以前では階層的に文書構造を表す仕組みがありませんでした。このためHTML4やXHTML1.0では見出しをマークアップするのにh1要素から順番に使っていき、そのレベルによって文書のアウトラインを示していました。これを「暗黙的なアウトライン」という言い方をします。

1
2
3
4
5
6
7
8

<body>
<h1>大見出し1-1</h1>
<h2>中見出し2-1</h2>
<h2>中見出し2-2</h2>
<h2>中見出し2-3</h2>
<h3>小見出し3-1</h3>
<h2>中見出し2-4</h2>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
<h1>大見出し1-1</h1>
     <section>
     <h1>中見出し2-1</h1>
     </section>
     <section>
     <h1>中見出し2-2</h1>
     </section>
     <section>
     <h1>中見出し2-3</h1>
          <section>
          <h1>小見出し3-1</h1>
          </section>
     </section>
     <section>
     <h1>中見出し2-4</h1>
     </section>
</body>

<article>
<h4>HTML5について</h4>
<p>HTML5は最終草案の段階です</p>
    <section>
    <h2>HTML5は使えるのか</h2>
    <p>現在でも使う事ができます。HTML5は...略</p>
        <section>
        <h2>IE8以下の対応策</h2>
        <p>IE6,7,8もサポートする場合はJavaScriptを使って...略</p>
        </section>
        <section>
        <h6>どのブラウザが対応しているのか</h6>
        <p>Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。</p>
        </section>
    </section>
    <section>
    <h1>HTML5の新しい要素</h1>
    <p>section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略</p>
    </section>
</article>

<article>
<h1>HTML5について</h1>
<p>HTML5は最終草案の段階です</p>
<section>
<h2>HTML5は使えるのか</h2>
<p>現在でも使う事ができます。HTML5は...略</p>
<section>
<h3>どのブラウザが対応しているのか</h3>
<p>Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。</p>
</section>
<section>
<h3>IE8以下の対応策</h2>
<p>IE6,7,8もサポートする場合はJavaScriptを使って...略</p>
</section>
</section>
<section>
<h2>HTML5の新しい要素</h2>
<p>section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略</p>
</section>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<article>
<h1>HTML5について</h1>
<p>HTML5は最終草案の段階です...略</p>
 
<section>
<h1>HTML5は使えるのか</h1>
<p>現在でも使う事ができます。HTML5は...略</p>
  <section>
  <h1>ブラウザの対応状況</h1>
  <p>Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。</p>
  </section>
  <section>
  <h1>IE8以下の対応策</h1>
  <p>IE6,7,8もサポートする場合はJavaScriptを使って...略</p>
  </section>
</section>
<section>
<h1>HTML5の新しい要素</h1>
<p>section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略</p>
</section>
</article>

Untitled Sectionsはどうすれば良いのか？

nav, asideといったセクショニングコンテンツは必ずしも見出しを付ける必要はありません。しかしその場合、アウトラインを確認すると「Untitled Sections」として表示されてしまいます。

HTML5 DoctorのDocument Outlinesという記事ではnavやasideもアクセシビリティ上見出しを含めた方が良いとしています。

HTML5でサイトを作る際ありがちなミス ”Untitled Document”

HTML5でサイトを作成する場合、ありがちなミスが下記のような書き方です。

1
2
3
4
5
6

<body>
<article>
<h1>Blog記事タイトル</h1>
<p>コンテンツ本文</p>
</article>
</body>

一見するとどこも間違いは無いように見えますが、このアウトラインを確認すると下記のようになります

これはセクショニング・ルートのbodyに対する見出しが付いていないため、Untitled Documentsと表示されてしまったのです。セクショニング・ルートであるbodyもアウトラインを生成します。この事を理解していないとそのHTML全体の見出しである部分が「Untitled Documents」となってしまいます。

セマンティックWebは誰のために？

アウトラインって結局は文章構造を正しくマークアップするためのものです。ぶっちゃけ今現在HTML5でサイトを作って、アウトラインを正しくマークアップした所で直接的なメリットや恩恵というのはあまり無いと思います。じゃあ何故アウトラインを意識する必要があるのでしょうか？正しい文章構造じゃないと気持ち悪いから？W3Cの仕様書に書いてあるから？みなさんは何故だと思いますか？

近い将来で言えば、HTML5のアウトラインやMicrodataなどを利用した新しい検索技術やサービス、アプリケーションなどが出てくるでしょう。実際にGoogle、Microsoft、Yahoo!の検索大手3社は今年、Microdataを用いてより構造化されたマークアップ実現のためのスキーマ（schema.org）を共同で開発しています。また今では考えつかないような画期的なサービスも出てくるかもしれません。そういった新しいサービスや技術が生まれる土台となるのがHTML5なのだと思います。

遠い未来に思いを馳せるとー。

きっと、数百年後の未来の人たちは僕らがインターネット上に残した大量のつぶやきや、Blogや、論文などを機械的にコンピュータで処理をし、分析をしているでしょう。その時にきっと未来の人達はこのように言うはずです。

“うわ、このサイトHTML5じゃなくてHTML4で書いてある。HTML5でちゃんと構造化して書いてくれよ〜メンドクサイなぁ…。”

サンプル1 CSS2を使った見出し

まずはCSS2までを使ったオーソドックスなスタイリングです。

.headding01 {
	margin:0 0 30px 0;
	padding:12px 10px;
	border-left:5px solid #1871B8;
	background: #1D8ADE;
	color:#FFF;
	}

非常にシンプルで良く見るスタイルです。CSS2の表現力はこの程度が限界とも言えます。ではCSS3を使うとどういった表現が可能になるのでしょうか？順番に見ていきましょう。

サンプル2 box-shadowで1pxの線を表現した見出し

まずは、以下のサンプルを見て下さい。

.headding02 {
	margin:0 0 30px 0;
	padding:12px 10px;
	border:1px solid #1871B8;
	background: #1D8ADE;
	color:#FFF;
	box-shadow:inset 1px 1px 0 rgba(255,255,255,0.4);
	}

ボックスの左と、上部に1pxの白い線が入っているのが分かると思います。 これまでこのようなデザインを実現する場合には1pxの線の画像を用意し背景画像として適用するか、見出しタグの外側をさらにdivで囲いborderプロパティで実現するなど手間がかかる方法しかありませんでした。

しかし、box-shadowプロパティを使えば画像やdivタグで２重に囲わずとも簡単に実現することができます。ポイントはinsetでboxの内側に影を適用し、x軸とy軸に1pxずらすことです。ぼかしは0に設定します。

box-shadowプロパティは単にボックスに対しドロップシャドウを適用するものと思っている方も多いかと思いますが、使い方次第でこのサンプルのようにボックスの内側に1pxの線を表現することもできます。

サンプル3 CSS3の角丸を使った見出し

border-radiusプロパティを使った角丸の表現です。
border-radiusプロパティはIE9でも対応したので、今後ますます使われる頻度が高くなりそうですね。

.headding03 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1D8ADE;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

サンプル4 角丸+box-shadowを使った見出し

.headding04 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1D8ADE;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	text-shadow:1px 1px 2px #333;
	box-shadow:inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8);
}

今度はborder-radiusプロパティにbox-shadowプロパティを組み合わせてエンボス風なスタイルにしてみました。

ポイントはbox-shadowのinsetで光と影の部分を指定しています。box-shadowプロパティは複数指定することもできます。その場合はカンマ(,)で区切って続けて記述すればOKです。

サンプル5 box-shadowを使ったページカールエフェクト

これも最近多く見かけるようになった紙がめくれたような表現手法です。英語圏では「page curl effect」や「paper curl effect」なんて呼ばれているようです。

.headding05 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ;
	position:relative;
	}
 
.headding05:before,
.headding05:after{
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 40%;
	height: 20px;
	left: 4px;
	bottom:7px;
	-webkit-box-shadow: 0 8px 15px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	background-color: #F00;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.headding05:after{
	  -webkit-transform: rotate(3deg);
	  -moz-transform: rotate(3deg);
	  -o-transform: rotate(3deg);
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;
}

ポイントはbefore,afterの疑似要素を使い影の部分のボックスを生成し、それをtransformプロパティで回転させています。疑似要素で生成したボックスは後ろになるようにz-indexプロパティを用い重なり順序を指定する必要があります。

気になるブラウザの対応状況ですが、Chrome, Firefox, Safariなどの最新ブラウザでは問題なく表示されます。IEはIE9以上でないとちゃんと表示出来ません。

サンプル6 角丸とグラデーションを用いた見出し

グラデーションと角丸を用いたサンプルです。文字部分はtext-shadowプロパティも使っています。

.headding06 {
	background: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* W3C */
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	text-shadow:1px 1px 2px #333;
	-webkit-box-shadow:inset 0 0 50px rgba(0,0,0, 0.1);
	}

CSS3のグラデーションはIE9以下では対応していません。(IE10から対応予定)IE9以下でもグラデーションを使いたい場合はIEの独自機能であるfilterを使うか、CSS3 PIEなどを使って対応する必要があります。(上のサンプルではfilterを用いています)

サンプル7 :before,:after疑似要素を使ったCSSリボン

CSS3で表現するリボンのような表現です。
afterとbefore疑似要素を使ってボックスを生成しています。

.headding07 {
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	margin:0 -36px 30px -36px;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
	position:relative;
	}
 
.headding07:before,
.headding07:after {
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	right: -14px;
	bottom: -15px;
	background: transparent;
	border-color: transparent  transparent transparent #666;
	border-style:solid;
	border-width:15px;
	}
.headding07:after {
	left: -14px;
	bottom: -15px;
	right:auto;
	border-color: transparent #666 transparent transparent;
	}

このスタイルの最大のポイントは三角形の作り方です。borderプロパティを上手く用いて三角形を作っています。

サンプル8 CSS3で吹き出しスタイル

吹き出しのようなサンプルです。after疑似要素を用い先ほどと同じborderを使って三角形を作ります。それを絶対配置で配置しています。before, after疑似要素が使えるIE8以上なら正しく表示できます。

.headding08 {
	background: #1d8ade; 
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	position:relative;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-left:1px solid #036;
	border-top:1px solid #036;
	box-shadow:inset 1px 1px 4px #036;
	}
 
.headding08:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	left: 14px;
	bottom: -27px;
	background: transparent;
	border-color: #1d8ade transparent transparent transparent ;
	border-style:solid;
	border-width:15px;
	}

サンプル9 CSS3で吹き出しスタイルその2

先ほどの吹き出しスタイルの応用編です。枠線が付いている点に注目してください。枠線の三角形部分は2つの異なる大きさの三角形を重ね合わせる事で枠線を表現しています。

.headding09 {
	background: #1d8ade; 
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	position:relative;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border:4px solid #036;
	}
 
.headding09:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	left: 14px;
	bottom: -27px;
	background: transparent;
	border-color: #1d8ade transparent transparent  transparent  ;
	border-style:solid;
	border-width:15px;
	}
.headding09:after {
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	left: 5px;
	bottom: -43px;
	background: transparent;
	border-color:#036 transparent transparent  transparent  ;
	border-style:solid;
	border-width:24px;
	}

CSS3を使う際には割切る事も大切

いかがだったでしょうか？CSS3の表現力、可能性を少しでも感じて頂けたら嬉しく思います。コピペで是非試してみて下さい。今回は「見出し」に対して適用していましたが、もちろん他のボックスに対しても適用することができます。

IE9でもCSS3のグラデーションや一部プロパティはまだ使えないものが多くあります。だからといってCSS3を使わない(使えない)理由にはなりませんし、プログレッシブエンハンスメントの考えに沿って古いブラウザへの対応は割切って考える事も必要だと思います。

Let’s enjoy CSS3!

HTML5全般

HTML5.JP

とりあえず最初に押さえておくべきサイト。各仕様書の日本語訳やタグリファレンスもある。

HTML5についてのおさらい – W3G

コード実例+非常に分かりやすい説明でGood。HTMLの基本的な記述方法に始まり、セクションやアウトラインの記述も詳しく書いてある。アウトラインについて曖昧な人はこのサイトを一通り読むと良いかも。

続HTML5についてのおさらい – W3G

上記サイト「HTML5についてのおさらい」の続き。header, footerやその他の要素の使い方について一通り解説してある。オススメ。

ここが違う！サンプルで見るHTML5

codezineでの羽田野さんの連載。CodeZineという開発者向けサイトのため、内容的にはAPIから各要素までかなり幅広く、かつ丁寧に解説してある。初心者にはあまりオススメ出来ない。全て閲覧するには会員登録(無料)が必要。

HTML5の登場で、XHTMLは結局どうなったの？ – ＠IT

HTML5でXHTMLはどうなっちゃったのか？という解説。HTML5とXHTML5の関係を理解するために読んでおくといいかも。

HTML5 における HTML4 からの変更点 (2011年4月5日付 W3C 草案)

W3Cで公開されているHTML5 differences from HTML4の日本語訳。ミツエーリンクスが公開している。

HTML5マークアップ各論

HTML5のarticleとsectionの違いを書いてみた : Web Design KOJIKA17

article要素とsection要素の違いについて。策定が中止されたXHTML2.0の仕様にも触れている。サンプルコードも載っているので分かりやすい。

HTML5でつまずきやすいasideとsectionの使い方 | KAYAC DESIGNER’S BLOG

KAYACさんのブログ。asideとsectionの違いについて解説してある。asideがサイドバーに限った例になってしまっているのが惜しいところ。

押さえておきたいHTML5におけるタグまわりの変更点｜Webpark

HTML5で変更された各要素についての解説。target属性が非推奨で無くなったことや<s>要素の意味などが変わった事を知らない人も多いはず。

HTML5 の dl 要素 – terkel.j

HTML5で改めて定義し直したdl dt dd各要素について。会話文はHTML5ではもうdl要素でマークアップするべきでない。

form, inputまわりの新機能・変更点

HTML5で既存のinputタイプに加わった6つの変更点 – ＠IT

＠白石俊平さんの連載記事。inputタイプのHTML5での変更点について詳細に解説してある。

HTML5でinput要素に追加された新しいタイプ13連発 – ＠IT

前記事の続き。input要素に新たに追加されたタイプの詳細。

サイトのフォームを多機能にするHTML5の新要素5選 – ＠IT

formに関連する新要素の説明。output要素、datalist要素など

HTML5で仕様になった入力値チェック＋便利な3Tips – ＠IT

autofocus属性やform属性などHTML5で「仕様」として取り入れられたフォームのバリデーションについて。システム周りを開発する人は必見。

その他のHTML5関連

HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ – はてなブックマークニュース

はてなブックマークニュースのHTML5に関するまとめ記事。HTML5でどんなことが出来るのか理解するには良いかも。

どこまでがHTML5なの？ － Publickey

W3CとWHATWG、HTML5とそれに関連仕様(API)ついて。HTML5の関連仕様って沢山あるんだなというのがよく分かる。

仕様書から読み解くdocument.write

こーゆー時はまずHTML5の仕様書です。早速W3Cのサイトを見に行くと丁度2011年4月6日にHTML5関連のドキュメントがアップデートされていました。

HTMLの仕様書の中の3.5 Dynamic markup insertionにdocument.writeの記述があります。

そこを見ると「Warning!」と書いてあって赤字で以下のような記載がありました。

This method has very idiosyncratic behavior. In some cases, this method can affect the state of theHTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document. In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

要約(意訳)すると「パースして生成されるDOMに影響与えてしまったり、ネットワークの遅延にメソッドの動作が影響されデバッグが困難になったりといった問題があるのでdiscouraged(推奨されない)」と書いてあります。しかもstronglyとまで。W3Cとしてもdocument.writeはかなり厄介者扱いですね。その証拠に上記の一番最初にはThis method has very idiosyncratic behavior.と書いてありますから、W3Cのワーキンググループでもdocument.writeは悩みの種となったのでしょう。

仕様書にstrongly discouragedと書いてありますので、やはりHTML5でdocument.writeを使うのは避けた方が良さそうです。

ふと「以前から仕様書に推奨しないと書いてあったっけ？」と思い、これまでの仕様書も洗ってみました。その結果、はっきりとdocument.writeについてstrongry discouragedと書いてあるのは2010年10月19日の仕様書からでした。

document.writeの代替え方法はないの？

HTML5でdocument.writeは使わない方が良いのであれば、問題はその代替の方法です。これについてはPolyglot Markup: HTML-Compatible XHTML Documentsに記載がありました。(ちなみにこのPolyglot MarkupのドキュメントはHTML5をXHTMLにも適合させて書くためのHow toが書かれています。まだ読んでいない方はご一読することをおすすめします)

9. Script and Styleに以下のような記載があります。

Instead, use the innerHTML property for both HTML and XHTML.

「(document.writeの)代わりにinnnerHTMLがHTMLとXHTML両方で使えるよ〜(意訳)」とありますので、innerHTMLを使えば良いということみたいですね。

HTML形式なら使ってもOKなのか？

しかし「both HTML and XHTML」って記述が気になりますね。ということで、その部分をもう少し見てみますと次のような記載がありました。

Although document.write() and document.writeln() are valid in an HTML document, neither function may be used in XHTML. Therefore, neither is used in polyglot markup.

この文章から読み取れるのは「document.writeはHTMLではvalidだが、XHTMLではinvalid」ということですね。そしてpolyglot markup(HTML5をXHTML形式にも適合させたマークアップ)を行うのであればdocument.writeは使えないということです。逆に言えばHTML5をXHTMLに対応させない場合は「まぁ使ってもOKだよ」ってスタンスなんでしょうかね？このへんは議論の余地がありそうです。

仕様書から読み解くW3Cの本音

さらのその下に次のような一文が

XML parsers parse the string as XML in XHTML. HTML parsers parse the string as HTML in HTML. Because of the difference in parsing, if you send the parser content that does not follow the rules for polyglot markup the results will differ for a DOM create with an XML parser and one created with an HTML parser.

(意訳)「XHTMLはXMLパーサーがXMLとして処理を行い、HTMLはHTMLパーサーがHTMLとして処理をする。これらのパースの違いによりpolyglot markupのルールに沿っていないコンテンツはXMLパーサーとHTMLパーサーによって処理されたものでDOMが異なります。(意訳)」

つまり、document.writeを使うとpolyglot markupのルールに沿っていないのでXMLパーサーとHTMLパーサーでDOMが異なってしまうということになります。HTML5でdocument.writeを使うリスクはこのあたりにありそうです。W3CとしてはXHTMLに沿ったHTML5(XMLとしてパースできるHTML5)を広めたいのでしょう。その意味でもdocument.writeは極力仕様をやめてもらいたいというのがW3Cの本音なのではないでしょうか。

まとめ

• HTML5ではdocument.writeは使わない方が良い(2011年4月6日時点の仕様書に依る)
• XHTMLに適合させないHTML5ではdocument.writeを使っても文法的にはvalidである。(しかしXHTMLとしてのメリットは失われる)

HTML5はまだ草案の段階ですので今後仕様が変更される可能性があります。