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

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

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

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

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

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

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

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

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

index.html

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

ブラウザで確認する

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

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

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

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

index.html

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

ブラウザで確認する

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

<div class=”content”></div>タグのhtmlコーディング

次に「PROFILE」ブロックのタイトルの下にある、
画像と文字列が横並びになっているブロックを準備します。

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

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">
      <!-- / .content --></div>
    </section>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
これで画像とテキストを横並びにする準備ができました。

<img />タグ・<div class=”text”></div>タグのhtmlコーディング

ここで追加するのはプロフィール画像<img />タグ、
そして<p></p>タグを内側に入れる箱の<div class=”text”></div>です。
一気に追加してしまいましょう。

1. <div class=”content”></div>タグの開始タグの下を改行する。
2. ハイライトされている26～31行目の内容を記述する。

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>
  </article >
</main>
<footer>
<!-- 下部省略 -->

ブラウザで確認する

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

現時点での並びは上から順に・・・

1. PROFILEの見出し・・・<h2>PROFILE</h2>
2. プロフィール画像・・・<div class=”img”><img src=”img/profile.jpg” alt=””></div>
3. ダミーテキストダミー・・・
   <div class=”text”>
     <p>ダミーテキストダミーテキストダミーテキスト</p>
     <p>ダミーテキストダミーテキストダミーテキスト</p>
     <p>ダミーテキストダミーテキストダミーテキスト</p>
   <!– / .text –></div>

といったブロックが縦に積まれている状態ですね。

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

cssはまず、「PROFILE」と「BLOG」の二つのsection {}に共通する「h2 {}」のCSS指定から行います。
編集画面を「main.css」のタブに切り替えましょう。
「main article section {}」のブロック自体には特に指定するプロパティ・値がないため割愛します。

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

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

1. 「main #mainimg {〜}」と「footer {}」の間を改行する。
2. ハイライトされている91〜95行目の内容を記述する。

main.css

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

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

main article section h2 {
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 40px;
}

footer {
  margin-top: auto;
}

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

margin-bottom: 30px; = <h2></h2>の外側下に30pxの余白を取り見やすく

ここでは今まで出てきたfont-sizeやline-heightの指定のみですが、
「h2 {}」に対して「margin-bottom: 30px;」を指定したことにより、
下にある画像とテキストのブロックとの余白を取って見やすくすることができました。

また前回出てきたセレクタを限定して指定する記述方法として「main article section h2 {}」と記述しています。
このコーディング練習にはありませんが、他のブロックに「h2 {}」が追加になる可能性もあるため、
あらかじめ限定して指定することで後の追記で重複が起こるなどのトラブルを回避しています。

ブラウザで確認する

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

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

次に、「PROFILE」のsection {}に対するcss指定を行います。
量が多いのでしっかりとついてきてください。

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

では画像とテキストを入れ子にした「main article section#profile .content {}」のcssの指定を追加しましょう。

1. 「main article section h2 {〜}」と「footer {}」の間を改行する。
2. ハイライトされている97〜103行目の内容を記述する。

main.css

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

main article section h2 {
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 40px;
}

main article section#profile .content {
  margin-bottom: 50px;
  display: flex; /* .content {}をフレックスボックスに */
  justify-content: center; /* 子要素を主軸(横方向)中央揃えに配置 */
  align-items: center; /* 子要素を交差軸(縦方向)中央揃えに配置 */
  gap: 30px; /* 子要素と子要素の間に30pxの余白をとる */
}

footer {
  margin-top: auto;
}

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

フレックスボックスにして子要素を主軸・交差軸ともに中央揃えにして子要素同士

前回説明したフレックスボックスが早速出てきました。
ここでいう親要素はこの「.cotent {}」ですが、子要素はもちろん、画像とテキストボックスの二つです。

まず99行目「display: flex;」で「.content {}」をフレックスボックスにし、
100行目「justify-content: center;」で子要素を主軸(横方向)中央揃え配置、
さらに101行目「align-items: center;」で子要素を交差軸(縦方向)中央揃えに配置、
最後に102行目「gap: 30px;」にして子要素と子要素の間に30pxの余白をとりました。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
画像とテキストボックスが横並びになっていますか?

「main article section#profile .content .img {}」のcssコーディング

では画像のブロック(以下:画像ボックス)「main article section#profile .content .img {}」、
および画像自体「main article section#profile .content .img img {}」のcssの指定を追加しましょう。

1. 「main article section#profile .content {〜}」と「footer {}」の間を改行する。
2. ハイライトされている105〜108・110～114行目の内容を記述する。

main.css

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

main article section#profile .content {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

main article section#profile .content .img {
  max-width: 150px; /* 画像ボックスの横幅の最大値を150pxに */
  aspect-ratio: 1 / 1; /* 画像ボックスの縦横比率を1x1(縦150px x 横150px)に */
}

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

footer {
  margin-top: auto;
}

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

aspect-ratio: 1 / 1; = 画像ボックスの縦横比率を1×1に

プロパティ・値の説明

プロパティ	指定の効果	値
aspect-ratio	ボックスのアスペクト比を設定	auto(初期値)・1 / 1など

以前説明した「max-width」プロパティは横幅の最大値の指定でしたね。
今回紹介する「aspect-ratio」は簡単に言えばボックスの縦横比率を指定するプロパティです。

例えば、現在みなさんの目の前にあるPCモニターのサイズは「1920×1080」、横:縦の比率は「16:9」です。
これをaspect-ratioの値に置き換えて指定すると「aspect-ratio: 16 / 9;」といった記述になります。
今回は「aspect-ratio: 1 / 1;」にすることで画像ボックスを正方形のボックスに指定しています。

(そもそも正方形にトリミングした画像を使っていますが)

では値による挙動の違いを見てみましょう。

aspect-ratioプロパティの値による挙動の違い
CSS Demo: aspect-ratio (mozilla.net)

object-fit: cover; = 画像自体の表示を画像ボックス内ではみ出させ、はみ出した分をトリミング

プロパティ・値の説明

プロパティ	指定の効果	値
object-fit	ボックス内での画像などの表示方法を設定	fill・contain・cover・ none・scale-down

先ほど設定した画像ボックスの中での画像自体の表示方法の指定を行います。
はみ出したり縮めたりトリミングしたり・・・表示するにしても方法は色々あります。
今回は値に「cover」を指定しましたが個人的には他の値を使用したことがありません。

では値による挙動の違いを見てみましょう。

object-fitプロパティの値による挙動の違い
CSS Demo: object-fit (mozilla.net)

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
画像ボックスのサイズが小さくなり、画像自体もボックスにフィットしていますか?

section#profileのブロックの指定は以上。
次は<section id=”blog”></section>ブロックのhtmlコーディングに進みましょう。

Webサイトコーディング[EASY] 07 section#blog編