今回はメニューを表示する方法として、その①（レベル１）をご紹介しようと思います😊
使用言語は、マークアップ言語のHTMLとCSSのみです！
（ちなみに私はVueを使用してます）
HTML
とりあえず、表示するためにHTMLを書いてみます。
横並びにする項目を作るために、同じものを何個も書いたものです
<div class="menu">
<h1>This is an about menu</h1>
<div class="menuwrap">
<div class="menuimage">
<img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
<p class="menuname">カプチーノ</p>
<p class="menuprice">450円</p>
</div>
<div class="menuimage">
<img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
<p class="menuname">カプチーノ</p>
<p class="menuprice">450円</p>
</div>
<div class="menuimage">
<img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
<p class="menuname">カプチーノ</p>
<p class="menuprice">450円</p>
</div>
<div class="menuimage">
<img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
<p class="menuname">カプチーノ</p>
<p class="menuprice">450円</p>
</div>
<div class="menuimage">
<img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
<p class="menuname">カプチーノ</p>
<p class="menuprice">450円</p>
</div>
</div>
</div>
HTMLだけだと、縦に並んでしまいます。
これをCSSで横並びにしてみましょう！
CSS
横並びにするために必要なCSSは一行だけです！
.menuwrap{
display: flex;
}<div class=”menuimage”>を並列にするために、その上にあるクラスである<div class=”menuwrap”>にCSSを追加します！
いい感じに横並びになりました！
画像間の隙間や、サイズについては下記CSSのように微修正してみてください！
.menuimage{
width: 30%;
height: auto;
margin: 1%;
}
.menuimage img{
width: 100%;
height: auto;
}メリット
ここまでのメリットとしては、非常に簡単なコードで表現できることです。
サイトの管理をする人が少しコードを触れる人だったら、特に不便には感じないかもしれません。
デメリット
サイトの管理をする人が、コードについて詳しくない場合、このコード自体を修正することに抵抗がある可能性があります。
その場合は、別に管理画面を作成しそこにデータアップすることで、サイトに反映される仕組みにした方がいいかもしれません。
また、メニューが増えることによって、コードが長くなり見にくくなってしまいます。
自分で管理する場合を除いて、このコードは改善する必要がありそうです。。
まとめ
最終的に管理画面を作成、サーバにデータをアップ、それを繰り返し処理でサイトに表示させる方法までを詳しく説明していこうと思います！
最後まで読んでいただき、ありがとうございます！
↓よかったらいいねボタンをよろしくお願いします🥺
コメント