Tablet View
SP View
footer_008
サイトマップの分割数が多く５分割のブロックとして分けたフッター
社名・住所等の表記、サイトマップ、ロゴとSNSとコピーライト。という３つのブロックを組み合わせたフッター。
サイトマップは１カラム目に文字数の多い項目が入るように考慮し、スマホでは１カラム目はwidth:100%にしています。全てのカラムを100%にするとスマホで右側に余白が多くできがちになってしまいますので、カラム２〜５はCSSで横に２カラム並ぶように設定しています。
- お問い合せのリンクは、スマホでは一番上に表示されるようにパソコンではfloatを設定して右にしています。
- ５カラムのメニューは、CSSで幅を調整してなるべく改行がないように調整することが見やすくするカギになります。また、スマホでは１カラム目のみ１つで、２・３カラム、４・５カラムと２カラムが横並びになる設定にしています。メニューの文字数が少ない時にスマホで１カラム並びにすると余白だらけになってしまうことがありますが、そんな時にオススメの設定です。
- ３つ並んでいるSNSアイコンは、CSSでリンクに対して余白（margin）を設定することで間隔を調整しています。