HTML&スタイルシート レイアウトブック 3rd Edition | ||
---|---|---|
本書『HTML&スタイルシートレイアウトブック』は今回で2度目の改訂となり、3rd Editionとなりました。初版発行当時のWebデザインはまだテーブルレイアウトが主流で、CSSを利用したレイアウトは一般的ではありませんでした。現在では、Webページの作成環境やブラウザの進化から、本書が推薦してきたXHTML&CSSによるWebページ作成が主流となっています。 3rd Editionに改訂するにあたり、本書では対象とするブラウザを従来のIE5.x以上から、IE6以上へ変更しました。古いタイプのブラウザへの対応よりも、Web標準を重視した結果です。加えて、作成例を増やし、目的別に分類したので、さらに使いやすくなったと思います。 本書は10章(chapter)で構成されています。chapter1からchapter6がWebページの構成とレイアウト、chapter7からchapter10がWebページで利用される各パーツの構成と装飾、となっています。 chapter1とchapter2は、1段組のデザインです。chapter1では、一般的なWebページに必要な内容に、タグと基本スタイルを指定しています。この章で作成した例題ページが、以降のサンプルのもとになります。chapter2では、chapter1で作成したページに、CSSで1段組のページデザインをしています。 chapter3では、トップページのデザインについて説明しています。CSSによるレイアウトでも、Webサイトの顔とも言える美しいトップページがデザインできます。 chapter4とchapter5は、2段組のデザインです。chapter4は段組の幅を固定したデザイン、chapter5はサイドバーの幅は固定してメインの幅だけが可変のデザインです。どちらもchapter1のサンプルにサイドバーの内容を追加した状態からデザインしています。 chapter6は、メインの段組の両側にサイドバーを配置した3段組のデザインです。両サイドバーとメインの幅を固定したデザインと、両サイドバーの幅は固定してメインの幅だけが可変のデザインを紹介しています。 chapter7以降はページの部分的な装飾です。chapter7はメインのエントリーとその見出しのデザイン例、chapter8はサイドバーの各項目のデザイン例を説明しています。chapter9では、リンクおよびナビゲーションの装飾、chapter10ではテーブルとフォームの装飾例をそれぞれ10個ずつ紹介しています。 Webページの規格は日々進歩を遂げ、現在ではHTML5およびCSS3へ向かって進んでいます。しかし、ブラウザの対応状況がまちまちなため、本書のサンプルには取り入れませんでした。代わりに、その進化の概要についてはコラムで触れています。このほかにも、Webデザイン知っておくと役立つ情報をコラムとして本の中にちりばめました。ご参考にしてください。 本書で解説したサンプルはソーテック社サイトからダウンロードできます。サンプルのHTMLおよびCSSと併せて読んで頂けると、いっそう理解が深まることと思います。 (まえがきより) |
||
著者:外間かおり B5変形・264ページ・オールカラー 本体価格:2,480円+税 ISBN978-4-88166-721-7 |
||
本の購入はこちらからどうぞ | ||
サポートページへ | ||
chapter 1 1段組の基本的なレイアウト
※お使いのブラウザでJavaScriptが無効の場合は機能しません。
1-1 1段組の基本デザイン 1-2 ページ全体と見出しのスタイルを指定する 1-3 段落と著作権情報のスタイルを指定する 1-4 リンクのスタイルを指定する chapter 2 1段組レイアウトの応用 2-1 全体の横幅を固定する 2-2 全体を中央揃えのボックスタイプにする 2-3 タイトルバックに画像を表示する 2-4 ヘッダーとフッターをページの幅いっぱいに表示する 2-5 ナビゲーションバーを付ける(2-3の応用) chapter 3 トップページのデザイン 3-1 ページ中央にコンテンツを配置する 3-2 画像をバックにリンクをレイアウトする chapter 4 幅固定の2段組レイアウト 4-1 2段組にするページの構成 4-2 幅固定で右側にサイドバーを配置する(絶対位置) 4-3 幅固定で右側にサイドバーを配置する(フロート) 4-4 ナビゲーションバーを付ける chapter 5 幅可変の2段組レイアウト 5-1 右側に幅固定のサイドバーを配置する(絶対位置) 5-2 右側に幅固定のサイドバーを配置する(フロート) chapter 6 両側サイドバーの3段組 6-1 幅固定で両側にサイドバーを配置する(絶対位置) 6-2 幅固定で両側にサイドバーを配置する(フロート) 6-3 左右に幅固定のサイドバーを配置する(絶対位置) 6-4 左右に幅固定のサイドバーを配置する(フロート) chapter 7 見出しとコラムのレイアウト 7-1 見出しの左にアイコンを付ける 7-2 見出しをタブのように表示する 7-3 見出しの横に縞を表示する 7-4 見出しと本文を囲む 7-5 見出しに背景を付けて本文と囲む 7-6 見出しを枠線に重ねる chapter 8 サイドバーの装飾 8-1 サイドバー見出しを付箋のように表示 8-2 サイドバー項目リストの記号をアイコンに 8-3 サイドバー項目リストの下に破線を引く 8-4 サイドバーの各項目を囲む 8-5 サイドバーの各項目の上を角丸で囲む 8-6 サイドバーの各項目を角丸で囲む chapter 9 リンク&ナビゲーションデザイン 9-1 リンクのデザイン 9-2 タブ型ナビゲーションバー 9-3 スワップイメージ 9-4 ポップアップメニュー chapter 10 テーブル、フォームの装飾 10-1 テーブルのCSSデザイン 10-2 フォームのCSSデザイン Webセーフカラー見本 CSSプロパティ INDEX HTML INDEX キーワード INDEX ≪ 目次を隠す |