服部雄樹「HTML&CSSとWebデザインが1冊できちんと身につく本」

HTML&CSSとWebデザインが1冊できちんと身につく本の目次
chapter1 知っておきたいサイトとデザインのきほん知識
1-1. Webサイトのしくみについて知ろう
Webサイトの特性とは
複数のWebページが集まったものがWebサイト
Webサイトが表示されるしくみ
Webサイトが検索されるしくみ
Webサイトを構成するファイル

1-2. Webサイト制作とWebデザイン
サイトマップの作成_サイト作成のフロー①
ワイヤーフレームとカンプの作成_サイト制作のフロー②
デザインのコード化_サイト作成のフロー③
そもそもデザインとは
優れたWebデザインは使いやすい
閲覧者の環境によって変化するWebデザイン
学習ポイント ディレクトリ構造やファイル名の設定
学習ポイント Webデザインでよく聞く「UI」って何のこと?

1-3.コーディングについて
コーディングとは
文書構造とは
なぜ正しいHTMLを書く必要があるのか
文書構造を記述するHTML
配置や装飾を指定するCSS

1-4.Webページのパーツやデザインパターンについて知ろう
Webページの構成
ナビゲーションについて
レイアウトのパターンと選び方

Webデザインで知っておくべきこと
文字やテキストについて
文字コードについて理解しよう
色についての知識
Webデザインで使用する単位
ボックスモデルについて
Webデザインを取り巻く現在の状況

Chapter2 サイト制作の前に準備しておくこと
2-1.制作環境を整えよう
ファイルの拡張子を表示する
作業フォルダを作成する

2-2.Bracketsのインストールと使い方
テキストエディタとは
Bracketsとは
インストールしよう_Windows編
インストールしよう_Mac編
基本的な使い方を覚えよう
Bracketsの便利な機能
ショートカットを覚えよう

2-3.Google Chromeのインストールと使い方
本書の動作検証用ブラウザ
Google Chromeとは
インストールしよう_Windows編
インストールしよう_Mac編
コーディングを支援する機能
コーダー流コード表示の利用の仕方

2-4.実習用サンプルサイトを見てみよう
サンプルサイトの概要
全6ページのWebサイト

Chapter3 知っておきたいHTMLのきほんと書き方
3-1.HTMLのきほん知識
タグのきほん的な書き方
HTMLの構造は2つの大きな箱に分かれている
ページの基本情報をあらわすおもなタグ
ページの内容をあらわすおもなタグ
学習ポイント section要素とarticle要素の選び方
学習ポイント すべてのHTML要素で使用できる
属性「グローバル属性」
学習ポイント リンク指定や画像ファイルの位置指定で理解しておきたいパス

3-2.サンプルサイト共通のHTMLを書いてみよう
サンプルサイトの共通要素を確認する
HTML文書の基本構造を記述する
ページの基本構造を記述する
header要素内を記述する
コンテンツエリアを記述する
footer要素内を記述する
ブラウザでの表示を確認してみよう

3-3.見やすいコードとコメントの書き方
HTMLコードを見やすくする

Chapter4 知っておきたいCSSのきほん知識
見た目をデザインするCSS
CSSのきほん的な書き方
テキストを装飾するプロパティ
レイアウトデザインを設計するプロパティ
CSSを記述する場所について
学習ポイント スタイルが継承されるプロパティ
学習ポイント スタイル指定が競合した場合の優先順について

4-2.CSSを書いてみよう<ページの基本設定を記述する>
サンプルサイト共通ページのレイアウト
CSSの記述前に準備すること
ベースになるスタイルを設定する
ブラウザの既定スタイルを解除する
リンクの書式と装飾を設定する
学習ポイント 要素の状態を指定する「擬似クラス」
学習ポイント CSSのコメントについて

4-3.CSSを書いてみよう<レイアウトの詳細を記述する>
ヘッダーのスタイルを指定する
コンテンツエリアのレイアウトを整える
フッターのスタイルを指定する
学習ポイント Webサイトの横幅サイズ
学習ポイント class属性にCSSを指定する
学習ポイント 要素を右または左に寄せて配置するfloat
学習ポイント id属性にCSSを指定する

4-4.フォントについて知ろう
フォントの基礎知識
Webフォントについて
サンプルサイトのフォントを指定する
学習ポイント 複数のプロパティをまとめて指定できるショートハンドプロパティ

Chapter5 フルスクリーンページ制作で学ぶこと
フルスクリーンページ制作で学べるHTML&CSS
Webサイトのトップページのデザインを考える
フルスクリーンレイアウトの設計について
フルスクリーン画像を選ぶときのポイント

5-2.フルスクリーンページのHTMLを書いてみよう
フルスクリーンページの文書構造を確認する
index.htmlの基本部分を作成する
見出しを入力する
本文を入力する
ボタンを設定する
学習ポイント id属性とclass属性の使い分け
学習ポイント 長い属性値の記述方法

5-3.フルスクリーンページのCSSを書いてみよう
フルスクリーンページのスタイリングを確認する
見出しを装飾する
見出しの位置を調整する
本文を装飾する
ボタンを装飾する
フッターの要素を左に寄せる
フルスクリーンページのための背景画像の設定方法
学習ポイント 子孫セレクタの使いこなし
学習ポイント 高さや幅を指定できる要素とできない要素がある
学習ポイント 記述が重複したときは1つにまとめる

Chapter6 シングルカラムページを制作する
6-1.シングルカラムページ制作で学ぶこと
シングルカラムページ制作で学べるHTML&CSS
シングルカラムレイアウトのメリットデメリット
シングルカラムでWebページをデザインする際の注意点

6-2.シングルカラムページのHTMLを書いてみよう
シングルカラムページの文書構造を確認する
about.htmlの基本部分を作成する
コンテンツエリアを作成する
見出しを入力する
プロフィールセクションを作成する
経歴セクションを作成する
学習ポイント 特定の要素に複数のクラス名を設定する
学習ポイント div要素とspan要素の使い分け
学習ポイント 表を作るためのタグを使いこなそう

6-3.シングルカラムページのCSSを書いてみよう
シングルカラムページのスタイリングを確認する
メインビジュアルを設定する
コンテンツエリアのスタイルを設定する
見出しを装飾する
プロフィールセクションのレイアウト作成する
経歴セクションのレイアウトを調整する
表を装飾する
フッターエリアのスタイルを設定する
学習ポイント 要素に対して文字や画像を追加できる「擬似要素」
学習ポイント floatプロパティを使用すると親要素の高さがなくなる?

6-4.スタイルシートを見なおそう
indexページの表示を確認する
index.htmlに影響を与えている箇所を修正する

Chapter7 2カラムページを制作する
7-1.2カラムページ制作で学ぶこと
2カラムページ制作で学べるHTML&CSS
ユーザーが操作する部分はわかりやすさを最優先に

7-2.2カラムページのHTMLを書いてみよう
2カラムページの文書構造を確認する
portfolio.htmlの基本部分を作成する
コンテンツエリアを作成する
メインエリアのコンテンツを作成する
サイドバーのメニューを作成する

7-3.2カラムページのCSSを書いてみよう
2カラムページのスタイリングを確認する
メインビジュアルを設定する
メインエリアを左寄せにする
サイドバーを右寄せにする
マウスを乗せたリンク画像を半透明にする
サイドバーのメニューを装飾する
学習ポイント カラム幅の算出について

Chapter8 グリッドレイアウトページの制作と動画の埋め込み
8-1 グリッドレイアウトページ制作で学ぶこと
グリッドレイアウトページ制作で学べるHTML&CSS
整列された印象を与えるグリッドレイアウト
グリッドレイアウトはさまざまな応用が可能

8-2.グリッドレイアウトページのHTMLを書いてみよう
グリッドレイアウトページの文書構造を確認する
photograph.htmlの基本部分を作成する
コンテンツエリアを作成する
メインエリアのコンテンツを作成する
学習ポイント ページ内リンクの設定

8-3. グリッドレイアウトページのCSSを書いてみよう
グリッドレイアウトページのスタイリングを確認する
メインビジュアルを設定する
画像ギャラリーを作成する
学習ポイント 特定の条件に当てはまる要素を指定する擬似クラス

8-4.YouTube動画を埋め込んでみよう
動画を埋め込むページの制作で学べるHTML
video.htmlの制作準備をする
YouTube動画を埋め込む

Chapter9 問い合わせページを制作する
9-1. 問い合わせページ制作で学ぶこと
問い合わせページ制作で学べるHTML&CSS
GoogleMapsを埋め込むメリット
問い合わせフォームはHTMLだけでは作動しない

9-2.問い合わせページのHTMLを書いてみよう
問い合わせページの文書構造を確認する
contact.htmlの基本部分を作成する
コンテンツエリアを作成する
アクセスセクションを作成する
GoogleMapsを埋め込む
フォームセクションを作成する_テキスト入力欄
フォームセクションを作成する_選択入力欄
送信ボタンを作成する
コンタクトページを仕上げる
学習ポイント form関連タグの基本を理解しよう
学習ポイント 定義リストを使いこなす

9-3.問い合わせページのCSSを書いてみよう
問い合わせページのスタイリングを確認する
メインビジュアルを設定する
アクセスセクションのレイアウトを作成する
フォームセクションを装飾する
フォームパーツを装飾する
送信ボタンを装飾する
入力必須の項目を設定する
学習ポイント マウスポインタの形状を指定する

Chapter10 マルチデバイス対応ページを作成する
10-1. マルチデバイスに対応させよう
レスポンシブデザインとは
デザインカンプの作成と完成イメージの確認

10-2.レスポンシブデザインの準備をしよう
Webページの表示領域を設定する「viewport」
viewportを正しく記述する
表示が切り替わる地点「ブレイクポイント」
画面の大きさに合わせてCSSを切り替える「メディアクエリ」
メディアクエリを記述する

10-3.レスポンシブデザインのCSSを書いてみよう
ブラウザでの表示確認の方法
メディアクエリの{}内にCSSを記述する
header要素のレイアウトを調整する
メインエリアのレイアウトを調整する
画像を調整する
サイドバーのレイアウトを調整する
学習ポイント レスポンシブデザインでのサイズ指定
学習ポイント 要素を一定のサイズ内に納めるには

appendix ポートフォリオサイトをオリジナルに改変してみよう
HTMLタグ/CSSプロパティ一覧
牽引

コメント