[コーディングの実践:EASY] 01 準備・確認編

[コーディングの実践:EASY] 01 準備・確認編

2023年11月01日 /最終更新:2024年10月06日

簡単なコーディング練習01 準備・確認編

[コーディングの実践:EASY] 01 準備・確認編

Webサイトのコーディング練習を行いましょう。
今回の難易度は「★☆☆(EASY)」つまり簡単なコーディングになります。

ALL INDEX

01 準備・確認編

  • 完成予想図・ポイントの確認
  • 「html01」フォルダを編集可能な状態にする

02 html・body編

03 header編

04 footer編

05 main・article編

06 section#profile編

07 section#blog編

完成予想図・ポイントの確認

まずは完成したコーディングはこちら。

LEVEL EASY

画像で見た完成予想図はこちら。

そして各ブロック分けがこちら。

さらにリスト表示にしたものがこちら。

コーディングのポイントは以下。

  • 全体の表示幅はブラウザ幅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」にリネームしましょう。

手順は以下。

  1. 作成した「html」フォルダを「Ctrl + C」してコピーし「Ctrl + V」してペーストする。
  2. フォルダ名を「html01」にリネームする。

Visual Studio Codeで「html01」フォルダ・ファイルを開く

次に、Visual Studio Codeを開き、
上部メニューの「ファイル>フォルダーを開く」から「html01」フォルダーをクリック選択※1し、
「フォルダを選択」ボタンをクリックしましょう。
※1・・・ダブルクリックではなくシングルクリックで選択する

最後に編集する「index.html」「main.css」のファイルを、
今度はダブルクリックで開いておきましょう。

次は全体の<html></html>および<body></body>といった、
Webサイト全体となるブロックのhtml・cssコーディングです。

[コーディングの実践:EASY] 02 html・body編