[コーディングの実践:EASY] 05 main・article編

画像のダウンロード

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

まずは以下の5点のURLを全て「右クリック>名前を付けてリンクを保存」して画像を保存しましょう。
※ID・PASSはいつものです。

1. メイン画像
2. 「PROFILE」の人物の画像
3. 「BLOG」の赤い空の画像
4. 「BLOG」の青い海とビーチの画像
5. 「BLOG」の雲海の中の山の画像

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

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

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

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

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

mainタグのhtmlコーディング

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

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

index.html

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

ブラウザで確認する

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

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

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

1. mainタグの開始タグの下を改行する。
2. ハイライトされている22行目の内容を記述する。

index.html

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

ブラウザで確認する

書き換えができたら「index.html」を上書き保存Ctrl + Sし、ブラウザで「index.html」を開いてページを更新F5キーしてみましょう。
メインの画像がブラウザ幅に表示されていますか?

articleタグのhtmlコーディング

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

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

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タグ自体に「class=”wrapper”」を記述していますが・・・何がしたいのかわかりますか?
ヒントは・・・main.cssの13〜16行目に記述したセレクタ「.wrapper {}」に指定したプロパティと値を見てみましょう!
理由がわかったらコーディングスキルが向上した証拠です。

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

編集画面を「main.css」のタブに切り替えましょう。

「main」「div#mainimg」「article」のセレクタをすべて記述

最初に「main {}」のcssの指定を追加しましょう。
構造を確認しながらすべてのセレクタを記述していきましょう。

1. header {〜}(24～49行目)の記述とfooter {〜}(51〜62行目)の記述の間を改行する。
2. ハイライトされている51〜56行目の内容を記述する。

main.css

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

header {
  div.wrapper {
    display: flex;
    justify-content: space-between;
    h1.logo {
      padding: 10px 20px;
      font-size: 16px;
      line-height: 30px;
      color: #fff;
      background: #999;
    }
    nav {
      ul {
        display: flex;
        gap: 10px;
        li {
          a {
            display: block;
            padding: 10px;
            color: #999;
          }
        }
      }
    }
  }
}

main {
  div#mainimg {
  }
  article {
  }
}

footer {
  margin-top: auto;
  .wrapper {
    padding: 20px;
    border-top: 1px solid #999;
    p {
      font-size: 16px;
      line-height: 30px;
      font-style: normal;
    }
  }
}

ひとまず先ほど記述した「main」の入れ子構造にある「div#mainimg」「article」のセレクタを記述しました。

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

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

1. div#mainimg {(52行目)」の記述の下を改行する。
2. ハイライトされている53〜54行目の内容を記述する。

main.css

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

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

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

margin-bottom: 100px;(54行目)= メイン画像とarticleタグとの間に100pxの距離を取る

53行目でメイン画像の横幅を「width: 100%;」にしてある理由はもう理解できると思います。
また54行目の「margin-bottom: 100px;」も前回の内容をしっかり理解しさえすれば、
「メイン画像とarticleタグとの間に100px分距離を取った」のがわかると思います。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存Ctrl + Sし、ブラウザで「index.html」を開いてページを更新F5キーしてみましょう。
次はsectionブロックのhtmlコーディングに進みましょう。

[コーディングの実践:EASY] 06 section#profile編