【HTML&CSS】サッと横並びを実装する

はじめに

シンプルなヘッダーを作成する時ってどんなプロパティで指定してますか？
僕の場合は簡単なのでdisplay:flexで実装してます。
けどサイト修正してるとまだまだfloatを使っているサイトも多く感じるのでfloatの復習するついでに、いろいろ試してみました。

対象

・要素を横並びさせるとき、flewboxしか使わない人
・古いサイトの修正でfloatに出会った人。

目標

ロゴ　　　　　　　　　　　　　　　　　　　会社案内　　事業内容　　採用情報　　お問い合わせ

みたいなヘッダーを作る

display:flex;を使う

index.html

  <div class="header__flex">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li>
        <li>事業内容</li>
        <li>採用情報</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__flex {
  display: flex;
  height:60px;
  align-items: center;
}
.header__flex nav {
  margin-left: auto;
}
.header__flex ul {
  display: flex;
}
.header__flex ul li {
  margin-left: 20px;
}

• 簡単
• 一応ベンダープレフィックスもつける（普段はSassで書くので今回は省略）

floatを使う

flexboxを使った時とHTML構造は同じです。わかりやすいようにクラス名の変更しているだけです。

index.html

  <div class="header__float">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li>
        <li>事業内容</li>
        <li>採用情報</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__float {
  overflow: hidden;
  clear: both;
　/*縦中央揃いにするためにヘッダーの高さを指定する*/
  line-height: 48px;
}
.header__float h1 {
  float: left;
}
.header__float nav {
  float: right;
}
.header__float nav ul li{
  float: left;
  margin-left: 20px;
}

• ロゴを左に浮かせたら、メニュリストを右に浮かせる。そしたら親要素の高さを取り戻すためにoverflow: hidden;を指定するという感じ。（簡単）
• メニューリスト内の
• はdisplay:line-blockで指定してもいいかも。

inline-blockを使う

flexboxを使った時とHTML構造は同じです。わかりやすいようにクラス名の変更しているだけです。

index.html

 <div class="header__inline_block">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li><li>事業内容</li><li>採用情報</li><li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__inline_block{
background-color:#68abc4;
}
.header__inline_block h1{
display: inline-block;
}
.header__inline_block nav{
display: inline-block;
width: 94%;
text-align: right;
}
.header__inline_block nav ul li {
display: inline-block;
margin-left:20px;
}

• ロゴを左寄せ、メニューリストを右寄せするときに大変。今回はメニューリストにwidthを指定してtext-alignで右寄せしたけど、レイアウトはすぐ崩れる。
• inline-blockでやるぐらいならfloatでヘッダー作った方がマシ。
• display:inline-blockって上に変な余白できるし、ロゴとメニューリストの縦中央揃えがシンプルにできない。

まとめ

floatに苦手意識はあったから、復習できてよかったかなと、思う。

自分で新規サイト作ったり、特に指定がなければflexboxで絶対大丈夫だと思います。