Frontend Technology

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

2021-01-12

ヘッダーの作成方法について整理。左にロゴ、右をおく基本的なスタイル。



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だけだとこんな感じになる。ロゴのサイズも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を調べると色々な並べ方ができる。

-Frontend, Technology