お問い合わせページの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ページを繋げていきます。