概要

本書はHTML5＆CSS3の入門書です。これからHTML＆CSSを学ぶ人／学び直したい人を対象に，Webサイトの基礎から実践的な書き方までトコトンわかりやすく解説します。HTMLとCSSの基本的なしくみはもとより，表現の幅を広げる記述方法やレスポンシブWebデザイン対応したページデザインの実践例にまで踏み込んでいます。さらにWebコンテンツの構造やブラウザの対応状況など，Web制作に必要なトピックスも図解しています。HTML5とCSS3を押さえつつ，基礎的な知識やしくみをしっかり習得できる内容です。

こんな方におすすめ

• これからWebサイトを制作したい方
• HTMLとCSSを学びたい方／学び直したい方

目次

Chapter 1　Webサイト制作で知っておきたいキーワード

• 1-1　Webの基本　～Webページが表示されるしくみ
• 1-2　ドメイン・IPアドレス・URL　～インターネット上の「住所」
• 1-3　Webブラウザ　～Webページを閲覧するためのソフトウェア
• 1-4　ファイルの種類（HTML/CSS/JavaScript…）　～Webページを構成するもの
• 1-5　SEO　～検索エンジン対策

Chapter 2　HTMLの基本的な仕組みを理解する

• 2-1　HTMLとは　～Webページの文書構造を表す
• 2-2　HTMLのバージョン　～HTML5/XHTML/HTML 4.01
• 2-3　タグ・属性・要素　～HTMLの基本的な構成要素
• 2-4　文書情報　～ページの情報を伝える
• 2-5　テキスト・リンク　～テキストの意味を表す
• 2-6　画像　～ページ上に画像を表示する
• 2-7　表　～表（テーブル）を表示する
• 2-8　フレーム　～Webページを分割する
• 2-9　フォーム　～文字やファイルを送信する
• 2-10　リスト　～箇条書きを表示する
• 2-11　範囲指定　～コンテンツの範囲を区切る
• 2-12　スクリプト・スタイルシート　～外部ファイルを読み込む

Chapter 3　HTML5を理解する

• 3-1　コンテントモデル　～要素の分類方法
• 3-2　アウトライン　～要素の階層構造
• 3-3　テキスト要素　～テキストの意味付けを明確にする
• 3-4　テーブル　～表の目的や構造を明確にする
• 3-5　フォーム　～便利になったフォーム入力機能
• 3-6　マルチメディア　～動画や音声データをシンプルに扱える
• 3-7　各種API　～アプリケーション作成に便利な機能群

Chapter 4　CSSの基本的な仕組みを理解する

• 4-1　CSSとは　～コンテンツの表示スタイルを定義する
• 4-2　CSSの現状　～ブラウザごとにサポート状況が異なる
• 4-3　セレクタ／プロパティ／単位　～CSSの基本的な書式
• 4-4　ボックスモデル　～要素の表示領域は4層構造の四角形
• 4-5　スタイルの優先順位　～どれを優先するかを決める
• 4-6　テキスト　～フォント・行間・行揃え・改行・影など
• 4-7　背景　～背景の色・背景画像を指定する
• 4-8　ボックス　～マージン・ボーダー・パディング・影・角など
• 4-9　レイアウト　～コンテンツの配置方法を指定する
• 4-10　リスト　～リストの表示方法を指定する
• 4-11　テーブル　～表の表示方法を指定する
• 4-12　縦書き　～文字表記の方向を指定する
• 4-13　そのほかのスタイル　～半透明，疑似要素

Chapter 5　CSSで表現の幅を広げる

• 5-1　セレクタと疑似クラス　～要素を柔軟に指定する
• 5-2　レイアウト　～ボックスの柔軟な配置と文章の段組み
• 5-3　グラデーション　～グラデーションを指定する
• 5-4　図形の変形　～要素の変形を指定する
• 5-5　アニメーション　～CSSで動きのあるコンテンツを表現する

Chapter 6　さまざまな端末に対応する

• 6-1　レスポンシブWebデザインとは　～デバイスごとに最適化されたデザイン
• 6-2　モバイルファースト　～モバイルユーザーのことを第一に考える
• 6-3　リキッド／フレキシブル／可変グリッド　～マルチデバイス対応に適したレイアウト
• 6-4　メディアクエリー　～画面幅に応じてスタイルを切り替える
• 6-5　Webアクセシビリティ　～いつでも誰でも利用できるための配慮

Appendix

• A-1　Webサイトの制作環境構築
• A-2　今後の学習に役立つ書籍／Webサイト

サポート

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.114　本文上から1行目

CSS（Cascading Style Sheeets：

CSS（Cascading Style Sheets：

P.40　コード2-4-8の上から9行目

<h2>夏目漱石</h2>

<h2>第一話</h2>

P.133　コード4-6-1の“Meiryo”の説明

ダウンロード

本書をご購入いただいた方は，次の特別記事をダウンロードいただけます。

ページデザインの実践例

• 固定幅領域とフルスクリーン領域の使い分け
• ボックスレイアウト
• CSSでメニューを組み立てる
• 実践的なHTML＆CSSの書き方

ご購入の証明として，以下に表示される本書内の文字列をキーワードとして入力してください。

画像・動画データのダウンロード

本書の図2-6-1（P.47）や図3-3-5（P.87）などをご自身で表示させる際に，必要であれば次の画像・動画データをご利用ください。

HTMLKisochisiki.zip（約2.8MB）

ダウンロードして解凍すると「photo.jpg」「otowa.jpg」「logo.png」「sample.mp4」があります。なお，MP4ファイルはコード3-6-1（P.104）と幅と高さが異なりますが，P.105を参照して指定してください。また，MP3ファイルは，次のサイトなどからご自身でダウンロードしてご利用ください。
https://www.youtube.com/audiolibrary/music