ウェブデザイン演習第12回

2022.12.13
ウェブデザイン演習

今回はページのメインブロックである<article></article>セクション、その内側に、ページのメインコンテンツを表示する<div id=”main”></div>ブロック、そしてサイド要素である<aside><aside>ブロックのコーディングを行います。

1つ目のデザインのHTML・CSSコーディングは今回が最終回になります。コーディング以外にも重要な部分があったので再確認の意味を込めて振り返りを行います。

ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。

Visual Studio Codeの起動と日本語化。

Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。

この記事の目次

1 HTMLの記述（<article></article>セクションの<div id=”main”></div>編）
- 1.1 index.htmlに<div class=”container”></div>の追加
- 1.2 index.htmlに<div id=”main”></div>の追加
2 CSSの記述（<article></article>セクションの<div id=”main”></div>編）
3 HTMLの記述（<article></article>セクションの<aside></aside>編）
- 3.1 index.htmlに<aside></aside>の追加
  - 3.1.1 <ul></ul>
4 CSSの記述（<article></article>セクションの<aside></aside>編）
5 課題の提出
- 5.1 「html」フォルダをzip形式で圧縮
- 5.2 zip圧縮したファイルをフォームから送信
6 世の中にはもっとおもしろくてわくわくするコーディング案件がある
7 基礎HTML・CSSコーディングの振り返り

HTMLの記述（<article></article>セクションの<div id=”main”></div>編）

index.htmlに<div class=”container”></div>の追加

まずは編集中のindex.htmlを開き、<article></article>の間に1行あけて、ハイライトされている3・4行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
    <article>
      <div class="container">
      <!-- /.container --></div>
    </article>
<!-- 〜下部省略〜 -->

今回も中の要素を中央寄せするために、<div class=”container”></div>を追記します。次は中央揃えしたブロックの中で右寄せ・左寄せする対象である<div id=”main”></div>ブロックと<aside></aside>ブロックの記述をしましょう。

index.htmlに<div id=”main”></div>の追加

次に、先ほど記述した<div class=”container”>の下に1行あけて、ハイライトされている4・5行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
    <article>
      <div class="container">
        <div id="main">
        <!-- /#main --></div>
      <!-- /.container --></div>
    </article>
<!-- 〜下部省略〜 -->

<div id=”main”></div>はページのメインコンテンツの中でも最重要部分の本文を記述するブロックです。見本ページでいうと左側の記事のある白いブロックですね。

<section></section>

次に、先ほど記述した<div id=”main”>の下に1行あけて、ハイライトされている3・4行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<section></section>は記事単体で使っています。後述する記事タイトルと犬の画像、本文部分を包括したブロックになります。今回のコーディングでは記事が一つの状態ですが、記事数が増えると<section></section>が増えていくという作りを想定しています。

<h2></h2>

次に、先ほど記述した<section>の下に1行あけて、ハイライトされている4行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
            <h2>記事AAA</h2>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<h2></h2>は見本ページでいう「記事AAA」と書いている記事タイトルのブロックです。

<p></p>

次に、先ほど記述した<h2></h2>の下に1行あけて、ハイライトされている5〜9行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
            <h2>記事AAA</h2>
            <p><a href="./img/dog.jpg"><img src="img/dog.jpg" /></a></p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<p></p>は文章の一つの段落を意味します。

<p>－HTMLタグリファレンス

参考ページにありますが、段落を構成するのではなく、改行のみを行うのであれば<br />を使います。

CSSの記述（<article></article>セクションの<div id=”main”></div>編）

<article></article>の追加

main.cssに編集画面を切り替えます。

まず<article></article>の内容を追記します。#slider {〜}と、footer {〜}の間を1行改行し、ハイライトされている8〜10行目・12〜14行目のコードを記述してください。

main.css

/* 〜上部省略〜 */
#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

article {
  padding: 30px 0 130px;
}

article .container {
  overflow: hidden;/* main と aside を横並びにするために追加 */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<article></article>はメインコンテンツ部分です。さきほどのindex.htmlの記述の際には内側に<div class=”container”></div>、さらに内側に<div id=”main”></div>を記述しました。

<article></article>セクション内で<div class=”container”></div>を使って中央揃えを行い、<div id=”main”></div>ブロックを左に、<aside></aside>ブロックを右に寄せたものが見本ページです。

<div id=”main”></div>の追加

次に<div class=”container”></div>の中の左側、<div id=”main”></div>の指定です。
先ほど記述したarticle .container {〜}の下を1行改行し、ハイライトされている6〜9行目のコードを記述してください。

main.css

/* 〜上部省略〜 */
article .container {
  overflow: hidden;/* main と aside を横並びにするために追加 */
}

#main {
  float: left;/* mainを左寄せに*/
  width: 720px;
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<div id=”main”></div>は見本サイトでいう左側の記事の部分です。ここでは「左寄せ（float: left;）」と「横幅（width: 720px;）」を指定していますね。

<section></section>の追加

次に<div id=”main”></div>の内側、<section></section>の指定です。先ほど記述した#main {〜}の下を1行改行し、ハイライトされている7〜11行目のコードを記述してください。

main.css

/* 〜上部省略〜 */
#main {
  float: left;
  width: 720px;
}

#main section {
  overflow: hidden;/* section内に書くコンテンツ（画像など）によっては左寄せor右寄せでfloatを使う事があるので追加 */
  padding: 30px;/* 内側に30pxの余白をとる */
  background: #fff;/* sectionに背景色#fffをつける */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<section></section>はそれ自体が記事一つ分のブロックになります。記事が二つ、三つと増えるたびに、この<section></section>がその分増えていくと考えてください。

<h2></h2>の追加

次に<section></section>の内側、<h2></h2>の指定です。先ほど記述した#main section {〜}の下を1行改行し、ハイライトされている8〜14行目のコードを記述してください。

main.css

/* 〜上部省略〜 */
#main section {
  overflow: hidden;
  padding: 30px;
  background: #fff;
}

#main section h2 {
  margin: 0 0 20px;/* 下に引いた下線からの距離 */
  padding: 0 0 10px;/* 下に引いた下線までの距離 */
  font: normal 30px/40px Meiryo , sans-serif;
  color: #5b0400;
  border-bottom: 1px dotted #5b0400;/* h2の下に点線の下線を引く */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<h2></h2>は記事のタイトルになります。「hタグ（heading）」はタイトル部分をマークアップし、ページの内容を伝える非常に重要な要素です。

<p></p>の追加

<h2></h2>がタイトルなら、<p></p>は記事の本文です。先ほど記述した#main section h2 {〜}の下を1行改行し、ハイライトされている10〜13行目のコードを記述してください。

main.css

/* 省略 */
#main section h2 {
  margin: 0 0 20px;
  padding: 0 0 10px;
  font: normal 30px/40px Meiryo , sans-serif;
  color: #5b0400;
  border-bottom: 1px dotted #5b0400;
}

#main section p {
  margin: 0 0 20px;/* 段落と段落の間に距離を取るために下にmarginをとる */
  font: normal 14px/24px Meiryo , sans-serif;
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 省略 */

<p></p>タグで段落をマークアップします。

HTMLの記述（<article></article>セクションの<aside></aside>編）

index.htmlに<aside></aside>の追加

再びindex.htmlに編集画面を切り替えます。

まず記述するのは右側のサイド部分<aside></aside>です。先ほど記述した<div id=”main”>の閉じタグの</div>の下を1行改行し、ハイライトされている13・14行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
      <div class="container">
        <div id="main">
          <section>
            <h2>記事AAA</h2>
            <p><a href="./img/dog.jpg"><img src="img/dog.jpg" /></a></p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
          </section>
        <!-- /#main--></div>
        <aside>
        </aside>
      <!-- /.container --></div>
<!-- 〜下部省略〜 -->

<aside></aside>はメインコンテンツ内でもメインの記事の内容から切り離しても問題のないコンテンツが配置されることが多く、ブログなどではサイドバー部分に用いられることが多くなります。

参考URL：<aside>－HTML5タグリファレンス

<ul></ul>

先ほど記述した<aside></aside>の下を1行改行し、ハイライトされている3〜20行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
        <aside>
          <ul>
            <li>
              <h2>最近の投稿</h2>
              <ul>
                <li><a href="">記事AAA</a></li>
                <li><a href="">記事BBB</a></li>
                <li><a href="">記事CCC</a></li>
              </ul>
            </li>
            <li>
              <h2>アーカイブ</h2>
              <ul>
                <li><a href="">2014年12月</a></li>
                <li><a href="">2014年11月</a></li>
                <li><a href="">2014年10月</a></li>
              </ul>
            </li>
          </ul>
        </aside>
<!-- 〜下部省略〜 -->

<nav></nav>や<footer></footer>の時にも出てきていますが、<ul></ul>は<li></li>というリスト要素を表示させるために使います。<li></li>はリストの項目を意味するもので、<ul></ul>はリストの一括りでしたね。

CSSの記述（<article></article>セクションの<aside></aside>編）

再びmain.cssに編集画面を切り替えます。

先ほど記述した#main section p {〜}と、footer {〜} の間を一行改行し、ハイライトされている7〜10行目・12〜14行目・21〜26行目・28〜31行目・33〜36行目・38〜41行目・43〜45行目のコードを記述してください。

main.css

/* 〜上部省略〜 */
#main section p {
  margin: 0 0 20px;/* 段落と段落の間に距離を取るために下にmarginをとる */
  font: normal 14px/24px Meiryo , sans-serif;
}

aside {
  float: right;/* mainを右寄せに*/
  width: 240px;
}

aside > ul > li {
  padding: 0 0 30px;
}
/*
">"は直下セレクタ(子セレクタ)と言います。
ある親要素の直下にある要素を対象とするセレクタです。
この場合だと「asideのすぐ内側のulすぐ内側のliに適用する」となります。
*/

aside > ul > li h2 {/* asideの真下のulの真下のliのh2に適用 */
  margin: 0 0 10px;/* 下のulまでの距離 */
  padding: 5px 10px;/* 左と下の線（border）までの距離をとる */
  border-left: 4px solid #5b0400;/* h2の下に点線の下線を引く */
  border-bottom: 1px dotted #5b0400;/* h2の下に点線の下線を引く */
}

aside > ul > li > ul {
  padding: 5px 10px 15px;
  background: #fff;/* ulに背景色#fffをつける */
}

aside > ul > li > ul li {
  padding: 5px;
  border-bottom: 1px dotted #5b0400;/* liの下に点線の下線を引く */
}

aside > ul > li > ul li a {
  color: #5b0400;
  text-decoration: underline;
}

aside > ul > li > ul li a:hover {
  text-decoration: none;
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

ここでは今まで出てきたものばかり使っています。
ただ、以下のようなものが出てきてますね。

CSS

aside > ul > li {
  padding: 0 0 30px;
}

先ほどのコード内にも記述していますが、「>」を使って指定を行っていますね。

これは直下セレクタ(子セレクタ)と言います。ある親要素のすぐ内側の子要素のみを対象とするセレクタです。この場合「<aside></aside>のすぐ内側の<ul></ul>のすぐ内側の<li></li>に適用する」となります。

index.htmlの場所でいうと、以下の<li></li>に適用されることになります。

index.html

<!-- 〜上部省略〜 -->
      <aside>
        <ul>
          <li>
            <h2>最近の投稿</h2>
            <ul>
              <li><a href="">記事AAA</a></li>
              <li><a href="">記事BBB</a></li>
              <li><a href="">記事CCC</a></li>
            </ul>
          </li>
          <li>
            <h2>アーカイブ</h2>
            <ul>
              <li><a href="">2014年12月</a></li>
              <li><a href="">2014年11月</a></li>
              <li><a href="">2014年10月</a></li>
            </ul>
          </li>
        </ul>
      </aside>
<!-- 〜下部省略〜 -->

今回のように、<ul></ul>の内側に<ul></ul>が入れ子になっている場合などは「li {〜}」と指定するとすべての<li></li>に適用されてしまいます。「ここにだけ反映したい」といった限定的な指定を行いたい場合はこの直下セレクタなどをうまく使ってコーディングを行いましょう。

今回のindex.htmlとmain.cssへの記述は以上です。両方とも上書き保存（Ctrl + S）しておいてください。保存し終えたらindex.htmlをブラウザで開いてみましょう。さ、どうなっているかな？？

課題の提出

1件目のデザインのコーディングが終わりましたので、
課題提出として、コーディングを行ったデータの提出を行います。
「html」フォルダのデータを提出しましょう。

提出用に「html」フォルダをまるごとzip形式で圧縮してください。

「html」フォルダをzip形式で圧縮

まず、「html」フォルダ圧縮の手順は以下。

「html」フォルダを右クリックして、「送る」→「圧縮（zip形式フォルダー）」を選択してzipファイルを作る。
ファイル名を自分の学籍番号に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

学籍番号（必須）
氏名（必須）
フリガナ (必須)
メールアドレス（必須）
質問など
課題ファイル

世の中にはもっとおもしろくてわくわくするコーディング案件がある

これで1つのページが出来上がりましたね。
基本的には、この工程の全て、もしくは部分的なコーディングを、
制作するページ分だけ繰り返すのがコーダーの仕事です。

当然全く同じ内容のコーディングはあり得ないので、
その時々に制作するページデザインに沿った最適な記述でページのコーディングを行います。

今回のページデザインを見ればわかるかもしれませんが、
このデザインは基本部分での記述が必要なコーディングのみ行ったものになります。

世の中にはもっともっとおもしろくてワクワクするようなプロジェクトがあり、
そのデザインを世界に発信するためにウェブデザイナーやコーダーがコーディングを行なっています。
意外に地味で泥臭い仕事と思うかもしれませんが、その意義は計り知れませんよ。

基本デザインのコーディングは今回で完了です。
次回からは少し発展的な内容になります。

基礎HTML・CSSコーディングの振り返り

今回で基礎のHTML・CSSコーディングのレクチャーを終えました。
基本的な部分の詰め合わせのような内容でしたが理解はできましたか？
再確認の意味を込めて最後に振り返りを行いましょう。

第03回フォルダ・ファイルの準備

コーディングを行う前にフォルダやファイルの準備を行いました。
ここでの構成を間違えると読み込みができない場合があるので注意しましょう。

フォルダ・ファイルの準備 | ウェブデザイン演習第03回

第04回「内側・外側」「囲う」・HTMLファイルの基本的な構成

HTML・CSSのコーディングを始めるにはまず「内側・外側」「囲う」の意味を理解することが大事でしたね。そしてHTMLファイルの基礎部分の構成を行いました。

内側・外側 | ウェブデザイン演習第04回

コーディングの基礎② HTMLファイルの基本的な構成

第05回 CSSの基本的な考え方と書き方・CSSリセット

HTMLの次はCSSの基本的な考え方と書き方をレクチャーしました。またブラウザ間の表示の違いを最小限にとどめるためCSSリセットを行いましたね。

CSSの基本的な考え方と記述方法 | ウェブデザイン演習第05回

CSSの記述（リセット編） | ウェブデザイン演習第05回

第06回 htmlでそれぞれのブロックに使う各要素の説明

HTMLコーディングを行う際に構成として使用する「header」「nav」「article」「section」「aside」「footer」の役割を解説しましたね。

htmlでそれぞれのブロックに使う各要素の説明 | ウェブデザイン演習第06回

第07回ブラウザ幅とコンテンツ幅・インライン要素とブロック要素・HTMLの記述

ブラウザ幅とコンテンツ幅 | ウェブデザイン演習第07回

インライン要素とブロック要素 | ウェブデザイン演習第07回

HTMLの記述（#container・header編） | ウェブデザイン演習第07回

HTMLの基礎中の基礎「ブロック」と「入れ子」 | ウェブデザイン演習第07回

HTMLの記述（nav・article・footer編） | ウェブデザイン演習第07回

第08回 idとclassの書き方・main.cssへの記述

idとclassの書き方も忘れないように。

idとclassの書き方 | ウェブデザイン演習第08回

main.cssへの記述（ページ全体編） | ウェブデザイン演習第08回

第09回画像アセットとindex.html・main.cssへの記述（<header></header>セクション編）

画像アセットもレクチャーしましたね。そして<header></header>セクションのコーディングを行いました。

画像アセット（Photoshopの画像の自動書き出し機能）<header></header>編 | ウェブデザイン演習第09回

画像アセット（Photoshopの画像の自動書き出し機能）<nav></nav>セクション編 | ウェブデザイン演習第09回
 index.html・main.cssへの記述（<header></header>セクション編） | ウェブデザイン演習第09回

第10回 index.htmlへの記述（<nav></nav>セクション・<footer></footer>セクション編）

<nav></nav>セクションと<footer></footer>セクションのコーディングも行いました。

index.htmlへの記述（<nav></nav>セクション編） | ウェブデザイン演習第10回

main.cssへの記述（<nav></nav>セクション編） | ウェブデザイン演習第10回

index.htmlへの記述（<footer></footer>セクション編） | ウェブデザイン演習第10回

main.cssへの記述（<footer></footer>セクション編）| ウェブデザイン演習第10回

第11回 JavaScriptスライドショーの実装

HTML・CSSだけではなくJavaScriptを使ったスライドショーの実装を行いました。

画像アセットで<div id=”slider”></div>の画像を書き出す | ウェブデザイン演習第11回

画像アセットで<div id=”main”></div>の画像を書き出す | ウェブデザイン演習第11回

jQueryを使ったスライドショーの設置・設定 | ウェブデザイン演習第11回

第12回 <article></article>セクションのHTML・CSSの記述

最初のデザインのHTML・CSSコーディングの最後はメインコンテンツ部分の<article></article>セクションです。

HTMLの記述（<article></article>セクションの<div id=”main”></div>編） | ウェブデザイン演習第12回

CSSの記述（<article></article>セクションの<div id=”main”></div>編） | ウェブデザイン演習第12回

HTMLの記述（<article></article>セクションの<aside></aside>編） | ウェブデザイン演習第12回

CSSの記述（<article></article>セクションの<aside></aside>編） | ウェブデザイン演習第12回