VOL16お問い合わせページのCSSを書く

お問い合わせページのCSSをコーディングする

前回はお問い合わせページのHTMLファイル「contact.html」を作成して、HTMLのみコーディングしてきました。
まだCSSを書いていない状態でブラウザに表示してみると、以下のような表示になります。

お知らせページを作ったときと同様に、ヘッダーとフッターは全てのページで共通になるためすでにCSSまで出来ている状態です。
そして今回はその間になるコンテンツ部分に対してCSSを書いていきます。

CSSは今までと同じ「style.css」の中に書いていきます。

アウトラインのCSSをコーディング

まずはコンテンツの横幅と左右余白を指定して、アウトラインを作成しておきましょう。
「style.css」を開いて、お知らせページのCSSの下に追記する形で赤字のコードを入力してください。
（長くなってしまうため、CSSの上部は記載を省略します）

style.css コード例

@charset "UTF-8";

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


// 省略


#information article h2 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-size: 1.15rem;
  line-height: 1.8em;
  border-bottom: 2px solid #d5c800;
}

#information article .text_content {
  line-height: 2.0em;
  font-size: 0.85rem;
}


/* contact
------------------------------ */
#contact {
  padding: 80px 0 60px;
  color: #222;
  text-align: center;
  background-color: #e9e279;
}

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

この時点でブラウザで表示してみると、テキストが中央揃えになったページが表示されます。

アウトラインのCSSができました。

コンテンツのCSSをコーディング(1)

引き続き、コンテンツのCSSをコーディングしていきます。
article要素内にあるテキスト以外の部分のCSSをコーディングして、全体のレイアウトを完成させます。
以下の赤字のコードを追記してください。

style.css コード例

@charset "UTF-8";

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


// 省略


#information article h2 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-size: 1.15rem;
  line-height: 1.8em;
  border-bottom: 2px solid #d5c800;
}

#information article .text_content {
  line-height: 2.0em;
  font-size: 0.85rem;
}


/* contact
------------------------------ */
#contact {
  padding: 80px 0 60px;
  color: #222;
  text-align: center;
  background-color: #e9e279;
}

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

#contact h1 {
  display: inline-block;
  margin: 0 auto 30px;
  padding-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 4px solid #222;
}

#contact .text_lead {
  margin-bottom: 35px;
  line-height: 2.0em;
  font-size: 0.85rem;
}

#contact article {
  margin-bottom: 40px;
  padding: 40px 40px 35px;
  text-align: left;
  border-radius: 20px;
  background-color: #fff;
}

今回は見出しの「お問い合わせ」とaritle要素の間にp要素がありますが、お知らせページとほぼ同じレイアウトになります。
ここで改めてブラウザでページの表示を確認してみると、以下のようになります。

コンテンツのCSSをコーディング(2)

続いて、aritcle要素内のCSSを書いていきます。
「style.css」を開いて、以下のコードを入力してください。

style.css コード例

@charset "UTF-8";

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


// 省略


#information article h2 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-size: 1.15rem;
  line-height: 1.8em;
  border-bottom: 2px solid #d5c800;
}

#information article .text_content {
  line-height: 2.0em;
  font-size: 0.85rem;
}


/* contact
------------------------------ */
#contact {
  padding: 80px 0 60px;
  color: #222;
  text-align: center;
  background-color: #e9e279;
}

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

#contact h1 {
  display: inline-block;
  margin: 0 auto 30px;
  padding-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 4px solid #222;
}

#contact .text_lead {
  margin-bottom: 35px;
  line-height: 2.0em;
  font-size: 0.85rem;
}

#contact article {
  margin-bottom: 40px;
  padding: 40px 40px 35px;
  text-align: left;
  border-radius: 20px;
  background-color: #fff;
}

#contact article h2 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-size: 1.15rem;
  line-height: 1.8em;
  border-bottom: 2px solid #d5c800;
}

#contact article .text_content {
  line-height: 2.0em;
  font-size: 0.85rem;
}

#contact article .text_content a {
  color: #0072d3;
  font-weight: 700;
}

#contact article .text_content a:hover {
  text-decoration: underline;
}

擬似クラス「:hover」を使ってCSS「text-decoration: underline;」を適用しています。
この設定でa要素にマウスカーソルが乗っているときは、リンクが分かりやすいように下線を表示させることができます。
マウスカーソルがa要素から離れると、擬似クラス「:hover」のCSSは適用が外れるため下線も非表示の状態に戻ります。

ここまでで、お問い合わせページのCSSが完成です。
もう一度ブラウザで表示してみると、デザイン案の通りのページが表示されます。

いよいよ、全てのページのHTML＆CSSのコーディングが完了しました。
次回は仕上げとして、各ページにリンクを設定して3ページを繋げていきます。

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

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