リストを横ナビゲーション

横並びのボックス(liにborderを指定した場合)

  • marginは通常計算(相殺されません)
  • paddingはブラウザにより影響
  • borderも計算に入れる
  • borderを計算に入れない場合、「box-sizing: border-box」を指定する
<body>
<nav class="gnav">
<ul>
<li class="new"><a href="#">新着情報</a></li>
<li class="info"><a href="#">お知らせ</a></li>
<li class="item"><a href="#">製品情報</a></li>
<li class="shop"><a href="#">店舗案内</a></li>
<li class="company"><a href="#">会社案内</a></li>
</ul>
</nav>
</body>
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
body {
  background: #fff;
  font-size: 16px;
}
.gnav {
  width: 800px;
  margin: 50px auto;
}
  .gnav ul {
    overflow: hidden;
  }
  .gnav li {
    float: left;
    text-align: center;
  }
  .gnav a {
    display: block;
    width: 160px;
    padding: 10px 0 8px 0;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
  }
  .gnav li:first-child a {
    border-left: 1px solid #aaa;
  }
  .gnav a:hover, .current {
    background: #f7f0A4;
  }

f:id:web-0220:20180603205219j:plain

Flexbox

  • 固定値の場合
  • ブラウザ幅が800px以下になると自動的に可変になる
gnav {
  width: 100%;
  margin: 50px auto;
}
  .gnav ul {
    display: flex;
    justify-content: center;  /* ブラウザ幅の値にかかわらず固定値が中央に配置される */
  }
  .gnav li {
    width: 160px;
    text-align: center;
    line-height: 1.6;
  }
  .gnav a {
    display: block; 
    padding: 10px 0 8px 0;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
  }
  • 可変値の場合(ブラウザ幅の60%で表示)
.gnav {
  width: 60%;
  margin: 50px auto;
}
  .gnav ul {
    display: flex;
    justify-content: center;
  }
  .gnav li {
    width: calc(100% / 5);
    text-align: center;
    line-height: 1.6;
  }
  .gnav a {
    display: block;
    padding: 10px 0 8px 0;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
  }

リキッドレイアウト(可変)

  • ベンダープレフィックスは割愛
  • 以下の2箇所を、書き換えます
.gnav {
  width: 60%;
  margin: 50px auto;
}
  .gnav li {
    float: left;
    width: calc(100% / 5);
    text-align: center;
  }
calc()
  • CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができる

求職者支援訓練 フェリカテクニカルアカデミー