[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を調べると色々な並べ方ができる。


その他ヘッダー作りに参考になるウェブサイト

基本的なヘッダーを作成できるようになったら、どんどん応用編を作成したい。


コピペで使える様々なヘッダー

いかに、参考になりそうなサイトリンクを共有。


トップ画像も一緒に趣向を凝らして差別化

https://www.shapedivider.app/

トップ画像など、波模様や本型に変えることができるshapedivider。

ヘッダーと共に一緒に考えてかっこいいトップページを作りたい。


ヘッダー作りに関する関連記事

下記の記事も参考になるかもしれません。

こちらに、HTMLサイトの作り方についてもまとめた。