内容紹介

（概要）

各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。

本書はWebページのデザインをHTML&CSSで作成するために必要なチカラを身につけて、これまでに学習してきた基礎知識を、Webデザインの現場で「使える力」にレベルアップします。

（こんな方におすすめ）

・Webデザイナー初級者、中級者

（目次）

Chapter 1　デザインからHTML を作る「流れ」

　　1-1 ゼロからWebページを作る「第一歩」

　　1-2 HTMLの書式と用語

　　1-3 CSSの書式と用語

　　1-4 セレクタと優先順位

　　1-5 ボックスモデル

　　1-6 すべてのページに共通するテンプレートを作る

　　1-7 共通テンプレートをレスポンシブデザイン対応にする

　　1-8 フォントサイズを調整する

　　1-9 レスポンシブデザインに対応した画像のスタイル

Chapter 2 レイアウトの大枠を組み立てる

　　2-1 「ゼロ」からWebページを組み立てるには

　　2-2 コンテナに分割する

　　2-3 コンテナのHTMLを書く

　　2-4 コンテナの幅を設定する

　　2-5 コンテナの幅を設定する〜ヘッダー、パンくずリスト編〜

　　2-6 上下の空きスペースを調整する

　　2-7 コンテナに設定する背景、ボーダーライン

Chapter 3 メインコンテナを組み立てる

　　3-1 モジュール

　　3-2 メインコンテナをモジュールに分割する

　　3-3 グループ化モジュールの特徴と組み込み

　　3-4 記事タイトル

　　3-5 見出しと本文

　　3-6 Webフォントの使用

　　3-7 テキストを強調するマーカー

　　3-8 リスト

　　3-9 画像

　　3-10 画像＋キャプション

　　3-11 画像にテキストを回り込ませる

　　3-12 タグとカテゴリー

　　3-13 テキストの先頭にアイコン

　　3-14 ボックスに背景画像を適用

　　3-15 ボックスを囲む

　　3-16 チャット型のデザイン１ 〜ボックスを2つ並べる〜

　　3-17 チャット型のデザイン２ 〜ボックスの大きさ調整・並び順の変更〜

　　3-18 チャット型のデザイン３ 〜要素を円形に切り抜く〜

　　3-19 タブ付きボックス

Chapter 4 ヘッダーを組み立てる

　　4-1 ヘッダーは画面サイズでレイアウトが変わる

　　4-2 ヘッダーをモジュールに分割する

　　4-3 ロゴとボタンのフレックスボックス構造

　　4-4 ロゴ

　　4-5 モバイル向けボタン

　　4-6 ナビゲーション

　　4-7 JavaScriptを読み込む

　　4-8 パンくずリスト

Chapter 5 フッターを組み立てる

　　5-1 フッターはカラムや行揃えの制御がポイント

　　5-2 フッターをモジュールに分割する

　　5-3 複数のバナーを並べる

　　5-4 ボタンを横に並べる

　　5-5 ページトップへ戻るボタン

　　5-6 フッターのロゴとコピーライト

　　5-7 フッターのナビゲーション１

　　5-8 フッターのナビゲーション２

Chapter 6 ホームのページを組み立てる

　　6-1 ホームをコンテナに分割する

　　6-2 ホームをモジュールに分割する

　　6-3 ヒーロー画像

　　6-4 画像に画像を重ねて表示

　　6-5 キャッチフレーズ

　　6-6 スタンプ状のテキスト

　　6-7 カード型レイアウト１〜全体のレイアウト〜

　　6-8 カード型レイアウト２〜それぞれのカードの中身〜

　　6-9 メディアオブジェクト

　　6-10 テーブル形のリスト

Chapter 7 カラムレイアウトとサイドバー

　　7-1 2カラムレイアウトのコンテナ

　　7-2 サイドバーをモジュールに分割する

　　7-3 カードとバッジ

　　7-4 記事一覧のリスト

　　7-5 複数の要素で構成されるボックス

Chapter 8 フォームが含まれるページ

　　8-1 フォームのページのコンテナ

　　8-2 フォームをモジュールに分割する

　　8-3 テキストフィールドとメールアドレスフィールド

　　8-4 メニューリスト

　　8-5 テキストエリア

　　8-6 チェックボックス

　　8-7 送信ボタン