[コーディング] Webサイトコーディング[EASY] 05 main・article編 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

1 画像のダウンロード
2 <main></main>ブロックのhtmlコーディング
3 「main {}」のcssコーディング
- 3.1 「main #mainimg {}」のcssコーディング
  - 3.1.1 main #mainimg {～} = <main></main>の内側の「#mainimg」に限定して指定
  - 3.1.2 ブラウザで確認する

画像のダウンロード

今回はメインコンテンツである<main></main>タグの記述を開始します。
LEVEL EASYを見てみると何点か画像がありますよね。まずはこれらの画像をダウンロードしましょう。
そして、html01フォルダの中のimgフォルダに画像を移動しましょう。

まずは以下の5点のURLを全て「右クリック>名前を付けてリンクを保存」して画像を保存しましょう。

画像5点がすべて保存出来たら、それらすべてを「html01フォルダ>imgフォルダ」に移動しましょう。
フォルダの構成は以下を確認してください。

フォルダ移動ができたら準備完了です。

<main></main>ブロックのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。
また、「html01」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。

またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう

今回から「main.css」と同じように「index.html」もサンプルコードの記述の省略を行っています。
<!–上部省略–>や<!–下部省略–>との記述は該当箇所が省略されていることを理解してください。
また編集中のファイルがどのファイルなのか、現在の行数がどこなのかをよく確認してください。

<main></main>タグのhtmlコーディング

まずは<main></main>タグのブロック自体を追加しましょう。

<header></header>タグの終了タグと<footer></footer>の開始タグの間を改行する。
ハイライトされている20・21行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

<div id=”mainimg”></div>タグのhtmlコーディング

次はメイン画像を表示しているブロックである<div id=”mainimg”></div>タグを追加しましょう。

<main></main>タグの開始タグの下を改行する。
ハイライトされている21行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

メインの画像がブラウザ幅に表示されていますか?

<article></article>タグのhtmlコーディング

次に<article></article>タグを追加しましょう。

<div id=”mainimg”></div>タグの下を改行する。
ハイライトされている22・23行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
  </article>
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

今回は<article></article>タグ自体に「class=”wrapper”」を記述しています。
ということは・・・何がしたいのかわかりますか?ヒントは・・・コレ。

「main {}」のcssコーディング

編集画面を「main.css」のタブに切り替えましょう。
「main {}」のブロック自体には特に指定するプロパティ・値がないため割愛します。

「main #mainimg {}」のcssコーディング

最初に「main #mainimg {}」のcssの指定を追加しましょう。

「header .wrapper nav li a {〜}」と「footer {}」の間を改行する。
ハイライトされている86〜89行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

header .wrapper nav li a {
  display: block;
  padding: 10px;
  color: #999;
}

main #mainimg {
  width: 100%;
  margin-bottom: 100px;
}

footer {
  margin-top: auto;
}

/*-- 〜下部省略〜 --*/

main #mainimg {～} = <main></main>の内側の「#mainimg」に限定して指定

87行目でメイン画像の横幅を「width: 100%;」にしてある理由はもうが理解できると思います。
また88行目の「margin-bottom: 100px;」も前回の内容をしっかり理解しさえすれば、
「下方向の外側の余白を100pxにして<article></article>タグとの間を取った」のがわかると思います。

おそらく疑問を感じるのはセレクタ自体の「main #mainimg」という文字列ですよね。
これは「〇〇ブロックの中にある□□」というセレクタを特別に限定した書き方になります。

実は以前にも「「header .wrapper {}」のcssコーディング」の際に出てきていたのですが、
これは「headerの中にある.wrapperに限定的に指定」といった意味になります。
このセレクタから「header」を取り払って「.wrapper」だけにしてしまうと、
ページ内にある<div class=”wrapper”></div>すべてに適用されてしまうため、
親要素を指定したうえで子要素に指定をしています。

(そもそも#なのでページ内に1つしか使えないですが)