【float完全攻略4】タイトル、メニュー横一線レイアウト

【float完全攻略4】タイトル、メニュー横一線レイアウト

PCサイズでのタイトル、ナビゲーションの配置は、かなり多くの割合で横一線配置が採用されていると思います。
floatプロパティを使ってそれをレイアウトしていきます。
まずHTMLです。下記コードを用意しました。

HTML

<header class="clearfix">
  <h2>ページタイトル</h2>
  <nav>
    <ul>
      <li><a href="#">メニューA</a></li>
      <li><a href="#">メニューB</a></li>
      <li><a href="#">メニューC</a></li>
      <li><a href="#">メニューD</a></li>
    </ul>
  </nav>
</header>

<nav>は<header>の中に書くか隣接するようにしまよう。

<nav>の位置関係

そして<nav>の中は<ul>で構造化してください。
見た目のデザインをどう変えようともメニューの内部構造は<ul>を使用してください。
このタイトル、メニュー横一線レイアウトのポイントはタイトルとメニューを両端揃えにすることです。
一番やり易いのはタイトルをfloat:left;
メニューをfloat:right;
にすると両端にすぐ揃ってくれます。
しかしメニューをfloat:right;にすると右から左に並んでしまいます。
メニューの並びは概ね左から右が多いのでfloat:right;は設定しないようにします。
ポイントは<h2>と<nav>をfloatで横並びにし、さらに<ul>の中の<li>にもfloatを設定して全部横並びにします。
まずcleatfixを設定しておきます。

CSS

　.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

<h2>と<nav>を２つに分けます。
そしてfloatを設定。

CSS

header h2{
  width: 50%;
  float: left;
}
header nav{
  width: 50%;
  float: left;
}

ナビゲーションの文字の部分を成形します。
注意するのが<a>の部分でdisplayの値がinlineになっているのでblockにしておかないと余白を設定することが出来ません。
そしてカーソルを上に持ってきたときに変化するよう擬似セレクタを用意しておきます。
私の場合は目立つように設定しています。

CSS

nav a{
  display: block;
  text-decoration: none;
  color: black;
  font-size: 14px;
  padding:10px 20px;
}
nav a:hover{
  color: blue;
  text-decoration: underline;
  background-color: lightblue;
}

そして<li>にfloatをかけます。

CSS

nav li{
  float: left;
}

さらにここから<nav>を右揃えにしていきます。
実質的には<ul>を右揃えにしてメニュー全体が右に揃ってるように表示させます。
方法は<ul>のwidthを固定し、marginの均等計算を利用します。

marginによる左、中央、右揃え

marginは値をautoにするとブラウザのサイズとwidthのサイズを自動的に計算します。
ですのでmargin-left:auto;とmargin-right:auto;を同時に設定すると要素全体を中央に持ってくることが出来ます。
それを応用しmargin-left:auto;とmargin-right:0;を同時に設定すると要素全体が右揃えになります。

CSS

nav ul{
  list-style-type: none;
  width: 410px;/*ここで幅の調整をする。カラム落ちや左に寄りすぎている場合サイズ変更*/
  margin-left: auto;
  margin-right: 0;
}