Webサイトのコーディング練習を行いましょう。
今回の難易度は「★☆☆（EASY）」つまり簡単なコーディングになります。
この記事の目次
ALL INDEX
01 準備・確認編
- 完成予想図・ポイントの確認
- 「html01」フォルダを編集可能な状態にする
02 html・body編
03 header編
05 main・article編
06 section#profile編
- <section id=”profile”></section>ブロックのhtmlコーディング
- 「main article section {}」のcssコーディング
- 「main article section#profile {}」のcssコーディング
07 section#blog編
完成予想図・ポイントの確認
まずは完成したコーディングはこちら。
画像で見た完成予想図はこちら。
そして各ブロック分けがこちら。
さらにリスト表示にしたものがこちら。
コーディングのポイントは以下。
- 全体の表示幅はブラウザ幅100%、中央揃えするコンテンツのコンテンツ幅は1024px。
- 中央揃えには「wrapper（ラッパー）」と名前をつけ幅をコンテンツ幅にした<div></div>タグを使用する。
- 今回は<header></header>タグの中に<nav></nav>タグがある。
- <header></header>タグの内側はコンテンツ幅で中央揃えにしており、
左には文字だけのロゴのブロックを、右には<nav></nav>タグを配置しグローバルナビゲーションを表示。 - <main></main>タグの内側にある大きなメインの画像はブラウザ幅で表示。
- <main></main>タグの内側にはコンテンツ幅の<article></article>タグがあり、
レイアウトの違う<section></section>が2種類存在している。 - <footer></footer>タグの内側には©️ Chu-goku Gakuen.という著作権表記のみ。
今回のコーディングの目的は「コーディングの順番の意識を身につける」ことです。
入れ子の構造を意識して、最初は一番大きな箱から始まり、どんどん内側に向かって記述を進め、
最後は一番小さな箱を記述して作ることを意識してください。
またブラウザ幅とコンテンツ幅、およびインライン要素とブロック要素の理解が不可欠であり、
コンテンツ幅のブロックがいかにして中央揃えされているのか？を知りましょう。
「html01」フォルダを編集可能な状態にする
「html」フォルダを複製し「html01」にリネームする
以前作成した「html」を使用してコーディング練習を行いますが、
今後何度も使用するテンプレートファイルであるため上書きしてしまうと次回以降が困ります。
そのため「html」フォルダを複製（コピー&ペースト）しましょう。
さらに、複製した「html」フォルダを「html01」にリネームしましょう。
手順は以下。
- 作成した「html」フォルダを「Ctrl + C」してコピーし「Ctrl + V」してペーストする。
- フォルダ名を「html01」にリネームする。
Visual Studio Codeで「html01」フォルダ・ファイルを開く
次に、Visual Studio Codeを開き、
上部メニューの「ファイル>フォルダーを開く」から「html01」フォルダーをクリック選択※1し、
「フォルダを選択」ボタンをクリックしましょう。
※1・・・ダブルクリックではなくシングルクリックで選択する
最後に編集する「index.html」「main.css」のファイルを、
今度はダブルクリックで開いておきましょう。
次は全体の<html></html>および<body></body>といった、
Webサイト全体となるブロックのhtml・cssコーディングです。
