ナビゲーション バーは、表セルの行内に配置されたグラフィック イメージで構成されます。表以外のページ コンテンツを見つけるために表を使用することは推奨されなくなったため、Web を作成している多くの人は、構造化されたコンテンツを使用する (新しい) 方法を探しています。
ナビゲーション バーを作成するための XHTML マークアップと CSS フォーマット。
シンプルなCSSナビゲーションバー
おそらく、CSS スタイルのテキスト ナビゲーション バーを作成する最も簡単な解決策は、例 A のように、すべてのリンクを 1 行のテキストに配置することです。
このアプローチは合理的かつ直観的であるように思えます。しかし問題は、すべてのリンクを 1 行のテキストに入れると、リンク間およびリンクの前後の空白を制御するのが難しくなるということです。したがって、すべてのリンクが混雑するのを避けるには、次のことを行った方がよいでしょう。
その後、通常はパイプ (縦棒) と改行以外の空白文字を区切り文字として挿入する必要があります。
以下のコードが示すように、結果は、私たちが望む明確で構造化されたマークアップとはほとんど異なります。
| 引用した内容は以下の通りです。 <div id="navbar1"> <a href="link1a.html">ボタン 1</a> <a href="link2a.html ">ボタン 2</a> | <a href="link3a.html "> ボタン 3</a> </div> |
リストベースの CSS ナビゲーション バー CSS ナビゲーション バーを作成するもう 1 つの方法は、<ul> タグと <li> タグを使用してリンクを順序なしリストとして表すことです。
一見すると、順序なしリストをナビゲーション バーに使用することは直観に反しているように思えます。これは、順序なしリストを垂直方向に押し上げられた項目のリストであり、各項目の前に箇条書きがあると考えることに慣れているためです。これは、ナビゲーション バーの水平方向と矛盾しているように見えます。
ただし、独立したリスト項目のコレクションとしてのリストの論理構造は、ナビゲーション バーのリンクに適用できます。また、CSS ルールを使用すると、リスト項目のデフォルトの表示を強制的に上書きしたり、箇条書きを削除したり、代わりにページ上のリスト項目を配置したりできます。以下のフロートの。
これを理解した上で、順序なしリストに基づいて CSS スタイルおよび XHTML ラベルの付いたナビゲーション バーを作成する例 B を見てみましょう。
XHTML マークアップは次のとおりです。
| 引用した内容は以下の通りです。 <div id="navbar2"> |
テキスト リンクのリストをナビゲーション バーに変換する CSS コードは次のとおりです。
| 引用した内容は以下の通りです。 div#navbar2 { |