[CSS]ロゴを左に、メニューを右に横並びに配置するヘッダーを作成

ここではHTMLサイト作成時に、ロゴを左に、メニューを右に横並びに配置する基本的なヘッダーの作り方を解説。

コピペで使えるheaderのHTMLとCSSを提供しているウェブサイトもいくつか紹介する。

オレンジ部分はデザインではないので注意

HTMLでロゴとメニューリストを作る

まずはロゴとメニューリストをHTMLで作る。

`<div class="logo">
　<img src="写真のURL">
</div>
<div class="list-menu">
　<ul class="list">
　　<li>Experience</li>
　　<li>Price</li>
　　<li>Room</li>
　</ul>
</div>`

HTMLだけだとロゴの下に、ulとliで作成されたリストがくる形になる。

ロゴのサイズはCSSで調整できる。

写真のURLがわからないという場合、Macだと、画像を押して右クリックした後に、optionボタンを押すと、パスネームをコピーできる場所がある。

CSSで調整する

`justify-content:flex-end; を指定.list-menu{
  margin-bottom: 50px;
}
.logo{
　//float: left;によって<logo>要素と<list-menu>要素が横並びになる
margin:10px 0 0 30px;
float:left;
}
.logo img{
　//logoのサイズ
width:50px;
}
ul.list {
//liのメニューを右に寄せる
display: flex;
justify-content: flex-end;
list-style: none;
}
li {
　// liの中の高さとか、間の調整
padding: 0 10px;
margin-top:30px;
}
`

justify-content:flex-end; を指定することで、右に寄せることができる。

他にもjustify-contentを調べると色々な並べ方ができる。