Web標準テキストシリーズWeb標準テキスト(2) CSS

[表紙]Web標準テキスト(2) CSS

A5判/240ページ

定価(本体2,180円+税)

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で確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像

目次

第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のコンディショナルコメント

著者プロフィール

福島英児(ふくしまえいじ)

DTPおよびWeb制作に携わる。Web制作においては,2003年末頃から(X)HTML+CSSによる制作へシフト。現在は主にディレクション業務に関わるかたわら,CSS関連などの記事を雑誌へ寄稿。著書に『実践WebStandards Design』(九天社)(共著)がある。

URLhttp://www.lucky-bag.com/