概要
webサイト制作者を目指す人が必ず習得しなければならない言語「HTMLとCSS」の記述と,サイト制作の基礎知識から公開・管理方法までを15レッスンで解説。HTMLパートはコーディングの基本から画像とリンク,リストとナビゲーション,テーブルおよびフォームのマークアップ方法を,CSSパートでは文字のスタイリングからレイアウト手法までを丁寧に解説。ダウンロードした実習ファイルに記述することで,細かくステップ分けした各単元の内容を手を動かしながら学びます。専門学校の教壇に立つ著者陣が実際の講義内容を体系立て,さらに学校実施のテストと同等の練習問題を各レッスンの章末に用意した,HTML5とCSS3の教科書です。
こんな方におすすめ
- フロントエンドエンジニアやWebデザイナー志望者
- Webデザインやサイト制作について勉強したい人
目次
Lesson01 wwwやwebサイト制作の基本を理解しよう
- 1-1 webサイトが表示される仕組み
- 1-2 webサイト制作のキーワード
- 1-3 webサイトに使用される言語
- 1-4 コーディングに必要なアプリケーション
- 1-5 webサイトに使用される画像
- 1-6 エディタの使い方を学ぶ
- lesson01─ 練習問題
Lesson02 HTMLコーディングの基本を学ぼう
- 2-1 HTMLとは
- 2-2 マークアップとは
- 2-3 タグと要素と属性
- 2-4 head要素とbody要素
- 2-5 head要素の中に入る要素
- 2-6 webサイトを構成するファイルの管理
- 2-7 HTMLファイルを作成して保存する
- 2-8 webサイトの全体像を見てみる
- lesson02─ 練習問題
Lesson03 画像表示とリンクをマークアップしよう
- 3-1 画像を表示する
- 3-2 リンクを設定する
- 3-3 パスを指定する
- lesson03─ 練習問題
Lesson04 リストとナビゲーションをマークアップしよう
- 4-1 順不同リストを作る
- 4-2 順序付きリストを作る
- 4-3 定義リストを作る
- 4-4 リストでナビゲーションを作る
- lesson04─ 練習問題
Lesson05 表組みをマークアップしよう
- 5-1 シンプルな表組みを作る
- 5-2 セルを結合する
- 5-3 より高度な表組みを作る
- lesson05─ 練習問題
Lesson06 フォームをマークアップしよう
- 6-1 フォームの基本を身につける
- 6-2 入力形式に合わせたフォームパーツを作る
- 6-3 お問い合わせフォームを作る
- lesson06─ 練習問題
Lesson07 CSSコーディングの基本を学ぼう
- 7-1 CSSとは
- 7-2 CSSの基本ルールを身につける
- 7-3 HTMLにCSSを組み込む3つの方法
- 7-4 よく使うセレクタを知る
- 7-5 特殊なセレクタ「疑似クラス」と「疑似要素」
- lesson07─ 練習問題
Lesson08 見出しや段落をスタイリングしよう
- 8-1 文字サイズを調整する
- 8-2 行間を調整する
- 8-3 書体を指定する
- 8-4 文字の色を指定する
- 8-5 見出しを背景色で装飾する
- 8-6 見出しを線で装飾する
- 8-7 見出しの先頭を装飾する
- 8-8 段落のスタイルを整える
- lesson08─ 練習問題
Lesson09 CSSレイアウトの基本を学ぼう
- 9-1 ボックスモデルを理解する
- 9-2 余白を調整する
- 9-3 ボックスサイズ(幅・高さ・余白)を計算する
- 9-4 webサイトの基本レイアウト
- lesson09─ 練習問題
Lesson10 ページ全体をレイアウトしてみよう
- 10-1 4つのwebレイアウトパターン
- 10-2 段組みでレイアウトする
- 10-3 自由に要素を配置する
- 10-4 要素を回り込ませる
- lesson10─ 練習問題
Lesson11 リストとナビゲーションをスタイリングしよう
- 11-1 リストの装飾について学ぶ
- 11-2 ナビゲーションを装飾する
- 11-3 グローバルナビゲーションを作る
- 11-4 パンくずリストを作る
- lesson11─ 練習問題
Lesson12 表をスタイリングしよう
- 12-1 表の装飾について学ぶ
- 12-2 横線・縦線のみの表を作る
- 12-3 さまざまな装飾の表を作る
- lesson12─ 練習問題
Lesson13 フォームをスタイリングしよう
- 13-1 フォームの装飾について学ぶ
- 13-2 使いやすい装飾を施す
- 13-3 ボタンをデザインする
- lesson13─ 練習問題
Lesson14 webサイト制作を実践してみよう
- 14-1 コーディングの準備をする
- 14-2 トップページのHTMLを記述する
- 14-3 トップページのCSSを記述する
- 14-4 ご利用案内ページを作る
- 14-5 交通アクセスページを作る
Lesson15 webサイトを公開しよう
- 15-1 サーバーとドメインを準備する
- 15-2 FTPソフトでアップロードする
- 15-3 webサイトのデータをチェックする
- 15-4 webサイトを管理する
サポート
ダウンロード
以下のファイルをダウンロードできます。圧縮ファイルをダウンロードしていただき,適宜解凍してご利用ください。
以下の手順にてダウンロードをお願いします。
- 下の枠内に「ID」と「パスワード」を入力してください。本書P.006に記載されている「ID」を[ID]欄に,「パスワード」を[パスワード]欄にそれぞれ入力してください。
- 「ダウンロード」をクリックしてください。
コード改訂版をアップロードしました。2019年7月30日以前にダウンロードされた方は,再度ダウンロードしていただけますよう,お願いいたします。
- ダウンロードファイル訂正表(downloadfile_teiseilist.pdf)
正誤表
本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。
初版 第3刷までの正誤
P.059 ページやファイルをつなげる「a要素」 本文7行目
誤 |
aタグは、href属性を必ず記述します。
|
正 |
aタグは、href属性を記述します。
|
初版 第2刷までの正誤
P.044 【書式】OGPの記述 4行目
誤 |
<meta property="og:image" content="サムネイル画像のURL"">
|
正 |
<meta property="og:image" content="サムネイル画像のURL">
|
P.160 STEP01「書体を指定する」本文2行目
誤 |
「font-family:"Arial","MS P明朝"」のように値に書体名を用いる~
|
正 |
「font-family: Arial,"MS P明朝"」のように値に書体名を用いる~
|
P.161 【記述例】見出し文字の書体を指定する 3行目
誤 |
h1 { font-family: "Arial","MS P明朝"; }
|
正 |
h1 { font-family: Arial,"MS P明朝"; }
|
P.188 【記述例】上下左右のパディングをまとめて指定する
誤 |
h1 { paddng: 20px 10px; }
h1 { paddng: 20px 10px 20px; }
h1 { paddng: 20px 10px 20px 10px; }
|
正 |
h1 { padding: 20px 10px; }
h1 { padding: 20px 10px 20px; }
h1 { padding: 20px 10px 20px 10px };
|
P.189 外側の余白サイズ指定【記述例】および【記述例】
誤 |
セレクタ { margin-top: 数値と単位 };
h1 { margin-bottom: 10px };
|
正 |
セレクタ { margin-top: 数値と単位 ;}
h1 { margin-bottom: 10px ;}
|
P.194 表「width・heightのサイズに含まれるプロパティの違い」3列見出し
誤 |
box-sizingの場合
|
正 |
border-boxの場合
|
P.155 「文字サイズの単位」本文ハイライト部分
誤 |
web制作の現場でよく使われるのは「em」「px」「%」などの相対単位です。
|
正 |
web制作の現場でよく使われるのは「em」「px」「%」などの単位です。
|
P.224 Q3の解答選択肢
誤 |
③padding: 10x 0px;
|
正 |
③padding: 10px 0px;
|
P.94 【書式】table要素とtableの子要素
誤 | <th>見出しセル<th>
<td>通常のセル<td>
<td>通常のセル<td>
|
---|
正 | <th>見出しセル</th>
<td>通常のセル</td>
<td>通常のセル</td>
|
P.98 【書式】colspan属性の書き方
誤 | <td>通常のセル<td>
<td>通常のセル<td>
<td colspan=2>結合するセル<td>
|
---|
正 | <td>通常のセル</td>
<td>通常のセル</td>
<td colspan=2>結合するセル</td>
|
P.101 【書式】rowspan属性の書き方
誤 | <td>通常のセル<td>
<td rowspan=2>結合するセル<td>
<td>通常のセル<td>
|
---|
正 | <td>通常のセル</td>
<td rowspan=2>結合するセル</td>
<td>通常のセル</td>
|
P.104 【書式】thead要素・tbody要素・tfoot要素の書き方
誤 | <th>見出しセル<th>
<th>見出しセル<th>
<th>見出しセル<th>
<th>見出しセル<th>
<td>通常のセル<td>
<td>通常のセル<td>
|
---|
正 | <th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
<td>通常のセル</td>
<td>通常のセル</td>
|
P.108 【書式】caption要素の書き方
誤 | <th>見出しセル<th>
<td>通常のセル<td>
|
---|
正 | <th>見出しセル</th>
<td>通常のセル</td>
|