フッターの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コーディングに入ります。