パソコン書・ビジネス書出版のソーテック社

ソーテック社 | パソコン・ビジネス書籍出版

Yahoo!Googleで上位ランクするための 新版 SEO完全計画

Google検索

Google

WWW を検索
sotechsha.co.jp を検索
HTML&スタイルシート レイアウトブック 改訂版
『HTML&スタイルシートレイアウトブック』の初版を出してちょうど2年が経ちました。発行当時CSS(Cascading Style Sheet)は文字の大きさやスタイルなど限定的な利用がほとんどで、レイアウトを含めすべてのデザインをCSSでコントロールしているページはあまりありませんでした。

2007年現在、Movable Typeなどブログの急速な普及もあって、CSSによるページレイアウトや、XHTML+CSSのWeb標準サイトも多く見かけるようになりました。

この流れを受けて、今回『HTML&スタイルシートレイアウトブック』を改訂し、より実用的なレイアウトテクニックを中心にまとめることにしました。前回では取り入れていなかったリキッドデザイン(幅が可変のデザイン)も数多く取り入れています。

CSSでデザインするためには、HTMLを構造的に記述することが求められます。構造的なHTMLは、デザインしやすいだけでなくSEO(検索エンジン最適化)にも役立ちますし、アクセシビリティの向上にも繋がります。今回の改訂では、サンプルをXHTMLで記述することにより、より構造化に適した内容にしました。

この本は10個のChapterで構成されています。はじめから順に読み進んでいけば、HTMLやCSSを利用したデザイン方法をステップアップしていけるようになっています。(X)HTMLやCSSの知識のある方なら、必要な部分から読んでも構いません。

なお、本書で解説したサンプルはhttp://www.sotechsha.co.jp/sp/568/からダウンロードできます。サンプルのHTMLおよびCSSと併せて読んで頂けると、いっそう理解が深まることと思います。
(まえがきより抜粋)
カバーイメージ
著者:外間かおり
B5変形・240ページ・オールカラー
本体価格:2,300円+税
ISBN978-4-88166-568-8
 
本書は絶版・品切となっております。
アマゾンで購入 セブンネットショッピングで購入 楽天ブックスで購入
サポートページへ
目次を表示する ≫
chapter 1 1段組の基本的なレイアウト
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 サイズ可変で右側にサイドバーを配置する
4-5 サイズ可変で左側にサイドバーを配置する

chapter 5 中央揃え2段組(固定&リキッド)
5-1 2段組で中央揃えにするページの構成
5-2 幅固定で右側にサイドバーを配置する
5-3 幅固定で左側にサイドバーを配置する
5-4 幅可変で右側にサイドバーを配置する
5-5 幅可変で左側にサイドバーを配置する

chapter 6 両側サイドバー3段組(固定&リキッド)
6-1 幅固定で両側にサイドバーを配置する
6-2 幅固定中央揃えで両側にサイドバーを配置する
6-3 幅可変で両側にサイドバーを配置する
6-4 幅可変中央揃えで両側にサイドバーを配置する

chapter 7 両サイドバー中央揃え3段組(固定&リキッド)
7-1 幅固定中央揃えで両側にサイドバーを配置する
7-2 幅可変中央揃えで両側にサイドバーを配置する

chapter 8 サイドバーの装飾(付箋・ボタン・タブ・ボーダー)
8-1 サイドバー見出しを付箋のように表示
8-2 サイドバー見出しをボタンのように表示
8-3 サイドバー見出しをタブのように表示
8-4 サイドバー見出しを枠に重ねて表示

chapter 9 メインを2段組に
9-1 絶対位置指定で本文を2段組
9-2 フロート指定でメインを2段組

chapter 10 リンク&パーツデザイン
10-1 リンクのデザイン
10-2 スワップイメージ
10-3 ポップアップメニュー
10-4 コラムのデザイン
10-5 フォームをCSSでデザインする
10-6 スクロールバーのデザイン
10-7 テーブルのデザイン

Webセーフカラー見本
CSSプロパティ INDEX
HTML INDEX
キーワード INDEX

≪ 目次を隠す
※お使いのブラウザでJavaScriptが無効の場合は機能しません。