Sponsored Link
今回はページのメインブロックである<article></article>セクション、その内側に、ページのメインコンテンツを表示する<div id=”main”></div>ブロック、そしてサイド要素である<aside><aside>ブロックのコーディングを行います。
1つ目のデザインのHTML・CSSコーディングは今回が最終回になります。コーディング以外にも重要な部分があったので再確認の意味を込めて振り返りを行います。
ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。
Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。
この記事の目次
- 1 HTMLの記述(<article></article>セクションの<div id=”main”></div>編)
- 2 CSSの記述(<article></article>セクションの<div id=”main”></div>編)
- 3 HTMLの記述(<article></article>セクションの<aside></aside>編)
- 4 CSSの記述(<article></article>セクションの<aside></aside>編)
- 5 課題の提出
- 6 世の中にはもっとおもしろくてわくわくするコーディング案件がある
- 7 基礎HTML・CSSコーディングの振り返り
- 7.1 第03回 フォルダ・ファイルの準備
- 7.2 第04回 「内側・外側」「囲う」・HTMLファイルの基本的な構成
- 7.3 第05回 CSSの基本的な考え方と書き方・CSSリセット
- 7.4 第06回 htmlでそれぞれのブロックに使う各要素の説明
- 7.5 第07回 ブラウザ幅とコンテンツ幅・インライン要素とブロック要素・HTMLの記述
- 7.6 第08回 idとclassの書き方・main.cssへの記述
- 7.7 第09回 画像アセットとindex.html・main.cssへの記述(<header></header>セクション編)
- 7.8 第10回 index.htmlへの記述(<nav></nav>セクション・<footer></footer>セクション編)
- 7.9 第11回 JavaScriptスライドショーの実装
- 7.10 第12回 <article></article>セクションの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>は文章の一つの段落を意味します。
参考ページにありますが、段落を構成するのではなく、改行のみを行うのであれば<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回 フォルダ・ファイルの準備
コーディングを行う前にフォルダやファイルの準備を行いました。
ここでの構成を間違えると読み込みができない場合があるので注意しましょう。
第04回 「内側・外側」「囲う」・HTMLファイルの基本的な構成
HTML・CSSのコーディングを始めるにはまず「内側・外側」「囲う」の意味を理解することが大事でしたね。そしてHTMLファイルの基礎部分の構成を行いました。
第05回 CSSの基本的な考え方と書き方・CSSリセット
HTMLの次はCSSの基本的な考え方と書き方をレクチャーしました。またブラウザ間の表示の違いを最小限にとどめるためCSSリセットを行いましたね。
第06回 htmlでそれぞれのブロックに使う各要素の説明
HTMLコーディングを行う際に構成として使用する「header」「nav」「article」「section」「aside」「footer」の役割を解説しましたね。
第07回 ブラウザ幅とコンテンツ幅・インライン要素とブロック要素・HTMLの記述
インライン要素とブロック要素 | ウェブデザイン演習 第07回
HTMLの記述(#container・header編) | ウェブデザイン演習 第07回
第08回 idとclassの書き方・main.cssへの記述
idとclassの書き方も忘れないように。
第09回 画像アセットとindex.html・main.cssへの記述(<header></header>セクション編)
画像アセットもレクチャーしましたね。そして<header></header>セクションのコーディングを行いました。
画像アセット(Photoshopの画像の自動書き出し機能)<header></header>編 | ウェブデザイン演習 第09回
画像アセット(Photoshopの画像の自動書き出し機能)<nav></nav>セクション編 | ウェブデザイン演習 第09回
index.html・main.cssへの記述(<header></header>セクション編) | ウェブデザイン演習 第09回
<nav></nav>セクションと<footer></footer>セクションのコーディングも行いました。
index.htmlへの記述(<nav></nav>セクション編) | ウェブデザイン演習 第10回
main.cssへの記述(<nav></nav>セクション編) | ウェブデザイン演習 第10回
第11回 JavaScriptスライドショーの実装
HTML・CSSだけではなくJavaScriptを使ったスライドショーの実装を行いました。
画像アセットで<div id=”slider”></div>の画像を書き出す | ウェブデザイン演習 第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回