XHTML/HTML+CSS スーパーレシピブック

ネットにはさまざまなデザインのWebページがあります。Webページはヘッダーやメニューといったパーツの組み合わせで構成されており、組み合わせのパターンや画像の使い方、余白の取り方などで多彩なデザインを作り出すことができます。

こうしたデザインの設定を行うのがCSS（スタイルシート）です。しかし、ワープロソフトならば簡単に設定できるデザインが、スタイルシートによる設定では一筋縄ではいきません。そこで本書では、Webページを構成するパーツごとに、スタイルシートを使ったデザイン設定の考え方やカスタマイズの方法を詳細にまとめました。

・罫線を目的の箇所に表示するにはどうすればいいのか？
・余白はどこで調節するのが効率的なのか？
・文字の表示位置や画像の表示範囲を調節する方法は？
					. . . etc.

スタイルシートの考え方や仕組みがわかってしまえば、ブログやホームページの手直しはもちろん、１からサイトを構築するのも意外と簡単だと思えるかもしれません。本書で取り上げたパーツは、単体での利用はもちろん、組み合わせてWebページの構築に利用することも可能です。ダウンロードデータも用意してありますので、Webページの制作や学習に活用してください。

また、サンプルは現行の標準規格に準拠した形で記述し、HTML5やCSS3についても紹介していますので、現在、そして将来のWebページ制作に向けて活用していただければ幸いです。

本書で作成するパーツはCSS（スタイルシート）でデザインを設定します。このとき、デザイン設定の基本単位となるのが「ボックス」です。WebページではHTML/XHTMLのタグでマークアップした部分がボックスとなり、罫線や余白といった装飾は、CSSでボックスに設定する仕組みになっています。そこで、本書ではボックスの構造を意識することに重点を置いてパーツのデザインを設定していきます。

本書ではWebページを構成するパーツを次のように章ごとに紹介します。また、「Chapter 10 レシピ」ではパーツを組み合わせてWebページを構築します。

Chapter 1.　レイアウト

２段組みや３段組みなど、Webページの基本となるレイアウトパターンをまとめます。

Chapter 2.　ヘッダー

サイト名やブログ名を表示するヘッダーのデザインパターンをまとめます。

Chapter 3.　背景

背景のデザインパターンをまとめます。

Chapter 4.　メニュー

縦型と横型のメニューのデザインパターンをまとめます。

Chatper 5.　テキスト

見出しと文章のデザインパターンをまとめます。

Chapter 6.　画像

画像のデザインパターンをまとめます。

Chapter 7.　テーブル

テーブル（表組み）のデザインパターンをまとめます。

Chapter 8.　フォーム

フォームのデザインパターンをまとめます。

Chapter 9.　フッター

コピーライトなどを表示するフッターのデザインパターンをまとめます。

Chapter 10.　レシピ

Chapter 1～9までのパーツを組み合わせてWebページを構築します。

Chapter 1　レイアウト

LAYOUT 01 １段組みのレイアウトを作成する
LAYOUT 02 ２段組みの固定レイアウトを作成する
LAYOUT 03 ３段組みの固定レイアウトを作成する
LAYOUT 04 ２段組みのリキッドレイアウトを作成する
LAYOUT 05 リキッドな３段組みのレイアウトを作成する
LAYOUT 06 サイドバーを縦に長く表示する
LAYOUT 07 レイアウトを枠で囲んで表示する
LAYOUT 08 罫線で区切って表示する

Chapter 2　ヘッダー

HEADER 01 タイトルを表示する
HEADER 02 タイトルを画像で表示する
HEADER 03 ヘッダーをバーの形にデザインする
HEADER 04 ヘッダーに画像を表示する
HEADER 05 ヘッダーをグラデーションでデザインする
HEADER 06 ヘッダーにワンポイントで画像を入れる
HEADER 07 タイトルの下に画像を大きく表示する
HEADER 08 タイトルの右側に検索フォームを表示する

Chapter 3　背景

BACK 01 パターンを敷き詰めて背景にする
BACK 02 グラデーションで背景を表示する
BACK 03 ワンポイントで画像を表示する
BACK 04 １枚の大きな画像を表示する

Chapter 4　メニュー

MENU 01 リスト形式でメニューを表示する
MENU 02 リストマークを画像で表示する
MENU 03 階層構造のメニューをデザインする
MENU 04 リンクを罫線で区切って表示する（１）
MENU 05 リンクを罫線で区切って表示する（２）
MENU 06 リンクを画像で装飾する
MENU 07 リンクの文字も画像で表示する
MENU 08 表示中のページがわかるようにする
MENU 09 メニューに見出しをつけて表示する
MENU 10 メニューを枠で囲んで表示する
MENU 11 メニューを角丸の枠で囲んで表示する
MENU 12 リンクを横に並べて表示する
MENU 13 リンクを罫線で区切って表示する（１）
MENU 14 リンクを罫線で区切って表示する（２）
MENU 15 バーの形で表示する
MENU 16 リンクとバーを画像で装飾する
MENU 17 リンクの文字も画像で表示する
MENU 18 タブの形で表示する

Chapter 5　テキスト

TEXT 01 見出しと文章を表示する
TEXT 02 見出しをバーの形で表示する
TEXT 03 見出しを画像で装飾する
TEXT 04 見出しの下に区切り線を表示する
TEXT 05 区切り線を画像で表示する
TEXT 06 見出しにマークをつけて表示する
TEXT 07 見出しを画像で表示する
TEXT 08 見出しに付加情報を表示する
TEXT 09 見出しと文章を枠で囲んで表示する
TEXT 10 枠を画像で作成する

Chapter 6　画像

IMAGE 01 画像を中央に配置する
IMAGE 02 画像の右側に文章を回り込ませて表示する
IMAGE 03 画像の左側に文章を回り込ませて表示する
IMAGE 04 画像を枠で囲んで表示する
IMAGE 05 画像にキャプションをつける
IMAGE 06 複数の画像を並べて表示する
IMAGE 07 キャプションつきの画像を並べて表示する
IMAGE 08 画像をトリミングして表示する

Chapter 7　テーブル

TABLE 01 テーブル（表組み）を作成する
TABLE 02 テーブルの罫線をカスタマイズする
TABLE 03 テーブルにキャプションをつけて表示する

Chapter 8　フォーム

FORM 01 投稿フォームを作成する
FORM 02 項目名をテキストボックスの上に表示する
FORM 03 投稿フォームをテーブルで表示する
FORM 04 テキストボックスや送信ボタンを画像で装飾する

Chapter 9　フッター

FOOTER 01 フッターの上を罫線で区切る
FOOTER 02 フッターをバーの形にデザインする
FOOTER 03 フッターを画像で装飾する
FOOTER 04 フッターを２段組みで表示する

Chapter 10　レシピ

RECIPE 01 Web ページを作成する
RECIPE 02 基本的な２段組みのデザイン
RECIPE 03 ページに大きな画像を表示するデザイン
RECIPE 04 パーツを罫線で区切ったデザイン
RECIPE 05 パーツを枠で囲んだデザイン
RECIPE 06 装飾した枠で囲んだデザイン
RECIPE 07 横幅が変わるページのデザイン
RECIPE 08 ヘッダー画像を大きく入れたデザイン
RECIPE 09 タブナビゲーションを入れたデザイン

本書のTIPSでは、CSS3やHTML5についての情報や、古いブラウザ用の下位互換のテクニックなどを紹介しています。

HTML5

HTML5の文法
HTML5でWebページの基礎となるソースを作成する
文書構造のマークアップ
複数の見出しをグループ化する
見出しの階層をリセットする
ヘッダーをグループ化する
フッターをグループ化する
リンクの中に見出しや文章を記述する
HTML5における<img />の記述
<figure>を使った画像とキャプションのマークアップ
HTML5におけるalt属性の記述
テーブルについての説明の記述とsummary属性
HTML5で追加されたフォームタイプ
必須項目を指定する　required属性
Internet ExplorerでHTML5を利用する

CSS3

横幅や高さの算出方法を指定する
CSSでグラデーションを表示する
CSSでページの背景にグラデーションを表示する
背景を半透明にする
背景画像の大きさを調節する
複数の背景画像を表示する
リンクをグラデーションで装飾する
角丸の枠をスタイルシートで作成する
角丸の罫線をスタイルシートで作成する
CSS3で角丸のグラデーションバーを作る
１枚の画像でサイズ可変な罫線を作成する
１枚の画像でサイズ可変な枠を作成する
CSS3のグラデーション／角丸／ドロップシャドウで見出しを装飾する
文字やボックスにドロップシャドウで影をつける
WebFontを利用して文字を表示する
CSS3で定義された属性セレクタ
必須項目とそれ以外の項目にスタイルシートを適用する
:required／:optionalセレクタ
入力値の正誤に応じてスタイルシートを適用する
:valid／:invalid セレクタ
数値が範囲内がどうかに応じてスタイルシートを適用する
:in-range／:out-of-range セレクタ
CSS3に用意されたその他のフォーム関連のセレクタ
フレキシブル・ボックスレイアウトを利用した２段組みの固定レイアウト
フレキシブル・ボックスレイアウトを利用した３段組みの固定レイアウト
フレキシブル・ボックスレイアウトを利用した２段組みのリキッドレイアウト
フレキシブル・ボックスレイアウトを利用した３段組みのリキッドレイアウト
フレキシブル・ボックスレイアウトでサイドバーを縦に長く表示する

CSS2.1

最初の項目だけにスタイルシートを適用する
横幅の最小値・最大値を指定するプロパティ
display: inline-block を使って横に並べる
clipプロパティを利用したトリミング
フォームにカーソルを重ねたときや選択したときに色を変える
属性セレクタでフォームのデザインを指定する

基本

HTML/XHTMLとCSSの標準規格
ボックスの横幅の指定方法
文字サイズの単位「em」について
floatプロパティによる回り込みの解除
CMSツールで画像に自動挿入されるクラス名
DOCTYPE宣言
エンコードの種類の指定

主要ブラウザの互換／アクセシビリティ

line-heightの値を統一する
text-indentを利用した画像置換のメリットと問題点
paddingを利用した画像置換の方法
SafariとChromeのアウトラインを解除する

下位互換

XML宣言の記述
DOCTYPE宣言によるレンダリングモードの切り替え
によるレンダリングモードの切り替え
条件付きコメントで古いInternet Explorerに対応する
IE5と5.5でサイドバーの横幅を指定する
コンテンツとサイドバーを高さの算出対象にする
IE5.5以下で中央配置を行う
IE5と5.5で右側に配置する
floatを適用した要素の余白サイズ
メニューの配置がおかしくなるのを防ぐ
IE6におけるリンクの表示
IE5と5.5におけるリンクの表示
IE7以下で画像の下に余白が入る問題
IE6以下でロールオーバーが機能しない問題
IE5でリンクが機能しない問題
IE5におけるリンクの間隔
IE5における横型メニューの画像置換
IE5と5.5で画像を中央に配置する
alt属性の内容が表示されるのを防ぐ
古いブラウザで画像を自動改行する
IE5における点線の表示
キャプションのまわりの余白の指定
キャプションの表示位置の指定
IE7以下で標準のボタンのデザインを解除する
IE5.5以下のブラウザに対応する