BOOK Studio947
狩野祐東・狩野さやか著書

スラスラわかるCSSデザインのきほん

狩野祐東/SBクリエイティブ
240ページ 本体1900円+税 ISBN-13: 978-4-7973-8007-1

大好評「スラスラ」シリーズのCSSデザイン版がついに発売!
作ってたしかめて、応用する力が身につく

装飾からレイアウトまで、ステップバイステップで作ってたしかめてCSSデザインの基本が身につく入門書の決定版!
実習をとおして、サンプルページを作りながらCSSをマスターしましょう。
本書では、実習を大きく2つのコースにわけています。1つは、すでにあるページをカスタマイズするコース。編集したCSSの結果がわかりやすく、楽しく実習に取り組めます。お持ちのブログやサイトにも、すぐに応用できます。
もう1つは、ゼロからCSSを作成するコース。複雑なレイアウトもこれでマスター。新しくページを作るためのテクニック満載です。
もちろん詳しい解説付き。「すぐに使える。ずっと役立つ。」CSSはじめの一歩を踏み出しましょう。

実習を進めるとこんなページができあがります

学習用サンプルデータダウンロード(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 を書いてみよう