Web標準テキストシリーズWeb標準テキスト(2) CSS
2008年1月12日紙版発売
福島英児 著
A5判/240ページ
定価2,398円(本体2,180円+税10%)
ISBN 978-4-7741-3327-0
ただいま弊社在庫はございません。
書籍の概要
この本の概要
Webページのレイアウトデザインに様式美をもたらすCSS(Cascading Style Sheet)の技術は革命をおこしました。画面を拡大するとレイアウトが乱れたりするWebページと決別できるからです。しかも,紙の出版物を超える自由度の高さ,汎用性の高さ,便利さがそこに生まれたのです。
しかしHTMLよりも,直感的にはわかりにくいので,根本的に仕組みを理解することが必要です。本書では,CSSの記法をシステマチックにまとめてわかりやすく解説します!これでWebデザインも自由自在です!
こんな方におすすめ
- きちんとコードから学習したいWebデザイナー(または一般のブログユーザー)
- 大学・専門学校などでWebデザインを勉強している人
著者の一言
本書では,HTML+CSSでWebサイトを制作する上で,これからCSSを覚えたい方,オーサリングソフトのデザインビューなどのWYSWYGだけではなく,しっかりと基礎を学んでハンドコーディングをおこなえるようになりたいという方に,CSSの基礎から基本テクニック,CSSによるレイアウトまでをわかりやすく解説していきます。
本書をきっかけとして,(X)HTML,DOMなどの標準技術へ興味を持っていただき,ユーザービリティ,アクセシビリティなど閲覧者のことをしっかりと考えたWebサイトを制作する足がかりとなれば幸いです。
本書のサンプル
本書の一部ページを,PDFで確認することができます。
- サンプルPDFファイル(899KB)
本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。
目次
第1章 CSSとは何か
- 1.1 CSSはプレゼンテーション言語
- CSSはWeb標準を構成する技術の1つ
- 文書を装飾するための言語
- 構造化された文書が重要
- CSS2とCSS 2.1そしてCSS3
- 1.2 CSSを採用するメリット
- ワンソース・マルチユースの実現
- ファイルサイズの軽減,転送量(帯域)の節約
- SEO(Search Engine Optimization)効果
- 1.3 視覚系UAにみる実装状況の差異
- 1.4 スタイルシート言語であるXSLとCSS
- XSLTとXSL-FO
- CSS 2.2という提案
- クローラーはCSSを読み取る?
第2章 CSSの基礎
- 2.1 CSSの書き方
- CSSの書式
- 見やすいCSSの書き方
- コメントの付け方
- 2.2 CSSで使われるデータ型
- CSSで使われる単位
- その他のデータ型
- カウンタに対応している視覚系Webブラウザ
- 2.3 覚えておくべき@規則
- @charset規則
- @import規則
- 文字コードを指定する理由
- 古いWebブラウザの@import対応表
- @media規則
- 2.4 CSSの適用方法
- HTML文書への適用
- 外部スタイルシートへのリンク方法
- メディアタイプの指定で古いブラウザをはじく
- 文書内にスタイルを埋め込む方法
- 文書内の各要素にスタイルを埋め込む方法
- XML文書への適用
- 2.5 セレクタを覚える
- セレクタとは
- セレクタの解説
- 結合子の前後にスペース
- 属性セレクタの値に引用符は必要か
- hoverの対象となる要素
- CSS3の::before,::after擬似要素
- セレクタのグループ化
- カスケーディングとセレクタの詳細度
- ユーザースタイルシートのススメ
- セレクタの上手な使い方
- CSS2とCSS 2.1の違い
- 今すぐ使えるCSS3のセレクタ
- 構造上の擬似クラス
- Webブラウザのセレクタ対応状況をチェック
- 2.6 視覚整形モデルについて
- ボックスモデルの概念
- ボックスモデルのサイズ
- ボックスモデルの間違った解釈
- マージンの相殺
- DOCTYPEスイッチによる描画モードの切り替え
- CSS3のbox-sizingプロパティ
- 相対値の算出や配置の基本となる包含ブロック
- ボックスの位置決め
- フロートした要素の幅の明示
- フロートした要素を持つ包含ブロックの高さ
- フロートのクリア
- フロートした要素を持つ包含ブロックの高さを確保する方法
第3章 CSSの管理
- 3.1 CSSファイルの構成を考える
- 単一ファイルか複数ファイルか
- ファイルをモジュール化する
- 3.2 コーディングルールを決める
- プロパティの記述順序を決める
- ショートハンドプロパティを有効的に使う
- 3.3 メンテナンス性を高めるアイデア
- コメントを有効的に使う
- バージョン管理システムを利用した管理
第4章 CSSの応用
- 4.1 覚えておきたい基本テクニック
- デフォルトスタイルのリセット
- リンクアンカーのボタン化
- リストの横並び
- ボーダーの使い方
- ブロック要素のセンタリング
- リストマーカーの変更
- ダイナミック擬似クラスによる動的表現
- テキストや段落の装飾
- img要素(写真)の装飾
- iframeを擬似的に再現
- 段組レイアウトの背景を下まで伸ばす
第5章 CSSの実践
- 5.1 CSSによる段組レイアウト
- レイアウトのパターン
- 5.2 固定幅のレイアウト
- 2カラムのレイアウト
- 後続要素をフロートさせる方向
- 3カラムのレイアウト
- 5.3 可変幅のレイアウト
- 2カラムのレイアウト
- 3カラムのレイアウト
- その他のパターン
- 可変幅の最大幅と最小幅をコントロールする
- 5.4 エラスティックレイアウト
- エラスティックレイアウトの設定方法
- img要素のサイズをemで指定
付録 Appendix
- DOCTYPEスイッチによる後方互換モードと標準準拠モードの切り替え
- DOCTYPEスイッチ
- Internet Explorerのコンディショナルコメント
この本に関連する書籍
-
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
Web標準(Web Standards)に準拠したWebサイトを制作するための基礎知識と,実践的なレイアウト手法を徹底的に解説した,Web標準ガイドブック。新しい仕様やブラウザに...
-
Web標準テキスト(3) HTML/XHTML
どんなWebブラウザを使っても同じ結果がほしい。インターネットのコモディティ化により,ユーザニーズは多様化しました。普段利用するWebブラウザも,パソコン用だけで...
-
Web標準テキスト(1) DOM Scripting
DOM(Document Object Model)Scriptingとは,さまざまなWebブラウザに組み込まれているJavaScriptを実行する仕組みです。DOMはW3C(WWW Consortium)にて標準化が進め...
-
ワンランク上を目指す CSSクリエイティブ・デザイン
CSS(スタイルシート)でのWebサイト制作が当然であるという時代になり,Webデザイナーには,デザインとコードのどちらか一方に特化した取り組みだけでなく,双方の学習...