ホームページ制作基礎編

- 1 -

ホームページ制作基礎編 目次

ホームページ制作基礎編 目次 1

第 1章 はじめに 4

第 1節 はじめに 4

第 1項 このテキストの使い方 4

第 2節 HTML によるWEBページの作成 4

第 1項 Web ページの作成を始める前に 4 第 2項 完成例の確認 5 第 3項 学習環境の準備 8 第 4項 プロジェクトフォルダの作成と除去 11 第 5項 HTML ファイルの作成 12 第 6項 文書の構造の作成 15 第 7項 見出しと段落の指定 16 第 8項 テキストリンクの設定 19 第 9項 画像の配置 21 第 10項 CSS でデザインするための準備 23

第 3節 CSS によるWEBページのデザイン 26

第 1項 第 1項 インラインで CSS を記述 26 第 2項 style タグを使用して CSS を記述 27 第 3項 ID と Class を使用して CSS を記述 29 第 4項 外部 CSS ファイルの適用 30 第 5項 外部ファイルに CSS を記述 32 第 6項 画像上のテキストをウィンドウ中央に配置する 34 第 7項 リンク文字をボタン形状にする CSS を記述 37 第 8項 ボタンにトランジションを設定 38

第 2章 WEB サイトの基本的な仕組み 41

第 1節 WEBサイト制作の概要 41

第 1項 Web サイト制作の流れ 41 第 2項 完成例の確認 45

第 2節 WEBサイトの仕組み 50

第 1項 Web ページとWeb サイト 50 第 2項 Web ページの制作に用いられる言語 52 第 3項 Web サイトが表示される仕組み 55 第 4項 Web サイト作成で知っておきたい重要な用語 55

第 3章 HTML による文書構造の作成 59

第 1節 HTMLの記述ルール 59

第 1項 HTML の記述ルール 59 第 2項 プロジェクトフォルダの作成と素材の追加 61 第 3項 HTML文書の作成と属性について 63 第 4項 HTML文書の基本要素の記述（html要素、head要素、body要素） 64

第 2節 HEAD要素内の記述 66

第 1項 タイトルと外部ファイルへのリンクを記述と解説（title要素、link要素） 66 第 2項 スクリプト要素の記述と解説、スタイル要素の解説（script要素、style要素） 67

第 3節 文書構造の記述 69

第 1項 文書構造の記述（header要素、main要素、footer要素） 69 第 2項 文書構造の記述（nav要素、section要素） 71 第 3項 見出しの記述（h1要素、h2要素） 73 第 4項 領域をグループにまとめる（div要素） 76 第 5項 属性の記述（id属性、class属性） 80 第 6項 文書構造についての解説 86

第 4節 段落を構成する要素の記述 86

第 1項 リストを構成する要素の記述（ul要素、li要素） 86 第 2項 段落を構成する要素の記述（p要素） 88 第3項 その他の段落などを構成する要素の解説（ol要素、figure要素、hr要素、pre要素） 91

第 5節 文字書式を設定する要素の記述 94

第 1項 リンクと改行を設定する（a要素、br要素） 94 第 2項 文字書式を設定する要素の記述（strong要素、em要素、ruby要素、time要素） 98

第 6節 画像の配置 100

第 1項 画像を配置する要素の記述（img要素） 100 第 2項 ビデオなどを配置する要素の解説（video要素、audio要素、source要素） 102

第 7節 META要素の記述 104

第 1項 メタデータの記述（meta要素） 104

第 4章 CSS によるデザインの適用 106

第 1節 CSSの記述ルール 106

ホームページ制作基礎編

- 2 -

第 1項 CSS とは？ 106 第 2項 CSS の 3通りの指定方法 107 第 3項 CSS の記述ルールの基本 109 第 4項 セレクタの記述方法と種類 111 第 5項 ID と Class 113 第 6項 CSS の継承 115 第 7項 CSS の優先順位 116

第 2節 文字書式に関する CSS 117

第 1項 素材の追加 117 第 2項 CSS ファイルの作成とフォントのプロパティ 117 第 3項 要素間におけるプロパティの継承 120 第 4項 全体にプロパティを記述(color/font-family/font-size/font-weight/line-height/margin/padding/text-decoration) 121 第 5項 ヘッダーのセレクタの設定 122 第 6項 ヘッダーにプロパティを記述（letter-spacing） 123 第 7項 フッターのセレクタの設定 124 第 8項 フッターにプロパティを記述 125 第 9項 店舗紹介セクション（#about）のセレクタを検討 127 第 10項 店舗紹介セクション（#about）にプロパティを記述129 第 11項 特徴紹介セクション（#feature）のセレクタを検討130 第 12項 特徴紹介セクション（#feature）にプロパティを記述 132 第 13項 メニューセクション（#menu）のセレクタを検討 134 第 14項 メニューセクション（#menu）にプロパティを記述 136 第 15項 予約セクション（#reservation）のセレクタを検討138 第 16項 予約セクション（#reservation）にプロパティを記述 139

第 5章 WEB フォントについて 141

第 1節 文字書式に関する CSS – WEBフォ

ント 141

第 1項 Web フォントについて 141 第 2項 Google Fonts の記述と解説 143 第 3項 Web アイコンフォントについて 145 第 4項 Web アイコンフォント（Font Awesome）の解説とdiv セクションへの記述 146 第 5項 Web アイコンフォント（Font Awesome）ヘッダーセクションとフッターセクションへの記述 148 第 6項 画像ファイルをWebアイコンフォントへ変換するメリット 150 第 7項 Web アイコンフォント（IcoMoon）の解説と画像ファイルの変換 151 第 8項 作成したWeb アイコンフォントをロゴとして設定 154

第 6章 ボックスモデルについて 156

第 1節 ボックス（コンテナ）を形成するCSS

156 第 1項 ボックスモデルとは 156 第 2項 ボックスのサイズ指定とショートハンド 157 第 3項 ボックス（コンテナ）を形成する CSS について 158 第 4項 全体の HTML構造の検討 161 第 5項 ページ全体に設定する CSS 162 第 6項 ヘッダー部分に設定する CSS 163 第 7項 フッター部分に設定する CSS 165 第 8項 キービジュアル部分（#kv）に CSS を記述 167 第 9項 店舗紹介セクション（#about）に CSS を記述 168 第 10項 特徴紹介セクション（#feature） 171 第 11項 メニューセクション（#menu） 174 第 12項 予約セクション（#reservation） 179 第 13項 マージンとパディングをリセット① 180 第 14項 マージンとパディングをリセット② 181

第 7章 DISPLAYプロパティについて 183

第 1節 レイアウト設定の基本 183

第 1項 display プロパティの基本 183 第 2項 inline、block、inline-block の違いを試す① 185 第 3項 inline、block、inline-block の違いを試す② 187 第 4項 フレックスボックスの基本 189 第 5項 フレックスボックスの指定方法 191 第 6項 フレックスボックスを試す① 193 第 7項 フレックスボックスを試す② 195

第 2節 フレックスボックスの実装 196

第 1項 ページ全体とキービジュアルに適用する CSS 196 第 2項 ページ全体に適用する CSS ルールの記述 199 第 3項 ヘッダーとフッターの位置指定の検討と Z-index について 200 第 4項 ヘッダーとフッターの位置指定の記述 201 第 5項 ヘッダーとフッターのフレックスボックス 204 第 6項 ヘッダーとフッターのフレックスボックスを記述 205 第7項 店舗紹介セクション（#about）のフレックスボックスの検討 207 第 8項 店舗紹介セクション（#about）のフレックスボックスを記述 208 第 9項 特徴紹介セクション（#feature）のフレックスボックスを検討 210 第 10項 特徴紹介セクション（#feature）のフレックスボックスを記述 211

ホームページ制作基礎編

- 3 -

第 11項 メニューセクション（#menu）のフレックスボックスの検討 213 第 12項 メニューセクション（#menu）のフレックスボックスを記述 215 第 13項 メニューセクション（#menu）のフレックスボックスの修正 216

第 3節 その他の装飾に関する CSS や記述

方法 218

第 1項 その他の装飾に関する CSSや記述方法 218 第 2項 全体、ヘッダー、フッター、#kv に CSS を記述① 220 第 3項 全体、ヘッダー、フッター、#kv に CSS を記述② 223 第 4項 店舗紹介セクション（#about）に CSS を記述 226 第 5項 特徴紹介セクション（#feature）に CSS を記述 227 第 6項 メニューセクション（#menu）、予約セクション（#reservation）に CSS を記述 229

第 8章 疑似クラスと疑似要素 233

第 1節 疑似クラスと疑似要素 233

第 1項 疑似クラスと疑似要素 233 第 2項 疑似クラスの適用 235 第 3項 疑似要素の適用① 235 第 4項 疑似要素の適用② 237

第 9章 下層ページの作成 241

第 1節 書式とセクションの設定 241

第 1項 素材の追加 241 第 2項 書式と配置の設定 243

第2節 タイル状の写真の配置と効果の作成

250 第 1項 フレックスボックスを使用した写真の配置 250 第 2項 CSS トランジション 254

第 3節 リンクの設定 256

第 1項 リンクの設定 256

第 10章 フォームの作成 258

第 1節 テーブルの作成 258

第 1項 素材の追加とコーディングの全体像の確認 258 第 2項 テーブルの追加 259

第 2節 フォームの作成 261

第 1項 フォームの追加 261

第 3節 CSSでフォームを整える 267

第 1項 CSS でフォームを整える 267

第 4節 リンクの設定 270

第 1項 リンクの設定 270

第 11章 レスポンシブWEB デザイン 272

第 1節 レスポンシブWEBデザインとは 272

第 1項 レスポンシブWeb デザインとは 272 第 2項 メディアクエリとブレイクポイント 278

第 2節 トップページのスマホ対応 281

第 1項 メディアクエリとブレイクポイントの設定 281 第 2項 スマホレイアウトの準備 282 第 3項 ヘッダーとフッターの設定 285 第 4項 トップページ全体の設定 290

第 3節 下層ページのスマホ対応 296

第 1項 下層ページの設定 296

第 12章 ファイルのアップロードとWEBページ

の公開 301

第 1節 FTPアップロード 301

第 1項 サーバーとは 301 第 2項 FTP とは 301 第 3項 サーバーへの接続 302 第 4項 ファイルのアップロード 303 第 5項 ブラウザで確認する 304

ホームページ制作応用編

- 1 -

ホームページ制作応用編 目次

ホームページ制作応用編 目次 1

第 1章 完成例の確認とHTML文書の作成

3

第 1節 完成例の確認 3

第 1項 プロジェクトフォルダの作成と素材の追加 3 第 2項 ドリンクページ・コンタクトページの確認 8 第 3項 レスポンシブ対応の確認 11 第 4項 ドリンクページ・コンタクトページの確認（レスポンシブ対応） 17

第 2節 HTML文書の作成 19

第 1項 プロジェクトフォルダと素材の確認 19 第 2項 HTML文書の作成 21

第 2章 SVG データについて 27

第 1節 SVGデータを活用するメリット 27

第 1項 SVG データとは︖ 27 第 2項 SVG データの確認 28

第 2節 HTML文書への SVGの組み込み 29

第 1項 SVG データの記述とプレビュー 29

第 3章 CSSのコーディング 33

第 1節 サイト全体で使用する CSSの設定 33

第 1項 新規 CSS の作成 33 第 2項 CSS のリセットとサイズの初期値 34

第 1節 サイト全体で使用する CSSの設定 37

第 3項 Web フォントの導入 37 第 4項 CSS にWeb フォントを設定 39

第 2節 ページの詳細なデザイン 42

第 1項 さまざまなセレクタ 42 第 2項 ヘッダーとフッターの CSS コーディング 48

第 3節 トップページのコーディング 56

第 1項 キービジュアル 56 第 2項新着メニュー（フレックスボックス部分） 58 第 3項 新着メニュー（内容部分） 60

第 4項 店舗紹介部分 65 第 5項 ドリンクメニュー 67 第 6項 全体のレイアウトを整える 74

第 4節 サブページのコーディング 78

第 1項 サブページの準備 78 第 2項 ドリンクページの CSS コーディング 80 第 3項 コンタクトページの CSS コーディング 83

第 4章 CSS グリッドレイアウト 88

第 1節 CSSグリッドレイアウトとは 88

第 1項 CSS グリッドレイアウトとは 88 第 2項 CSS グリッドレイアウトのプロパティ 89 第 3項 CSS グリッドレイアウトの練習 91 第 4項 CSS グリッドレイアウトの設定 93

第 5章 高度な視覚表現 98

第 1節 リッチな視覚表現 98

第 1項 テキストを縦書きにするプロパティ 98 第 2項 背景に動画を使用する 100

第 2節 動的な表現 102

第 1項 マウスオーバーで画像を拡大する（プロパティの確認） 103 第 2項 マウスオーバーで画像を拡大する（コーディング） 104 第 3項 スライドアニメーションの設定（プロパティの確認） 107 第 4項 スライドアニメーションの設定（コーディング） 110 第 5項 スライドアニメーションの設定（jQuery の設定） 113 第 6項 ページ内リンクを滑らかにスクロールさせる（jQueryの設定） 117

第 3節 ドリンクページのアニメーション 119

第 1項 animation-fill-mode プロパティ 119 第 2項 画像を順番に表示させる（コーディング） 121

第 4節 コンタクトフォームでのアラート表示 125

第 1項 コンタクトフォームでのアラート表示① 125 第 2項 コンタクトフォームでのアラート表示② 129

第 6章 レスポンシブ対応 134

第 1節 レスポンシブ対応の準備 134

ホームページ制作応用編

- 2 -

第 1項 スマートフォンレイアウト完成例の確認 134 第 2項 レスポンシブ対応の準備 137 第 3項 ブレイクポイントの記述 140 第 4項 メニューの三本線の作成方法 141

第 2節 トップページのレスポンシブ対応 142

第 1項 キービジュアルとフッター 142 第 2項 新着メニュー 146 第 3項 店舗紹介部分 148 第 4項 ドリンクメニュー 151

第 3節 下層ページのレスポンシブ対応 154

第 1項 ドリンクページのレスポンシブ対応 154 第 2項 コンタクトフォームのレスポンシブ対応 157

第 4節 動的なメニューのコーディング 160

第 1項 グラデーションの設定方法 160 第 2項 メニューのデザイン 163 第 3項 ボタンクリック前の状態 166 第 4項 ボタンクリックに反応させる 169 第 5項 ボタンクリック後の状態 171

第 7章 ブラウザごとのデザインの差異を減らす

174

第 1節 ブラウザごとのデザインの差異を減らす

174 第 1項 フォーム部品の追加とデザインの確認 174 第 2項 ブラウザごとの外観のリセット 176 第 3項 フォームのスタイルを整える 179

第 8章 INTERNET EXPLORER への対

応 184

第 1節 INTERNET EXPLORERへの対応 184

第 1項 caniuse.com の使用 184 第 2項 セレクトボックスのボタンを非表示にする 187 第 3項 Internet Explorer 11への対応 188 第 4項 Internet Explorer 9への対応 1 - エミュレーションの使用 192 第 5項 Internet Explorer 9 への対応 2 - flexbox の対応 193 第 6項 Internet Explorer 9 への対応 3 - IE9 の CSS ハックを使用 195

第 9章 ブラウザのデバック 201

第 1節 デベロッパーツールでの検証 201

第 1項 デベロッパーツールとは 201 第 2項 デベロッパーツールでの検証 203 第 3項 デベロッパーツールでの HTML と CSS の編集 205

第 10章 SEO 210

第 1節 SEO 210

第 1項 SEO とは 210 第 2項 ページタイトルと description タグ 211 第 3項 見出しタグの確認と URL の構造 212 第 4項 ナビゲーションとアンカーテキスト 214