VOL12フッターのCSSを書く

フッターのCSSをコーディングする

前回までトップページのフッター以外のCSSをコーディングしてきました。
今回はトップページの最下部にあるフッターのCSSをコーディングしていきましょう。

CSSファイルは前回と同様に「style.css」を使用していきます。

テキストを中央揃えにする

最後に残っていたフッターですが、ページの中で一番シンプルです。
今回はHTMLの追加は必要ないため、「style.css」を開いてコンテンツ2の下に赤字のコードを追記してください。

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

フッターはfooter要素とp要素からなるため、CSSもこれだけで完了します。
ここまでコーディングされてきたら、今回は特に新しいことはなかったかと思います。

ブラウザで表示してみると、以下のようになります。

ようやくトップページが完成しました。

HTMLやCSSは変更するとブラウザですぐに変更内容が反映されるため、HTML中の文言やCSSの値をちょっとずつ変えてみてトライ＆エラーしてみると色々な発見があります。
もし興味があったら色々試してみてください。

次回からは2ページ目の「お知らせ」ページのHTML&CSSコーディングに入ります。