どのように作成するか：分割ナビゲーション

CSSを使って分割ナビゲーションバーを作成する方法を学ぶ。

分割ナビゲーションバーを作成

第1ステップ - HTMLを追加：

<div class="topnav">
  <a href="#home">ホーム</a>
  <a href="#news">ニュース</a>
  <a href="#contact">連絡先</a>
  <a href="#about" class="split">ヘルプ</a>
</div>

第2ステップ - CSSを追加：

/* 黒い背景のトップナビゲーションバーを作成 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* ナビゲーションバー中のリンクのスタイルを設定 */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* マウスオーバー時のリンクの色を変更 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* ナビゲーションバー内部に右対齐の（分割）リンクを作成 */
.topnav a.split {
  float: right;
  background-color: #04AA6D;
  color: white;
}

自分で試してみる

関連ページ

チュートリアル：レスポンシブなトップナビゲーションを作成する方法

チュートリアル：CSSナビゲーションバー