[教えてエンジニア父ちゃん!] flexプロパティでメニューボタンを作ってみよう!
先日、やっと自分でサイトを作ってみるということが出来るようになりました。
そのときに、メニューを横並びにして書く方法を知らなすぎて、これはflexを勉強しなくては…!と感じていたところ、父が教えてくれたので、その教わった内容を残しておきたいと思います。
flexの使い方
flexで要素を横並びにする
まずhtmlではメニューの内容をdivタグのなかに書いていきます。 クリックしてページを飛べるようにしたいので、リンクも設置。<div class="flex">
<div><a href="toppage.html">トップ</a></div>
<div><a href="greeting.html">ご挨拶</a></div>
<div><a href="profile.html">プロフィール</a></div>
<div><a href="contact.html">お問い合わせ</a></div>
</div>
cssでは、まず次のように書きます。
.flex {
display: flex;
}
では表示をみてみましょう。
あれ?横並びにするのは思ったよりシンプル!
余白を作る・コンテンツを寄せる
次はもっとメニューボタンぽくなるように、CSSを書き加えます。.flex {
display: flex;
justify-content: center;
gap: 10px;
}
.flex >* {
border: 1px solid black;
padding: 10px;
width: 120px;
text-align: center;
}
.flex >*
flex要素のすぐ下だけに指示を出しています。
justify-content: center;
コンテンツを中央に寄せます。
gap
これで要素の間に10pxの隙間ができます。
marginやpaddingを指定しなくても、これで余白が作れるんですね。
これでそれぞれの要素が囲われて、メニューボタンっぽくなりました。
コメント
コメントを投稿