大好評「スラスラ」シリーズのCSSデザイン版がついに発売！
作ってたしかめて、応用する力が身につく
装飾からレイアウトまで、ステップバイステップで作ってたしかめてCSSデザインの基本が身につく入門書の決定版!
実習をとおして、サンプルページを作りながらCSSをマスターしましょう。
本書では、実習を大きく2つのコースにわけています。1つは、すでにあるページをカスタマイズするコース。編集したCSSの結果がわかりやすく、楽しく実習に取り組めます。お持ちのブログやサイトにも、すぐに応用できます。
もう1つは、ゼロからCSSを作成するコース。複雑なレイアウトもこれでマスター。新しくページを作るためのテクニック満載です。
もちろん詳しい解説付き。「すぐに使える。ずっと役立つ。」CSSはじめの一歩を踏み出しましょう。
実習を進めるとこんなページができあがります
- Chapter03-04「Café SoRa no UE」（既存ページのカスタマイズ）
- Chapter05「Café SoRa no UE」（ボックスとテーブルのスタイル）
- Chapter06-07「ドレミファ音楽教室」（ゼロからページを作成）
学習用サンプルデータダウンロード（SBクリエイティブ社）
本書の概要はこちらのビデオもご覧ください
目次
01 HTML の基礎知識
- 1 HTMLはWebページの内容を記すための言語
- 2 HTMLの基本形
- 3 タグの書式と各部の名称・役割
- 4 終了タグがない「空要素」
- 5 コメント文
- 6 要素と要素の関係
- 7 HTMLのバージョン
02 新規ファイルの作成と保存
- 1 HTMLファイルを作成する
03 HTML 記述のポイント
- 1 HTML ファイル、CSSファイルの文字コード方式はUTF-8にする
- 2 すべて半角英数字で、タグは小文字で入力する
- 3 改行、インデント
04 HTML を書いてみよう
- 1 基本のHTMLを記述する
- 2 メタデータを記述する
- 3 見出し
- 4 段落
- 5 非序列リスト、序列リスト
- 6 画像の挿入
- 7 外部サイトへリンクを張る
01 CSS の基礎知識
- 1 CSS でできること
- 2 デフォルトのスタイルシート
02 CSS の仕組み、基本的な書式、各部の名称
- 1 CSS の基本的な仕組み
- 2 CSS の書式と各部の名称・役割
- 3 その他の書式
03 CSS を記述する場所
- 1 CSS を記述する場所は決められている
04 CSSファイルを作成してHTMLファイルにリンクする
- 1 専用のCSS ファイルを作成する
- 2 HTML ファイルからCSS ファイルにリンクする
05 CSS を記述する
- 1 style.css を編集する
01 HTML から要素を選択する「セレクタ」
- 1 セレクタの「パターン」
02 ページ全体のフォント、テキストを調整する
- 1 ページ全体のフォントを変更する
03 さまざまなセレクタを使用する
- 1 一部テキストのフォントサイズを変更する（1）
- 2 一部テキストのフォントサイズを変更する（2）
- 3 行の高さを調整する 78
04 継承とより高度なフォントの扱い
- 1 親要素に設定したテキスト色を継承させる
- 2 CSS ルールを上書きする
- 3 一部のテキストを明朝体にする
- 4 Webフォントを使用する
- 5 装飾的なCSS プロパティと単位
01 ボックスとボックスモデル
- 1 ボックスとは 〜ブロックレベル要素とインラインレベル要素〜
- 2 CSS のボックスモデル
02 背景色を変更する
- 1 ページ全体の背景色を変更する
03 背景に画像を使用する
- 1 ヘッダーに背景画像を適用する
- 2 フッターに背景画像を適用する
04 ボックスモデルを理解しよう
- 1 見出しの上下マージンを調整する
- 2 見出しのパディングを調整する
- 3 テキストを右揃えにする
05 サイドバーの表示をカスタマイズする
- 1 ブレットを消してボーダーラインを引く
06 ショートハンドとauto 値
- 1 ページ全体をウィンドウの中央に表示する
- 2 最後にちょっと飾りつけ
01 CSSが適用される優先順位 〜カスケードと詳細度〜
- 1 カスケードと詳細度
02 見出しの背景を変更する
- 1 カスケードを利用してCSS プロパティを上書きする
03 ボックスの装飾とマージンの畳み込み
- 1 ボックスを装飾する
04 テーブルの基本的なCSS をマスターする
- 1 テーブルに罫線を引く
- 2 テーブルのマージンとパディング
- 3 1 列目、3列目が改行しないようにする
- 4 列の行揃えを変更する
- 5 セルに背景画像を指定する
- 6 奇数行に背景色を付ける
01 通常のHTML 配置とフロート、ポジション
- 1 通常のHTML 配置 155
- 2 フロート 156
- 3 ポジション 158
02 全体のHTML 構造を確認する
03 ページ全体に適用されるCSS を記述する
- 1 デフォルトのマージンをゼロにする
04 ヘッダーを作成する
- 1 ヘッダーのサイズを固定する
- 2 ロゴ画像をポジションで配置する
- 3 「お問い合わせ」もポジションで配置する
05 ウィンドウ幅いっぱいに広がる背景画像を適用する
- 1 ヘッダーの親要素に背景画像を適用する
06 ヘッダーを仕上げる
- 1 ボックスの下辺だけ角を丸くする
07 ナビゲーションを作成する
- 1 ナビゲーションをウィンドウの中央に配置する
- 2 <li>を横に並べる
- 3 リンクをボタンのように見せかける
- 4 ナビゲーションのデザインを仕上げる
01 フロートとページレイアウト
- 1 2 コラムレイアウトの利点とページのサイズ
02 キービジュアルをウィンドウの中央に配置する
- 1 キービジュアルをウィンドウの中央に配置する
03 メイン部分のレイアウトを作成する
- 1 メイン部分の横幅を固定する
- 2 2 コラムにする
- 3 フロートを解除する（1）
- 4 フロートを解除する（2）
- 5 「お知らせ」の画像にテキストを回り込ませる
- 6 「お知らせ」のデザインを仕上げる
- 7 バナー（サイドバー）のCSS を調整する
04 フッター部分のレイアウトを作成する
- 1 完成図を見ながらHTMLとCSS を書いてみよう