[実践編] [コーディングの実践:EASY] 07 section#blog編 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

1 <section id=”blog”></section>ブロックのhtmlコーディング
2 「main article section#blog {}」のcssコーディング
3 LEVEL EASYのコーディング完成
4 その他のコーディングの実践

<section id=”blog”></section>ブロックのhtmlコーディング

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

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

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

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

<section id=”blog”></section>タグのhtmlコーディング

まずは<section id=”blog”></section>タグのブロックを追加しましょう。

<section id=”profile”></section>タグの終了タグの下を改行する。
ハイライトされている34・35行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
    <section id="profile">
      <h2>PROFILE</h2>
      <div class="content">
        <div class="img"><img src="img/profile.jpg" alt=""></div>
        <div class="text">
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
        <!-- / .text --></div>
      <!-- / .content --></div>
    </section>
    <section id="blog">
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

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

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

次に「BLOG」という<h2></h2>タグの文字列を追加します。

<section id=”blog”></section>タグの開始タグの下を改行する。
ハイライトされている35行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
    <section id="profile">
      <h2>PROFILE</h2>
      <div class="content">
        <div class="img"><img src="img/profile.jpg" alt=""></div>
        <div class="text">
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
        <!-- / .text --></div>
      <!-- / .content --></div>
    </section>
    <section id="blog">
      <h2>BLOG</h2>
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

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

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

「BLOG」の見出しの下に記事のサムネイルと記事タイトルが横方向に3つ並んでいますが、
今回はこちらを<ul></ul>タグ、すなわちリストで記事の一覧をリスト表示にしてマークアップしています。

先ほど記述した<h2></h2>タグの下を改行する。
ハイライトされている36・37行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
    <section id="profile">
      <h2>PROFILE</h2>
      <div class="content">
        <div class="img"><img src="img/profile.jpg" alt=""></div>
        <div class="text">
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
        <!-- / .text --></div>
      <!-- / .content --></div>
    </section>
    <section id="blog">
      <h2>BLOG</h2>
      <ul>
      </ul>
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
何も表示されませんよね?<ul></ul>タグは単なるリストの親要素であるため、
リスト項目の<li></li>タグがないと意味を持ちません。

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

次にリスト項目である<li><li>タグを追加しましょう。

先ほど記述した<ul></ul>タグの開始タグの下を改行する。
ハイライトされている37～40行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
    <section id="profile">
      <h2>PROFILE</h2>
      <div class="content">
        <div class="img"><img src="img/profile.jpg" alt=""></div>
        <div class="text">
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
        <!-- / .text --></div>
      <!-- / .content --></div>
    </section>
    <section id="blog">
      <h2>BLOG</h2>
      <ul>
        <li>
          <div class="img"><img src="img/sky.jpg" alt=""></div>
          <p>赤い空</p>
        </li>
      </ul>
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「赤い空」の画像とテキストが表示されましたか?

同様に残り2件も追加しましょう。

先ほど記述した<li></li>タグの終了タグの下を改行する。
ハイライトされている41～48行目の内容を記述する。

index.html

<!-- 上部省略 -->
</header>
<main>
  <div id="mainimg"><img src="img/mainimg.jpg" alt=""></div>
  <article class="wrapper">
    <section id="profile">
      <h2>PROFILE</h2>
      <div class="content">
        <div class="img"><img src="img/profile.jpg" alt=""></div>
        <div class="text">
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
          <p>ダミーテキストダミーテキストダミーテキスト</p>
        <!-- / .text --></div>
      <!-- / .content --></div>
    </section>
    <section id="blog">
      <h2>BLOG</h2>
      <ul>
        <li>
          <div class="img"><img src="img/sky.jpg" alt=""></div>
          <p>赤い空</p>
        </li>
        <li>
          <div class="img"><img src="img/sea.jpg" alt=""></div>
          <p>青い海とビーチ</p>
        </li>
        <li>
          <div class="img"><img src="img/mountain.jpg" alt=""></div>
          <p>雲海の中の山</p>
        </li>
      </ul>
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「青い海とビーチ」そして「雲海の中の山」の画像とテキストも表示されたでしょうか?

「main article section#blog {}」のcssコーディング

最後に、「BLOG」のsection {}に対するcss指定を行います。

「main article section#blog {}」のcssコーディング

では「main article section#blog {}」のcssの指定を追加しましょう。

「main article section#profile .content .img img {〜}」と「footer {}」の間を改行する。
ハイライトされている116～118行目の内容を記述する。

main.css

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

main article section#profile .content .img img {
  width: 100%; /* 画像の横幅を画像ボックスの横幅いっぱいに */
  height: 100%; /* 画像の高さを画像ボックスの高さいっぱいに */
  object-fit: cover; /* 画像自体の表示を画像ボックス内ではみ出させ、はみ出した分をトリミング */
}

main article section#blog {
  margin-bottom: 100px;
}

footer {
  margin-top: auto;
}

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

margin-bottomは以前にも出てきましたね。
バランスをとるため<footer></footer>との間に100pxの余白を作りました。

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
BLOGのブロックと<footer></footer>との間に余白は生まれましたか?

「main article section#blog ul {}」のcssコーディング

では「main article section#blog ul {}」のcssの指定を追加しましょう。
今回もフレックスボックスを使用します。

「main article section#blog {〜}」と「footer {}」の間を改行する。
ハイライトされている120～125行目の内容を記述する。

main.css

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

main article section#blog {
  margin-bottom: 100px;
}

main article section#blog ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
}

footer {
  margin-top: auto;
}

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

フレックスボックスにして子要素を主軸に起点に左端から描画し折り返させる

再びフレックスボックスが出てきました。
ここでは親要素は「section#blog ul {}」、子要素は「section#blog ul li {}」です。

まず121行目「display: flex;」で「section#blog ul {}」をフレックスボックスにし、
122行目「flex-wrap: wrap;」で親要素の横幅を超えた子要素を折り返させ、
123行目「justify-content: flex-start;」で子要素を主軸(横方向)左揃えに配置、
最後に124行目「gap: 30px;」にして子要素と子要素の間に30pxの余白をとりました。

ブラウザで確認する

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

画像&テキストボックスのリストが横並びになっていますか?
おそらく3件目は「flex-wrap: wrap;」によって下に折り返して表示していると思います。

「main article section#blog ul li {}」のcssコーディング

では「main article section#blog ul li {}」のcssの指定を追加しましょう。
今回のポイントはリスト項目の「横幅」です。

「main article section#blog ul {〜}」と「footer {}」の間を改行する。
ハイライトされている127～129行目の内容を記述する。

main.css

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

main article section#blog ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
}

main article section#blog ul li {
  width: calc( 33.3% - 20px ); /* リストの項目をフレックスボックスの横幅の1/3から余白の横幅を差し引いたサイズに */
}

footer {
  margin-top: auto;
}

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

width: calc( 33.3% – 20px ); = リストの項目をフレックスボックスの横幅の1/3から余白の横幅を差し引いたサイズに

見慣れない「calc()」という値が出てきましたね。
calcを直訳すると「計算する」という意味になります。
つまりcalcは決まった値を指定せず場合に応じて再計算してくれる非常に柔軟な値の指定方法です。

今回の場合、親要素<ul></ul>の横幅はコンテンツ幅と同じ1024pxです。
ではレイアウトで子要素<li></li>を3つ横並びにするのであれば、
「横幅1024pxから余白2つ分60px差し引いて3で割る」をすれば「321.333….」という決まった値が出るので、
これを「li {width: 321px;}」と指定すればよさそうですよね?

ではこの指定をしたうえで画面を縮めてリサイズしてどうなるか見てみましょう。

<li></li>が下にカラム落ちしてレイアウトが崩れました。
ではcalcで再計算した場合、つまり元々の指定「li {width: calc(33.3% – 60px;}」であればどうでしょう?

カラム落ちせず余白と33.3%のサイズを守っています。
端末画面サイズが多岐にわたる現代では、こうして%で割合指定を行って柔軟なサイズ変化に対応するレイアウトをしましょう。

デザインのバランスを保つために余白は固定で指定したいので余白以外の<li></li>タグの横幅を柔軟に変えたい。
そういった場合は上記が非常に有効です。加えてcalc()のサンプルを見てみましょう。

calc()のサンプル
calc() – CSS: カスケーディングスタイルシート | MDN (mozilla.org)

ブラウザで確認する

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

画像&テキストボックスのリストが横並びになっていますか?
おそらく3件目は「flex-wrap: wrap;」によって下に折り返して表示していると思います。

LEVEL EASYのコーディング完成

お疲れ様でした!
LEVEL EASYはこれにて完成です。

その他のコーディングの実践

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

[コーディングの実践:NORMAL – Web movie – ] 01 準備・確認編

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

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

Sponsored Link

<section id=”blog”></section>ブロックのhtmlコーディング

<section id=”blog”></section>タグのhtmlコーディング

ブラウザで確認する

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

ブラウザで確認する

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

ブラウザで確認する

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

ブラウザで確認する

ブラウザで確認する

「main article section#blog {}」のcssコーディング

「main article section#blog {}」のcssコーディング

ブラウザで確認する

「main article section#blog ul {}」のcssコーディング

フレックスボックスにして子要素を主軸に起点に左端から描画し折り返させる

ブラウザで確認する

「main article section#blog ul li {}」のcssコーディング

width: calc( 33.3% – 20px ); = リストの項目をフレックスボックスの横幅の1/3から余白の横幅を差し引いたサイズに

ブラウザで確認する

LEVEL EASYのコーディング完成

その他のコーディングの実践

Sponsored Link

RELATED POST関連記事

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

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

[コーディングの実践:HARD] 02 body・#cloud編

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