レスポンシブWebデザインが“当たり前”の時代の、新しいHTML・CSSの書き方ガイド

現在のHTML・CSSの書き方は、少し前までのHTML・CSSの書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。

＜本書の対象読者＞
● これからWebサイト制作を学びたい初心者の方
● 最新のHTML・CSSの書き方を知りたい経験者の方
● フレックスボックスを使ったページレイアウトについて知りたい方
CHAPTER 1 Webサイトの仕組みを知ろう

SECTION 1 Webサイトが表示される仕組み
SECTION 2 URL
SECTION 3 Webサイトに使われるファイルの種類
SECTION 4 Webサイトのファイル・フォルダ構造
SECTION 5 Webサイトの制作環境を整えよう

CHAPTER 2 HTMLの基礎知識とマークアップの実践例

SECTION 1 HTMLとは
SECTION 2 HTMLの書式
SECTION 3 HTMLドキュメントの構造
SECTION 4 マークアップの考え方トレーニング

CHAPTER 3 CSSの基礎知識とページデザインの実践例

SECTION 1 CSSの基礎知識
SECTION 2 CSSの書式
SECTION 3 ページにCSSを適用するトレーニング

CHAPTER 4 テキストの装飾

SECTION 1 見出しや本文のフォントサイズを調整する
SECTION 2 読みやすい行間にする
SECTION 3 段落のテキストをリード文だけ太字にする
SECTION 4 表示するフォントを設定する
SECTION 5 テキストの行揃えを変更する
SECTION 6 2行目以降を1文字下げる
SECTION 7 テキスト色を変更する
SECTION 8 見出しにサブタイトルをつける

CHAPTER 5 リンクの設定と画像の表示

SECTION 1 テキストにリンクを追加する
SECTION 2 テキストリンクにCSSを適用する
SECTION 3 画像を表示する
SECTION 4 画像にリンクをつける
SECTION 5 画像にテキストを回り込ませる

CHAPTER 6 ボックスと情報の整理

SECTION 1 インラインボックスとブロックボックス
SECTION 2 箇条書き（リスト）のマークアップ
SECTION 3 リストを情報の整理に使う
SECTION 4 上手な＜div＞の使い方
SECTION 5 CSSのボックスモデル
SECTION 6 パディング、ボーダー、マージンの設定
SECTION 7 2つ以上のボックスを並べる
SECTION 8 ボックスのデザインを調整する

CHAPTER 7 テーブル

SECTION 1テーブルを作成する
SECTION 2アクセシビリティを考慮したテーブル
SECTION 3 テーブルのデザインバリエーション

CHAPTER 8 フォーム

SECTION 1 フォームとデータを送受信する仕組み
SECTION 2 さまざまなフォーム部品
SECTION 3 標準的なフォームの例

CHAPTER 9 ページ全体のレイアウトとナビゲーション

SECTION 1 実践的なコーディングのために知っておきたいCSSの知識
SECTION 2 シングルコラムレイアウト
SECTION 3 フレックスボックスを使ったコラムレイアウト
SECTION 4 ナビゲーションメニューを作成する

CHAPTER 10 レスポンシブWebデザインのページを作成しよう

SECTION 1 レスポンシブWebデザインとは
SECTION 2 レスポンシブWebデザインのサイトを作る