ページの最下部、フッターを作っていきます。
1.大枠を作成する
フッターの中身は大きく５つのブロックに分けることが出来ます。
それぞれクラス名を付けて、HTMLファイルで枠組みを作ってみましょう。
ロゴやコピーライトの文字も入れてしまいます。
↓
※分かりやすいように行を空けています。実際のコードで改行を入れる必要はありません。
一旦保存してブラウザで見てみましょう。
元々あったbrandクラス以外はスタイル指定がないので、下図のような表示になるはずです。
簡単な部分を先に設定してしまいましょう。
間隔を開けるため、Accessエリアを囲っているsectionタグに「my-10」クラスを追加します。
cssファイルの方で以下の設定を記述してください。
- footerの背景色をロゴ(footer_rogo.gif)の背景色と同じ色にする
- footerにpaddingをつける
- copyrightの文字サイズ・揃え位置を変更する
これでフッターっぽい見た目にはなりました。
2.ナビゲーションとSNSアイコン
横並べで表示している、フッターナビゲーションとSNSアイコン部分を作ります。
どちらもリスト形式で書いていきます。
フッターナビゲーション
フッターナビゲーションの項目をリスト形式でHTMLファイルに書き込みます。
<ul> ～ <ul>間はヘッダーナビゲーションと一緒です。
index.html
「footer_nav」部分に適用されるスタイルを作成します。
style.css
横並びにするためにflexbox化するのはヘッダー部分と同じ。
ですが、フッターナビゲーションは中央に寄った配置になっていますよね。
navもしくはulに幅を設定してしまうと、画面幅が小さくなった時に表示が崩れる恐れがあります。
このため、解説ではli要素の幅指定することで調整しました。
もちろん別の方法でレイアウトして頂いても構いません。
ブラウザで表示を確認してください。
下図のように中央寄り、等間隔に配置されていれば、パソコン幅での作成は完了です。
li要素間の間隔は多少違っても構いません。
SNSアイコン
SNSアイコンを３つ並べた箇所も、フッターナビゲーションとほぼ同じ設定です。
フッターナビゲーションよりも間隔の狭い中央配置にしたいので、こちらはliタグの左右にmarginを設定しました。
index.html
style.css
ブラウザで表示を確認して下さい。
フッターナビゲーションと適度に間隔を取って配置されていればOKです。
3.店舗情報部分
店舗情報が書かれた部分を作ります。
まずは<p class="col-5">の中に、それぞれのテキストを入れてみます。
Contact,Access,Open,Closeの文字と、その下の情報には少し間隔が空いています。
この設定をするためにspanタグで囲い、新しい「footer_ttl」というクラスを追加します。
index.html
style.css
【この時点でのブラウザ表示】
全体を囲っている「footer_ttl」クラスのcssを書いていきます。
flexbox化して、横に広がりすぎないようにmax-widthを指定しました。
ブラウザで見てみると、上の図のようにそれぞれのブロックの並び順が違いますね。
完成図通りの表示になるようにorderプロパティを設定します。
まず、orderプロパティを使えるように、それぞれに独立したクラスを命名します。
index.html
cssファイルでorderプロパティを設定します。
style.css
保存してブラウザをリロードすると、表示順が変わります。
これでパソコン向けのレイアウトは完成です。