はじめに display:flexを使った横並びメニューの書き方をまとめました。 事前準備 ulタグにメニューの内容を記述し「list-style:none」を指定して縦に並べておきます。 見やすいようにデザインも少し整えておきます。 <ul> <li class="btn">menu1</li> <li class="btn">menu2</li> <li class="btn">menu3</li> <li class="btn">menu4</li> <li class="btn">menu5</li> </ul> /**list-styleを指定する**/ ul{ list-style: none; } /** 見た目を整える **/ body,ul,li{ margin:0px; padding:0px; } .btn{ padding:10px 30px; margin:2.5