VOL14お知らせページのCSSを書く

お知らせ一覧のCSSをコーディングする

前回はお知らせページのHTML「information.html」を作成し、HTMLのみコーディングしてきました。
今はブラウザで表示してみると、以下のような表示になります。

ヘッダーとフッターについてはトップページと共通のためすでにCSSも出来ていますが、その間にあるコンテンツについてはCSSを書いていく必要があります。
CSSを書く場所についてはトップページのCSSと同じ「style.css」に書いていきます。

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

まずはコンテンツの幅と余白を指定してアウトラインを作成していきましょう。
コンテンツの左右余白と幅を指定するための外側のdiv要素（<div class=”wrapper”>〜</div>）については、すでに前回用意しました。
そこで、「style.css」に横幅と余白を指定するCSSをコーディングしてください。
赤字の箇所が追加するコードです（CSSの上部は記載を省略しています）。

style.css コード例

@charset "UTF-8";

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

// 省略


/* footer
------------------------------ */
#footer {
  padding: 18px 0;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  background-color: #222;
}


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

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

ブラウザで表示してみると、テキストが中央揃えになります。

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

コンテンツのCSSをコーディング

引き続き、コンテンツのCSSをコーディングしていきます。
以下の赤字のコードを追記してください。

style.css コード例

@charset "UTF-8";

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

// 省略


/* footer
------------------------------ */
#footer {
  padding: 18px 0;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  background-color: #222;
}


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

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

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

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

#information article .text_date {
  font-size: 0.85rem;
}

#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;
}

見出しやお知らせ内容のCSSはトップページの「コンテンツ2」でコーディングした内容と共通する部分も多くあります。

コンテンツの角を丸くするときはborder-radiusプロパティを使います。
今回は20pxを指定していますが、値が小さければ角丸のサイズも小さくなり、反対に大きくすると丸みが大きくなります。
例えば、5px、20px、40pxでは次のように角丸の大きさが異なります。

また、今回は4つの角をすべて20pxにしていますが、角ごとに異なる丸みを指定することもできます。

border-radiusプロパティの使用例

// (1)左上、右上、右下、左下：10px
border-radius: 10px;

// (2)左上と右下：5px、右上と左下：30px
border-radius: 5px 30px;

// (3)左上：10px、右上と左下：30px、右下：50px
border-radius: 10px 30px 50px;

// (4)左上：10px、右上：20px、右下：30px、左下：40px
border-radius: 10px 20px 30px 40px;

(2)のように値を2つ指定すると、対角線上にある角をペアにして角丸を指定することができます。

お問い合わせボタンのCSSをコーディング

最後に、お知らせ一覧の下に設置された「お問い合わせはこちら」ボタンのCSSを用意します。
しかしこちらはトップページに設置したボタンと全く同じため、できたら共通のCSSを適用したいところです。

そこで今回はCSSを追記するのではなく、トップページで書いたCSSのセレクタを修正してお知らせページでも同じCSSを適用できるようにしましょう。

style.css コード例

@charset "UTF-8";

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

// 省略

#content2 ol li:last-child {
  margin-bottom: 0;
}

#content2 ol li time {
  margin-right: 20px;
  font-size: 0.85rem;
}

.link_contact a {
  display: inline-block;
  padding: 15px 60px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  box-shadow: 0 5px 0 #b07c00;
  background-color: #e29000;
}

.link_contact a:hover {
  background-color: #e89d19;
}


/* footer
------------------------------ */

// 省略

トップページの「コンテンツ2」のCSSを書いたときは「#content2 .link_contact a {」とセレクタを指定していましたが、先頭の「#content2」を取って「.link_contact a {」に変更しました。
これで、class属性に「link_contact」がついているHTML要素の下にあるa要素は全て同じCSSを適用してボタンを表示できるようになります。

今回のボタンのように、CSSはセレクタの使い方次第で同じCSSを毎回書かずとも、同じCSSを複数の場所で適用することができます。

さて、ここまででお知らせページはHTMLとCSSのコーディングが完了しました。
ブラウザで改めて「information.html」を表示してみると、デザイン案とそっくりのページが表示されます。

次回からは「お問い合わせ」ページを作成していきましょう。