Learning Web Design

実習で身につく!

新しいWebデザインの教科書

基礎から学べるHTML&CSSデザイン

2018年3月19日に発売された書籍「実習で身につく!新しいWebデザインの教科書~基礎から学べるHTML&CSSデザイン~」（発行：エスシーシー）の実習課題を確認できるサイトです。

第1章はインターネットとWebデザインの概論です。実習はありません。

エディターで「Sample-01.html」を開いてください。p要素でマークアップされた文章が記述されています。見出しに相当する部分にはem要素でタグ付けしていますが、文章全体は1つの段落になっています。

この文章を適切な「見出し」レベルと「段落」に分けてください。見出しレベルのh1〜h4要素とp要素を追加してHTMLマークアップを完成させましょう。

Sample-01.html

Sample-01-Complete.html

エディターで「Sample-02」フォルダーの「Sample-02.html」を開いてください。見出しと2つの段落が表示されています。一番上には「墓地で暮らす猫たち。」というタイトルがh1要素でマークアップされています。まず最初にこのタイトルを画像「title.png」に置き換えてください。次に2行目の「墓地でくつろぐ猫」を写真「photo.jpg」で表示し、3行目の文をキャプションにしましょう。

Sample-01.html

Sample-01-Complete.html

photo.jpg

title.png

エディターで「Sample-03」フォルダーの中に入っている「Sample-03.html」を開いてください。すでに基本ページのマークアップは完了しています。「Sample-03.html」をブラウザーで開いて確認してみましょう。最上部にリスト、その下に3つの項目が配置されています。

まず、リストから項目へのリンクを指定してください。次に各見出しの下にある「ページのトップに戻る」にリンクを指定しましょう。リストで項目をクリックすると、その項目が表示され、トップに戻るをクリックするとリスト表示に戻る仕組みをつくってください。

最後に、最初の項目と3番目の項目にそれぞれPDFのダウンロードリンクと、ZIPのダウンロードリンクを指定してください。

Sample-03.html

release.zip

release.pdf

Sample-03-Complete.html

release.zip

release.pdf

エディターで「Sample-04.html」を開いてください。「ネコ科動物の種類」のデータが段落で記述されています。この情報をHTMLのテーブルデータのタグを使って、分かりやすい表組みにしてください。「一般名　学名　系統」が項目の見出しになります。

ライオンとトラは同じ「ヒョウ系統」なので、上下のセルを結合して1つのセルで表現してください。

Sample-04.html

Sample-04-Complete.html

エディターで「Sample-05.html」を開いてください。ユーザー登録のページに必要な項目が段落で表示されています。このページをフォームのタグでマークアップしていきましょう。

名前とメールアドレスは「1行の入力フォーム」、性別と使用しているスマートフォン／携帯電話の選択は「チェックボックス」、ご意見・ご感想は「複数行のテキスト入力フォーム」、そして登録ボタンとリセットボタンをそれぞれマークアップしてください。

Sample-05.html

Sample-05-Complete.html

エディターで「Sample-06.html」を開いてください。h1要素でマークアップされたページタイトルしか配置されていませんが、すでに完成しているWebページです（次の節で作成する課題です）。

このHTMLからCSSのスタイルをすべて取り出して、新規のCSSファイルを作成してください。「Sample-06-Complete.css」という名前のCSSファイルにして、HTMLファイルで読み込むコードを追加しましょう。

また、念のためバリデーションサービスでCSSを「検証」しておいてください。

Sample-06.html

Sample-06-Complete.html

Sample-06-Complete.css

1. エディターで「Sample-07.html」を開いてください。
2. body 要素に背景色（#8cf）を指定してください。
3. h1 要素に幅360px と8 ピクセルの枠線（濃い青の実線）を指定します。
4. 続けて内側の余白（padding）を指定しましょう。
5. ページ全体の余白（margin とpadding）とページタイトルの余白（margin）を0 にします。これでページタイトルのボックス全体がページ左上に配置されます。
6. h1 要素に背景色「白（#fff）」を追加してください。
7.  h1 要素に外側の余白（margin）を指定します。

Sample-07.html

Sample-07-step01.html

Sample-07-step02.html

Sample-07-step03.html

Sample-07-step04.html

Sample-07-step05.html

Sample-07-Complete.html

エディターで「Sample-08.html」を開いてください。シンプルなWebページですが、head要素内でCSSファイルの「normalize.css」を読み込んでいます。つまり「Normalize.css」を適用したノーマライズされたページになっています。デフォルトCSSより多少調整されたデザインになっていますが、自由にスタイルを上書きしてさらに見やすいページに変更してみましょう。

Sample-08.html

Sample-08-Complete.html

normalize.css

ブラウザーで「Sample-09.html」を開いてください。3つの段落が1つのボックスの中に配置されています。一番上の段落は適切な指定で読みやすい行間になっていますが、中央の段落は空き過ぎ、下の段落は行間が狭過ぎてかなり読みづらい文章になっています。

それではエディターで「Sample-09.html」を開いてください。head要素内に記述されているCSSを見て、「値を1箇所だけ」修正して下図の完成ページと同じ表示にしてください。

Sample-09.html

Sample-09-Complete.html

ブラウザーで「Sample-10」フォルダの中の「Sample-10.html」を開いてください。3つの段落がページに配置されています。ページの背景は真っ白ですが、「Sample-10」フォルダに入っている背景画像「background-pat.png」（横長のパターン画像）と「background-pat-2.png」（半透明のテクスチャ画像）を使って、完成ページのようなビジュアルデザインに近づけてください。

Sample-10.html

Sample-10-Complete.html

background-pat.png

background-pat-2.png

ブラウザーで「Sample-11」フォルダの中の「Sample-11.html」を開いてください。実習課題10と同じ3つの段落で構成されたページが表示されます。フォルダーに入っている背景画像「backg-color-bar.png」「backg-color-bar2.png」と枠線の指定を追加して、完成ページに近づけてください。

Sample-11.html

Sample-11-Complete.html

backg-color-bar.png

backg-color-bar2.png

Sample-12.html

Sample-12-Complete.html

Sample-13.html

Sample-13-Complete.html

photo.jpg

Sample-14.html

Sample-14-Complete.html

エディターで「Sample-15.html」を開いてください。h1要素でマークアップされたタイトルだけのページです。このHTMLにメディアクエリを追加して「幅が640px以上」ならタイトルの色を緑（Green）に、「幅が960px以上」なら濃いオレンジ（DarkOrange）、「幅が1160px以上」なら濃いピンク（DeepPink）に変化させてください。さらに、ウィンドウの幅が広いほどタイトルの文字サイズが小さくなるように指定してみましょう。

Sample-15.html

Sample-15-Complete.html

Sample-16.html

紙とペンを用意してください。紙はA4以上を推奨します。まず、ボックスだけのワイヤーフレームを描いておきます。ヘッダー、コンテンツ、フッターの大きな構成要素を描き、コンテンツの中にメインとサブを置きます。そのワイヤーフレームを2枚コピーして、1枚目にはペンで見出しや本文、図版などをラフに描いてください。これがラフイメージになります。

もう1枚のコピーには幅の数値を追加しましょう。コンテンツを囲む枠線の太さは1ピクセル、パディングは左右それぞれ20ピクセル、マージンは左28ピクセルと右10ピクセル（サブコンテンツの場合は左右の値が逆になります）を足して、コンテンツ全体の幅を算出してください。

Sample-18.htmlをエディターで開いてください。基本のマークアップが完了したHTMLファイルです。まず、メインコンテンツ全体をarticle要素でグループ化し、メインコンテンツ2つの段落をsection要素でそれぞれまとめてください。

記事内の写真とキャプションは、figure要素とfugcaption要素でマークアップし、article要素の外側にmain要素でボックスを作っておきます。サブコンテンツとなる用語集はaside要素でまとめます。用語集の項目はul要素、li要素でリスト表示してください。

詳細はこの節で解説していますので、復習を兼ねた実習になります。

Sample-18.html

Sample-18-Complete.html

photo-1.jpg

photo-2.jpg

課題No.18の続きになります。link要素を追加してCSSファイルを読み込めるようにしておいてください。エディターでCSSファイルを作成して、この節で解説しているとおりにスタイルを順番に記述してください。

Sample-19.html

Sample-19-Complete.html

Sample-19-Complete.css

課題No.19の続きになります。メインコンテンツとサブコンテンツの枠線と内側の余白（パディング）の値を変更しても、レイアウトが崩れないように注意してください。box-sizingプロパティを使用しましょう。

Sample-20.html

Sample-20.css

Sample-20-Complete.html

Sample-20-Complete.css

photo-1.jpg

photo-2.jpg

課題No.20の続きになります。そのままSample-18.htmlを使ってください（この課題から開始する場合はSample-21.htmlが用意されています）。

まず、ブレークポイントの位置を決めましょう。ここでは「800px以上 (min-width: 800px) 」と「960px以上 (min-width: 960px) 」に設定しましたので、この2つの数値以外にしてください。780pxでも820pxでもかまいません。記事写真の（見た目の）大きさの調整も変わってきますので、よく考えて対応してください。

Sample-21.html

Sample-21.css

Sample-21-Complete.html

Sample-21-Complete.css

photo-1.jpg

photo-2.jpg

課題No.21の続きになります。そのままSample-18.htmlを使ってください（この課題から開始する場合はSample-22.htmlが用意されています）。新しいブレークポイントを追加して、段組み表現（マルチカラムレイアウト）を追加しましょう。サンプルでは「1120px以上」を追加していますが、この数値は自分で決めてください。また、段と段の間隔や区切り線も自分で考えてください。

デザインの解釈はWebデザイナーが決めていきますので、もっとよいものになるように考えていきましょう。

Sample-22.html

Sample-22.css

photo-1.jpg

photo-2.jpg

エディターで「Sample-24.html」を開いてください。h1要素でマークアップされたタイトルしか記述されていません。テキストファイル「YouTube-Code.txt」には、YouTubeで取得した埋め込み用のコードが記述されていますので、コピーして「Sample-24.html」に貼り付けてください。完成ページのように、ページの中央に配置し、ビデオには枠線を付けましょう。

Sample-24.html

YouTube-Code.txt

Sample-24-Complete.html

Sample-25.html

Sample-25-Complete.html

ブラウザーで「Sample-26.html」を開いてください。ページタイトル「メリークリスマス！ | 私たちの日本史サイトへようこそ！」とリード文が表示されています。このページタイトルをjQueryで「ハッピーニューイヤー！ | 私たちの日本史サイトへようこそ！」に上書きしてみましょう。さらに、タイトルの色もマゼンタから明るい青に変更してください。

エディターで「Sample-26.html」を開いて、jQueryのコードを追加しましょう。

Sample-26.html

Sample-26-Complete.html

jquery.js

スライドショー「bxSlider」のオプション機能を活用します。

ブラウザーで「Sample-27.html」を開いてください。最小限の機能しかないシンプルなスライドショーが表示されます。ウィンドウを広げると右側に余白ができますので、まずスライドショーの幅を固定します。次に自動再生の機能を追加してみましょう。

エディターで「Sample-27.html」を開いてください。用意されているオプションを使って機能を追加していきます。

Sample-27.html

Sample-27-Complete.html

jquery-3.2.1.min.js

jquery.bxslider.min.css

jquery.bxslider.min.js

photo-01.jpg

photo-02.jpg

photo-03.jpg

photo-04.jpg

photo-05.jpg

スライドショー「bxSlider」のオプション機能を活用します。

ここでは画像の切り替えに「フェード」効果を適用できるオプション、表示される画像にキャプションを付加できるオプションを指定しましょう。エディターで「Sample-28.html」を開いてください。

Sample-28.html

Sample-28-Complete.html

jquery-3.2.1.min.js

jquery.bxslider.min.css

jquery.bxslider.min.js

photo-01.jpg

photo-02.jpg

photo-03.jpg

photo-04.jpg

photo-05.jpg

ブラウザーで「Sample-29.html」を開いてください。Part-5で作成したレスポンシブWebデザインのページです。左カラムの見出し（次世代のデジタル本と電子書籍デザイナーの役割）の下に、addthisで取得したソーシャルボタンのコードを組み込んでみましょう。

エディターで「Sample-29.html」を開いて、完成ページと同じようにレスポンシブに対応させてくだい。

Sample-29.html

Sample-29.css

Sample-29-Complete.html

Sample-29-Complete.css

photo-1.jpg

photo-2.jpg

FTPツール「FFFTP」を使って素材ファイルをサーバーに転送してください。転送完了後、HTMLファイル「Sample.html」の名前を「index.html」に変更して、ブラウザーで確認しましょう。

例：URLが「http://ABC.xxx/mysite/Sample.html」だった場合「index.html」に変更するとURLは「http://ABC.xxx/mysite/」になります。

とても簡単な作業ですが、サーバー内の操作を「体験する」ことが目的です。「FFFTP」以外のFTPツールやmacOSでの作業でも応用できますので、パソコン上の疑似環境だけではなく「FTPツールによる遠隔操作」を体験してください。

Sample.html

Sample-22.css

photo-1.jpg

photo-2.jpg

更新日：2018年3月10日