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

この記事の目次

1 <section id=”profile”></section>ブロックのhtmlコーディング
2 「section {}」のcssコーディング
- 2.1 「section」および「#profile」のセレクタをすべて記述
- 2.2 「h2 {}」のcssコーディング
  - 2.2.1 margin-bottom: 30px; = h2の外側下に30pxの余白を取り見やすく
  - 2.2.2 ブラウザで確認する
3 「#profile {}」のcssコーディング
- 3.1 「#profile」内の「.content {}」のcssコーディング
  - 3.1.1 フレックスボックスにして子要素を主軸・交差軸ともに中央揃えにして子要素同士
  - 3.1.2 ブラウザで確認する
- 3.2 「.content {}」内の「.img {}」のcssコーディング
  - 3.2.1 ブラウザで確認する

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

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

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

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

articleタグの開始タグの下を改行する。
ハイライトされている24・25行目の内容を記述する。

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タグのhtmlコーディング

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

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

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」ブロックのタイトルの下にある、画像と文字列が横並びになっているブロックを準備します。

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

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タグ」を内側に入れる箱の<div class=”text”></div>です。
一気に追加してしまいましょう。

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

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キーしてみましょう。

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

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

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

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

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

「section」および「#profile」のセレクタをすべて記述

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

article {(56行目)の記述の下を改行する。
ハイライトされている57〜66行目の内容を記述する。

main.css

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

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    section {
      h2 {
      }
      &#profile {
        .content {
          .img {
          }
        }
      }
    }
  }
}

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

ひとまず先ほど記述した「article」の「section」の入れ子構造のセレクタを記述しました。
完成見本の通り「PROFILE」「BLOG」の二つのsectionがありますが、
「PROFILE」だけに対象を限定するために「&#profile」という記述を行いました。
次回の「BLOG」でも「&#blog」として記述します。

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

では「PROFILE」と「BLOG」の二つのsection {}に共通する「h2 {}」のCSS指定から行います。

h2 {(58行目)の記述の下を改行する。
ハイライトされている59〜61行目の内容を記述する。

main.css

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

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    section {
      h2 {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 40px;
      }
      &#profile {
        .content {
          .img {
          }
        }
      }
    }
  }
}

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

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

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

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

ブラウザで確認する

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

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

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

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

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

.content {(64行目)の記述の下を改行する。
ハイライトされている65〜69行目の内容を記述する。

main.css

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

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

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

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

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

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

ブラウザで確認する

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

「.content {}」内の「.img {}」のcssコーディング

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

.img {(70行目)の記述の下を改行する。
ハイライトされている71行目の内容を記述する。

main.css

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

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    section {
      h2 {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 40px;
      }
      &#profile {
        .content {
          margin-bottom: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 30px;
          .img {
            max-width: 150px; /* 画像ボックスの横幅の最大値を150pxに */
          }
        }
      }
    }
  }
}

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

ブラウザで確認する

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

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

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

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

Sponsored Link

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

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

ブラウザで確認する

h2タグのhtmlコーディング

ブラウザで確認する

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

ブラウザで確認する

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

ブラウザで確認する

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

「section」および「#profile」のセレクタをすべて記述

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

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

ブラウザで確認する

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

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

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

ブラウザで確認する

「.content {}」内の「.img {}」のcssコーディング

ブラウザで確認する

Sponsored Link

RELATED POST関連記事

[コーディングの実践:NORMAL – Web movie – ] 02 レイアウト配置固定編

[コーディングの実践:NORMAL] 04 jQueryプラグインでスライドショー実装編

[コーディングの実践:HARD] 04 #cloud・#ufoアニメーション編

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