ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL10コンテンツ1のCSSを書く

今回はヘッダーのすぐ下にあるコンテンツ1のCSS(スタイルシート)を書いていきます。

この記事のポイント

  • コンテンツ1をデザイン案と同じ表示になるように整える
  • displayプロパティでフレックスボックスを使って横並びのレイアウトを作る
  • フォントサイズの単位は「rem」を使用する

目次

コンテンツ1のCSSをコーディングする

前回はヘッダー部分のCSSをコーディングしてきました。
今回は引き続き、ヘッダーの下にある「コンテンツ1」のCSSをコーディングしていきます。

CSSをコーディングするエリア
CSSをコーディングするエリア

CSSファイルは引き続き「style.css」を使用します。
それでは早速コーディングしていきましょう。

幅と左右の余白を設定する

まずはヘッダーのときと同様に、コンテンツ1の横幅と余白、そして背景色を設定してアウトラインを先に作成します。

横幅と左右の余白を設定する
横幅と左右の余白を設定する

コンテンツ1でも左右の余白が均一になるように、外側をdiv要素で囲みます。
index.html」を開いて、以下のdiv要素を追加してください。

index.html

<!DOCTYPE html>

    // 省略

    </header>
    <main>
      <section id="content1">
        <div class="wrapper">
          <figure><img src="./fox.png" alt="プロフィール画像"></figure>
          <div class="text_area">
            <h1>こんにちは!</h1>
            <p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください!</p>
          </div>
        </div>
      </section>
      <section id="content2">

    // 省略

  </body>
</html>

このdiv要素もレイアウトを整えるために使用します。
style.css」を開いて、ヘッダーに関するCSSの下に赤字のコードを追記してください。

style.css

@charset "UTF-8";

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
  background-color: #e9e279;
}


/* header
------------------------------ */
#header {
  width: 100%;
  background-color: #d5c800;
}
#header .wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

#header p {
  float: left;
  margin: 22px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
}

#header ul {
  float: right;
  margin: 28px 0;
  font-size: 0.9rem;
  font-weight: 500;
}
#header ul li {
  float: left;
  margin-right: 40px;
}
#header ul li:last-child {
  margin-right: 0;
}


/* content1
------------------------------ */
#content1 {
  background-color: #e1da65;
}

#content1 .wrapper {
  margin: 0 auto;
  padding: 50px 0;
  width: 100%;
  max-width: 1000px;
}

セレクタはsection要素id属性#content1」と、新しく追加したdiv要素class属性.wrapper」を使ってCSSを適用します。
div要素を使って左右の余白を設定している部分はヘッダーと同様です。

コンテンツ1ではさらにpaddingプロパティで上下に50pxずつ余白を設けています。

続いて、内部のコンテンツのレイアウトに関するCSSを追記します。

style.css

@charset "UTF-8";

// 省略

/* content1
------------------------------ */
#content1 {
  background-color: #e1da65;
}

#content1 .wrapper {
  display: flex;
  margin: 0 auto;
  padding: 50px 0;
  width: 100%;
  max-width: 1000px;
}

#content1 figure {
  width: 50%;
}
#content1 figure img {
  max-width: 80%;
}

#content1 .text_area {
  padding-top: 15px;
  width: 50%;
}

displayプロパティflexは「フレックスボックス」と呼び、内側のコンテンツを横に並べた配置にします。
ヘッダーのときはレイアウトの配置でfloatプロパティを使いましたが、今回は左右に半分ずつのスペースで配置するためフレックスボックスを使っています。

フレックスボックスは横に並べたコンテンツの高さを均等にできることも特徴の1つです。
上記のCSSでは画像が入るfigure要素に「width:50%;」、テキストが入るdiv要素にも「width:50%;」をしているので、配置のイメージは次のようになります。

フレックスボックスのレイアウトイメージ
フレックスボックスのレイアウトイメージ

テキストコンテンツのCSSを整える

コンテンツのレイアウトは完了したので、最後にテキストコンテンツのフォントサイズや色などをそれぞれ指定していきましょう。

style.css

@charset "UTF-8";

// 省略

/* content1
------------------------------ */
#content1 {
  background-color: #e1da65;
}

#content1 .wrapper {
  display: flex;
  margin: 0 auto;
  padding: 50px 0;
  width: 100%;
  max-width: 1000px;
}

#content1 figure {
  width: 50%;
}
#content1 figure img {
  max-width: 80%;
}

#content1 .text_area {
  padding-top: 15px;
  width: 50%;
}

#content1 .text_area h1 {
  margin-bottom: 30px;
  font-size: 2.5rem;
  color: #df7900;
}

#content1 .text_area p {
  font-size: 1.5rem;
  line-height: 2.2em;
}

ここまでの変更を保存してブラウザで表示を確認してみると、コンテンツ1は次のように表示されます。

ブラウザの表示例
ブラウザの表示例

ヘッダーのときと同様に、font-sizeプロパティではフォントサイズを「rem」の単位を使って指定しています。
フォントサイズで指定できる単位はこれ以外にも「em」や「px」などいくつか用意されており、単位の種類と特徴は以下のようになります。

単位説明
pxピクセル単位の指定。
親要素のフォントサイズに影響されないが、レスポンシブ対応で解像度が異なる画面サイズに対応するときに注意が必要。
%親要素のフォントサイズに対する割合で単位を指定。
em親要素のフォントサイズを1emとして、相対的なフォントサイズを指定する。
remHTML要素のフォントサイズを1emとして、相対的なフォントサイズを指定する。
HTMLが入れ子になっているとき、親要素のフォントサイズに影響されないためレスポンシブ対応にも便利な単位。
vw「View Width」の略で、表示する端末の横幅に準じてフォントサイズを指定する。
1vwは表示幅の1%に該当する。
vh「View Height」の略で、表示する端末の高さに準じてフォントサイズを指定する。
1vhは表示高さの1%に該当する。

親要素にフォントサイズが影響されにくく、様々なデバイスでの表示に対応しやすい「rem」は非常に便利です。

今回はコンテンツ1のCSSをコーディングしてきました。
次回は続いてコンテンツ2の部分のCSSをコーディングしていきましょう。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。