作成日

1 November 2010

必要条件

この記事に必要な予備知識

サンプル作成のツールとしてDreamweaverを使います(CS5以降が必要。CS5ではアップデータ11.0.3を適用し、「HTML5 パック for Dreamweaver CS5」をインストールする必要があります。

※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。

ユーザーレベル

初級

前回HTML5を用いて作成した文書を、CSSを使って装飾してみましょう。今回は HTML5 での CSSファイルの読み込み方と、CSS3 で新たに加わる border-radius(角丸)プロパティを解説します。

HTML5文書を用意する

前回の記事では、次のようなHTML5文書を作成しました。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>CS5 Web Premium について</title> 6. </head> 7. <body> 8. 9. <section> 10. <hgroup> 11. <h1>CS5 Web Premium</h1> 12. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2> 13. </hgroup> 14. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p> 15. <section> 16. <h3>WEBデザイン</h3> 17. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p> 18. </section> 19. <section> 20. <h3>インタラクティブデザイン</h3> 21. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p> 22. </section> 23. </section> 24. 25. </body> 26. </html>

今回はこのサンプルHTMLを使い、class属性を追加し、それを目印にスタイルを適用します。


class属性値の設定

スタイルを適用するための目印として各section要素にclass属性を設定しておきます。ここでは、次のようにclass属性「section-main」と「section-sub」を追加しました。

7. <body> 8. 9. <section class="section-main"> 10. <hgroup> 11. <h1>CS5 Web Premium</h1> 12. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2> 13. </hgroup> 14. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p> 15. <section class="section-sub"> 16. <h3>WEBデザイン</h3> 17. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p> 18. </section> 19. <section class="section-sub"> 20. <h3>インタラクティブデザイン</h3> 21. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p> 22. </section> 23. </section> 24. 25. </body>

CSSを使う準備

新規に空のCSSファイルを用意し、HTMLに読み込みます。CSS3を利用するからといって、特別なCSSファイルを用意する必要はありません。これまでと同じように新規ファイルを作り、次のようにHTMLに読み込みます。ここでは「styles.css」としてCSSファイルを作成し、HTMLに読み込みました。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>CS5 Web Premium について</title> 6. <link rel="stylesheet" type="text/css" href="styles.css"> 7. </head>

Dreamweaverでは、[ファイル]パネルからCSSファイルをHTMLソースにドラッグ&ドロップすることで、自動的にlink要素を生成することができます。

なお、従来のHTMLの場合、CSSを利用する際には以下のようなmeta要素を併記しますが、HTML5の場合は必要ありません。

<meta http-equiv="content-style-type" content="text/css">

HTML5では上記のmeta要素に相当する内容はデフォルトとなり、省略されることになりました。HTML5ではmeta要素のhttp-equivの値にcontent-style-typeを指定できなくなっているため、この記述を追加してしまうとvalidationエラーとなってしまいます。

新要素をブロック化する

これからsection要素に対してスタイルを適用していきます。しかし、HTML5で加わる新要素にスタイルを適用する場合には準備が必要です。

普通に考えれば、section要素はdisplay:block;として表示されることを期待するでしょう。しかし、現在のWebブラウザの多くはHTML5で加わる新しい要素をほぼ全てinlineとして表示します。そのため、制作者がsection要素の初期スタイルを指定しなくてはなりません。先ほど用意したCSSファイルにあらかじめ次の3行を追加しておきましょう。

1. section{ 2. display:block; 3. }

borderを利用する

section-mainとclass属性を割り当てたsection要素に、幅3pxで緑色(#006600)のborderを適用してみます。これまでのCSSの記述と同様に、次のように表記します(表示をわかりやすくするためpaddingも同時に指定しています)。

1. section{ 2. display:block; 3. } 4. 5. section.section-main{ 6. border:3px solid #006600; 7. padding:20px; 8. }

このように、HTML5で新たに登場する要素であっても、デフォルトのdisplayプロパティの初期値がinlineかblockか定まっていない点に気をつければ、これまでと同じようにスタイルを適用できます。

※Internet Explorer 6~8でもHTML5の新要素にスタイルを適用したい場合には、html5.jsなどを併用することで実現可能です。

新しいborder-radiusプロパティを利用する

CSS2まではborderといえば矩形で角張った表示のみという縛りがありました。しかし、CSS3ではこれが拡張され、角丸の指定が可能になります。先程適用したborderを半径20pxの角丸としてみましょう。border-radiusプロパティに円の半径分の値を指定し、角丸を実現します。

1. section{ 2. display:block; 3. } 4. 5. section.section-main{ 6. border:3px solid #006600; 7. border-radius:20px; 8. padding:20px; 9. }

この1行を追加するだけで角丸が実現できるのです。border-radiusプロパティはInternet Explorer 9でもサポートされます。ただし、現段階のFirefox 3.6 では -moz-border-radiusプロパティを併記する必要があります(後述)。

ライブビューとマルチスクリーンプレビュー

DreamweaverにはSafariなどでも利用されているWebKitエンジンが搭載されており、ライブビューまたはマルチスクリーンプレビューを利用するとWebKitエンジンを使用したレンダリング(描画)に切り替わります。そのため、ライブビューまたはマルチスクリーンプレビュー利用時にはborder-radiusプロパティなどのCSS3の表示も有効になります。ただし、-webkit-border-radiusのように接頭辞をつけて併記する必要があります。

接頭辞付きのborder-radiusを追記してみましょう。Dreamweaverでは、接頭辞付きのプロパティの入力補完についてもサポートされているので、入力もしやすいでしょう。「-」を入力すると接頭辞が候補となり、続けて入力することでプロパティ名が絞られていきます。

-moz-border-radiusを併記しておくと、Firefox 3.6でもborder-radiusが有効になります。

1. section{ 2. display:block; 3. } 4. 5. section.section-main{ 6. border:3px solid #006600; 7. -webkit-border-radius:20px; 8. -moz-border-radius:20px; 9. border-radius:20px; 10. padding:20px; 11. }

「-webkit-」を接頭辞に追加したプロパティを併記した状態でライブビューやマルチスクリーンプレビューのレンダリングに切り替えると、border-radiusなどのCSS3プロパティが反映されます。

接頭辞付きのプロパティを追記した場合は、好みに応じてスペースを入力し、縦位置が揃うようにソースコードを整形してもいいでしょう。

5. section.section-main{ 6. border:3px solid #006600; 7. -webkit-border-radius:20px; 8. -moz-border-radius:20px; 9. border-radius:20px; 10. padding:20px; 11. }

なお、デザインビューではborder-radiusなどのCSS3のプロパティは有効にはなりません。しかし、デザインビューはライブビューに比べて小回りがききます。ですので、

  • デザインビューは主にマークアップ時に利用する。
  • ライブビュー/マルチスクリーンプレビューは(特にCSS3を利用した)スタイリング時に利用する。

といったような柔軟な使い分けをするとよいでしょう。

 

まとめ

border-radiusは表記を1行追加するだけで角丸が実現できるプロパティです。画像も複雑なHTMLの入れ子構造も必要ありません。border-radiusプロパティはこれまでのWeb制作をより簡単にすることができる仕組みなのです。

残念ながらInternet Explorer 6~8ではborder-radiusプロパティはサポートされていません。しかし、border-radiusプロパティはレイアウトフローに影響を与えないという性質があります。そのため、border-radiusプロパティを利用したとしても、未対応環境で表示が崩れてしまうことはないのです。border-radiusプロパティはCSS3の中でも積極的に利用できるプロパティの1つといえるでしょう。例えば、Twitterの公式サイトなどでもborder-radiusは多用されています。

次回はCSS3で拡張されるbackgroundプロパティについて解説します。