ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL12フッターのCSSを書く

トップページの最下部にあるフッターのCSS(スタイルシート)を書いていきます。

この記事のポイント

  • フッター部分のCSSをコーディングする
  • 今回でトップページが完成

目次

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

前回までトップページのフッター以外の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コーディングに入ります。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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