[教えてエンジニア父ちゃん!] 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を指定しなくても、これで余白が作れるんですね。
これでそれぞれの要素が囲われて、メニューボタンっぽくなりました。

あとがき

flexの使い方を教わりました。 これでまた自分のできることが増えました。 エンジニア父ちゃんありがとう!

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた