レシピサイトをつくる(フッター部分の装飾)
- 余白を設ける
- メインメニューを最下部に固定する
- 大きいボタン状にする
完成イメージ
CSS
CSS全体のコード
/* ------------
メニュー共通
---------------*/
.footer-menu-wrapper,.main-menu-wrapper {
display: flex;
list-style: none;
justify-content: center;
}
/* ------------
フッターメニュー
---------------*/
div.footer-menu-container {
margin-top: 5rem;
li.menu-item {
margin-left: 1rem;
}
li.menu-item:first-child {
margin-left: 0;
}
}
/* ------------
メインメニュー
---------------*/
div.main-menu-container {
background-color: #fff;
/* 固定表示 */
position: fixed;
z-index: 1;
width: 100%;
bottom: 0px;
a {
color: #333;
text-decoration: none;
}
}
ul.main-menu-wrapper {
flex-wrap: wrap;
li.menu-item {
flex: 1 1 100px;
text-align: center;
// padding: .5rem;
}
a {
display: block;
padding: 1rem;
border: 5px double rgb(231, 156, 17);
background-color: #fff;
}
}
/* ------------
サイト情報
---------------*/
div.site-name {
text-align: center;
margin-bottom: 8rem;
}メニュー共通
- 横並び＆中央寄せのdisplay: flex、justify-content: centerにしています。
- リストの黒ぽちは不要なのでlist-style: noneで消しています。
フッターメニュー
- margin-top: 5remで上に余白を設けています。
- メニューが増えた時のために、リストのmargin-left:1remで余白を作っています。
コピーライト
- margin-bottom: 8remで下に余白を設けています。
- text-align: centerで中央揃えにしています。
メインメニュー
<div>
- position: fixed、bottom: 0pxで最下部に固定しています。
- z-index: 1で上に重ねています。(なくても今のところ大丈夫)
<ul>
- flex: wrap
<li>
- flex: 1 1 100pxで要素が等幅になります。
<a>
- display: blockにしてpadding:1remなどで余白を設ければボタンのような見た目になります。
ラッパー
Flexboxでは「flex: 1 1 100px;」を使用して、Flexアイテムに100pxのベース幅を与えて、それを伸縮させます。そして、flex-wrapプロパティにwrapを設定することで、Flexコンテナ内のFlexアイテムのラッピングも可能にしています。デフォルト値はnowrapです。
coliss
aタグの範囲を親に合わせる方法
【幅をいっぱいにする】aタグにdisplay:blcok
親のpaddingとborderをaタグに移しましょう。
https://csshtml.work/linkarea/#a