CSSでフッターのメニューを横並びにしてデザインしてみました。
CSSで実現したいことはメニューリストを横並びではなく、メニュー自体を横並びにするフッターのメニューです。
ulやolタグでマークアップしたリスト形式のメニューは縦に並びますが、CSSでフッターのメニューを横並びの3列のレイアウトを組んでシンプルデザインにしてみたので興味ある方は読んでみてください。
CSSでフッターのメニューを横並びにする目標
CSSでフッターのメニューを横並びにする目標を立てておきました。フッターの完成イメージですね。
フッターでメニューが横並びになるため、コンテンツの詰め込み過ぎた印象を出さないように余白を使い中央配置にして、横に並ぶメニューリストが目標です。
フッターまでスクロールしたときメニューに目が行きやすいようなシンプルフッターを目指して作成しました。
またスマホ画面のときのフッターメニューは、縦になるレスポンシブにするのが目標です。
フッターにメニューを入れたHTML構造
CSSでフッターのメニューを横並びにできるようにフッター要素をHTMLで作成しておきます。
<footer>
<div class="foot-wrap">
<div class="menu-left">
<h3>menu-left</h3>
<ul class="foot-left">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<div class="menu-center">
<h3>menu-center</h3>
<ul class="foot-center">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<div class="menu-right">
<h3>menu-right</h3>
<ul class="foot-right">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<small class="cmark">©️copyright 2020
<a href="#">sample-site.</a>
</small>
</div>
</footer>
フッターのHTML構造はbody要素にfooterタグでマークアップして、footer要素の子要素としてスタイルあてに使用するdiv要素にclass属性を任意でつけて作成しておきます。
フッターメニューにするメニューリストは、ulタグとliタグでリストを3セット作成します。作成したリスト3つにもdivでclass属性を任意でつけておき、CSSのクラスセレクタとして使用します。
3セット作成したメニューリストは、CSSでフッターメニューを横並びの3列にするために必要な要素になります。
CSSでフッターメニューを横並び3列にする
一番はじめにCSSでフッターメニューを横並び3列にしてしまいます。
.foot-wrap .menu-left, .menu-center, .menu-right {
display: inline-block;
width: 20%;
margin: 50px auto;
}
フッターの中のメニュー要素は3セット作成してあり、それぞれのulタグにclass属性を任意でつけてあります。
- menu-left
- menu-center
- menu-right
上記の3つのクラス名と、横並びにするメニュー3セット全てを囲むdiv要素のclass名を半角スペースの結合子で連結することで、フッターメニューを横並びにするCSSのセレクタにします。
連結したセレクタの中では、CSSのdisplayプロパティを指定してinline-blockでメニューをインラインにして並べ直すことで3つのメニューは、フッター要素の中で横並びになります。
CSSでフッターと横並びメニューをデザイン
CSSでフッターのメニューを横並びにしたので、あとは横に並んだメニューをCSSでデザインします。
フッターのメニューをリスト形式でマークアップしている場合は、ul要素なら黒ポチがメニューリストのli先頭に表示されてしまい、そのliの黒ポチには余白があります。
- リストの点を消す
- リスト左の余白なくす
.foot-wrap ul {
list-style: none;
padding: 0;
line-height:40px;
}
フッターメニューのulにCSSで、list-style: none;でリストの点を消し、消しても残っているリスト左の余白をpadding: 0;でなくすことで、フッターの横並びのメニューの位置ずれを直せるデザイン調整ができます。
.foot-wrap {
background-color: #333;
color: #fff;
text-align: center;
}
そしてフッターをスタイルするdivのクラス名をCSSのクラスセレクタにして、フッターの背景カラーをbackground-colorで、文字カラーはcolorで指定し、3列横並びメニューをフッター要素の中でtext-align: center;で中央配置にします。
.foot-wrap h3 {
border-bottom: 3px solid #2ac5b3;
padding: 10px;
}次に横並びのフッターメニュー上にある見出しのデザインを整えます。
見出しとメニューの区別がつくように、見出し下にボーダーをborder-bottomで適用しておきます。このとき適用したborder-bottomのボーダーと見出しがくっつきすぎるのでpaddingで余白を作ります。
そして横並びフッターメニューのリストでリンクするaタグの下線を消し、リンクテキストのカラーと、リンクにマウスが乗ったときのホバー時のリンクテキストカラーを変更します。
.foot-wrap a {
text-decoration: none;
color: #fff;
}
.foot-wrap a:hover {
color: deeppink;
}
text-decoration: none;でリンク線を消します。そしてリンクテキストのカラーは、フッター要素のボックスを黒系の背景色にしているため、color: #fff;の指定で白文字にします。
メニューリストのリンクのホバー時は、CSSの擬似クラス:hoverをフッターメニューのaタグに指定します。マウスがリンクテキストに乗ったときのカラーを指定できます。
次にフッターで横並びメニュー下に配置したコピーライトのデザインを整えます。
.foot-wrap .cmark {
display: block;
padding: 10px;
border-top: 1px solid gray;
width: 80%;
margin: 0 auto;
color: gray;
}
display: block;の指定で、コピーライトの要素を改行で下に配置します。
そしてborder-topでフッターメニューとコピーライトの間に線を引くことでメニューとコピーライトとの区別をつけます。
ボーダーの幅はコピーライトの幅を少し小さくすることで、横並びメニューに対してシンプルに対抗できるようなコピーライトにデザインします。
フッターの横並びメニューを縦にする
フッターの横並びのメニューを縦にすることも必要です。
フッターのメニューを横並びにした3列のメニューは、スマホ画面で見ると画面幅が小さいので、横並びにしたメニューが縮小されてしまい、並んだメニューが潰れた状態のメニューになります。
潰れた状態の横並びのメニューは、スマホ画面のときだけ縦並びになるようにレスポンシブなフッターにします。
@media screen and (max-width: 900px) {
.foot-wrap .menu-left, .menu-center, .menu-right {
display: flex;
flex-direction: column;
width: 50%;
}
.foot-wrap .cpr {
display: inline;
}
}
CSSでメディアクエリを使用します。スクリーンの幅の最大サイズを指定することで、フッターメニューが最大幅までの画面サイズでは、メニューが縦に切り変わる指定ができます。
横並びのフッターメニューを縦に切り替えるために、フッターメニューをマークアップしてる親要素の.foot-wrapと3つのメニューリストの .menu-left, .menu-center, .menu-rightを結合子で連結したセレクタを作ります。
そしてセレクタの中でプロパティは、display: flex;を指定して、flex-direction: column;でフッターの横並びメニューを縦メニューに変更します。
フッターメニュー下に位置してるコピーライトは、横並び表示にしておきたいので、要素をdisplay: inline;でインライン表示にします。
フッターをデザインしたCSSとHTMLの全コード
CSSでフッターのメニューを横並びの3列にするために作成したHTMLとCSSの全てのコードは以下です。
HTML
<footer>
<div class="foot-wrap">
<div class="menu-left">
<h3>menu-left</h3>
<ul class="foot-left">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<div class="menu-center">
<h3>menu-center</h3>
<ul class="foot-center">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<div class="menu-right">
<h3>menu-right</h3>
<ul class="foot-right">
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
<li><a href="#">footer-menu</a></li>
</ul>
</div>
<small class="cmark">©️copyright 2020
<a href="#">sample-site.</a>
</small>
</div>
</footer>
CSS
.foot-wrap {
background-color: #333;
color: #fff;
text-align: center;
}
.foot-wrap .menu-left, .menu-center, .menu-right {
display: inline-block;
width: 20%;
margin: 50px auto;
}
.foot-wrap ul {
list-style: none;
padding: 0;
line-height:40px;
}
.foot-wrap h3 {
border-bottom: 3px solid #2ac5b3;
padding: 10px;
}
.foot-wrap a {
text-decoration: none;
color: #fff;
}
.foot-wrap a:hover {
color: deeppink;
}
.foot-wrap .cmark {
display: block;
padding: 10px;
border-top: 1px solid gray;
width: 80%;
margin: 0 auto;
color: gray;
}
@media screen and (max-width: 900px) {
.foot-wrap .menu-left, .menu-center, .menu-right {
display: flex;
flex-direction: column;
width: 50%;
}
.foot-wrap .cpr {
display: inline;
}
}
フッターは、本体のコンテンツの質の向上のために活用した方が良いということを聞いたことがあります。
本体コンテンツの質を向上するために思いつくのは、やはりメニューでサイト全体を移動できるようにすることかと思います。
しかしフッターに要素を詰め込みすぎると、逆にページ移動が迷うかもしれないので、フッターメニューで逆効果になることがないようなシンプルなメニューにするのも悪くはないかなと思えました。
