デザインコード紹介

Chapter4 レイアウト

Flexboxレイアウト – グローバルナビゲーション

更新日：

Flexboxレイアウト - グローバルナビゲーションのWebデザイン画像

HTML

<ul>
  <li><a href=""><span>About</span>私たちについて</a></li>
  <li><a href=""><span>Service</span>サービス</a></li>
  <li><a href=""><span>Price</span>料金</a></li>
  <li><a href=""><span>Contact</span>お問い合わせ</a></li>
</ul>

CSS

ul {
  display: flex;
  justify-content: space-between;
  width: 800px;
  list-style: none;
}

li {
  width: 25%;
  border-left: 1px solid #5b8f8f;
}

li:last-child {
  border-right: 1px solid #5b8f8f;
}

li a {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.6;
}

li a span {
  color: #5b8f8f;
  font-size: 13px;
}

アクセシビリティ対応

HTML（トップページ）

<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href=""><span>About</span>私たちについて</a></li>
    <li><a href=""><span>Service</span>サービス</a></li>
    <li><a href=""><span>Price</span>料金</a></li>
    <li><a href=""><span>Contact</span>お問い合わせ</a></li>
  </ul>
</nav>

HTML（下層ページ サービス）

<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href=""><span>About</span>私たちについて</a></li>
    <li><a href="" aria-current="page"><span>Service</span>サービス</a></li>
    <li><a href=""><span>Price</span>料金</a></li>
    <li><a href=""><span>Contact</span>お問い合わせ</a></li>
  </ul>
</nav>

更新履歴

  • アクセシビリティ項目の追加

    • できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。

    デザイン目次へ