最終更新日：2021.04.01
公開日：2021.03.17

ワークショップ

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

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

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

この記事のポイント

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

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

前回はヘッダー部分のCSSをコーディングしてきました。
今回は引き続き、ヘッダーの下にある「コンテンツ1」の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として、相対的なフォントサイズを指定する。
rem	HTML要素のフォントサイズを1emとして、相対的なフォントサイズを指定する。 HTMLが入れ子になっているとき、親要素のフォントサイズに影響されないためレスポンシブ対応にも便利な単位。
vw	「View Width」の略で、表示する端末の横幅に準じてフォントサイズを指定する。 1vwは表示幅の1%に該当する。
vh	「View Height」の略で、表示する端末の高さに準じてフォントサイズを指定する。 1vhは表示高さの1%に該当する。

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

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

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

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

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

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

この記事のポイント

目次

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

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

index.html

style.css

style.css

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

style.css

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

記事一覧