ウェブページ上のナビゲーションはリストの一形式であり、タブ付きナビゲーションは水平リストのようなものです。 CSSで水平方向のタブ付きナビゲーションを作成するのはかなり簡単ですが、CSS 3では、より見栄えの良いツールをいくつか提供しています。
このチュートリアルでは、CSSタブ付きメニューを作成するために必要なHTMLとCSSについて説明します。どのように見えるかを見るには、そのリンクをクリックしてください。
このタブ付きメニューでは、画像なし、HTMLとCSS 2とCSS 3だけです。簡単に編集して、タブを追加したり、テキストを変更することができます。
ブラウザのサポート
このタブメニューはすべての主要なブラウザ。 Internet Explorerには丸みのあるコーナーは表示されませんが、Firefox、Safari、Opera、Chromeのようなタブが表示されます。
あなたのメニューリストを書く
すべてのナビゲーションメニューとタブは、実際には順序付けられていないリストです。だから最初にやりたいことは、あなたのタブ付きナビゲーションをどこに行きたいかに応じてリンクのリストを並べることです。
このチュートリアルでは、HTMLをテキストエディタで記述し、Webページ上でメニューのHTMLをどこに配置するかを知っていることを前提としています。
あなたの順序付けられていないリストを次のように書く：
class = "tablist">CSS 3id = "現在の">タブにとってメニュー
class = "tablist"そしてid = "現在"。最初は 必須。あなたがタブリストクラスを並べ替えると、タブは機能しません。 2番目はオプションです。置くid = "現在"そのページでハイライト表示されたいタブのいずれかを選択します。通常、これを使用してページを強調表示しますが、最も重要なタブを強調表示するために使用できます。または完全に削除することもできます。
スタイルシートの編集を開始する
外部スタイルシートまたは内部スタイルシートを使用できます。サンプルメニューページでは、内部スタイルシートが使用されます。
ドキュメントのまずUL独自のスタイルを作成します
ここでクラスを使用しますタブリスト HTMLで。あなたのページ上のすべての順序付けられていないリストをスタイルするULタグをスタイルするのではなく、ULクラスだけをスタイルする必要があります。タブリスト したがって、CSSの最初のエントリは次のようになります。
.tablist {}
私たちは、前に中括弧（}）を入れたいので、後で忘れないでください。
タブメニューリストには順序付けられていないリストタグが使用されていますが、箇条書きや数字に忍び寄ることはありません。最初に追加するスタイルは追加する必要があります。リストスタイル：なし; これは、リストである間に、あらかじめ決められたスタイル（箇条書きや数字など）のないリストであることをブラウザに伝えます。
次に、リストの高さを、入力するスペースに合わせて設定できます。高さは2emを選択しました。これは標準のフォントサイズの2倍で、タブのテキストの上と下に約半分を与えます。高さ：2em; しかし、あなたはあなたが好きなサイズにあなたの幅を設定することができます。 ULタグは自動的に幅の100％を占めるため、現在のコンテナよりも小さくしない限り、幅を外にすることができます。
最後に、マスタースタイルシートにULタグとOLタグのプリセットがない場合は、それらを配置する必要があります。つまり、ULの枠線、余白、パディングをオフにする必要があります。 パディング：0;マージン：0;ボーダー：なし; すでにULタグをリセットしている場合は、マージン、パディング、境界線をデザインに合うものに変更できます。
最後の.tablistクラスは次のようになります。
.tablist {リストスタイル：なし;高さ：2em;パディング：0;マージン：0;ボーダー：なし; }
LIリスト項目の編集
順序付けされていないリストのスタイルを設定したら、その中にLIタグをスタイルする必要があります。それ以外の場合は、標準リストのように動作し、タブを正しく配置しないで次の行に移動します。
まず、スタイルプロパティを設定します。
.tablist li {}
次に、タブが水平面に並ぶように浮動させたいとします。 float：left;
また、タブ間に余白を追加することを忘れないでください。それらは一緒にマージされません。 margin-right：0.13em;
あなたの李のスタイルは次のようになります：
.tablist li {float：left; margin-right：0.13em; }
CSS 3でタブのように見えるようにする
このスタイルシートで大部分の作業を行うために、順序付けられていないリスト内のリンクを対象としています。ブラウザは他のタグよりもリンクがウェブページ上で多くなることを認識しているため、アンカータグ（リンク）に添付しておくと、古いブラウザがホバー状態に慣れるのが簡単になります。最初にスタイルプロパティを記述します：
.tablist li a {} .tablist li a：ホバー{}
これらのタブはアプリケーションのタブのように動作する必要があるため、リンクされたテキストだけでなく、タブの全領域をクリック可能にしたいとします。これを行うには、Aタグを通常の「インライン」状態からブロック要素に変換する必要があります。 表示ブロック; （違いについてもっと知りたい場合は、ブロックレベルとインライン要素を読んでください）。
次に、タブを互いに左右対称にする簡単な方法ですが、テキストの幅に合わせて曲げることは、左右のパッドを同じにすることです。パッディング短縮形プロパティを使用して、上端と下端を0に設定し、左右を1emに設定しました。 パディング：0 1em;
また、リンクのアンダーラインを削除することで、タブがリンクに似ていないようにしました。しかし、あなたの聴衆がそれで混乱するかもしれない場合は、この行を外してください。 リンク装飾：なし;
タブの周りに薄い境界線を置くことで、タブのように見えます。私たちは、国境の省略形のプロパティを使用して、四辺すべての周りに境界線を配置しました ボーダー：0.06em solid＃000; そして、border-bottomプロパティを使用して、bottom-bottomプロパティを底から削除しました。 border-bottom：0;
次に、タブのフォント、色、背景色を調整しました。あなたのサイトに合ったスタイルに設定してください。 フォント：太字0.88em / 2em arial、geneva、helvetica、sans-serif;色：＃000;背景色：#ccc;
上記のスタイルはすべてセレクタに入る必要があります.tablist li a、一般的にアンカータグに影響するようにルールを設定します。次に、タブをクリック可能にするには、いくつかの状態ルールを追加する必要があります.tablist li a：ホバー.
マウスの上にマウスを置くと、テキストと背景の色を変えてタブがポップするようにします。 背景：＃3cf;色：#fff;
また、リンクに下線が引かれないようにするための注意をブラウザに追加しました。 テキスト装飾：なし; 別の一般的な方法は、タブの上にマウスを置いたときに下線を戻すことです。それをやりたければ、それに変更してください テキスト装飾：下線;
しかし、CSS 3はどこですか？
あなたが注目してきたのであれば、おそらく、スタイルシートにCSS 3スタイルが使用されていないことに気づいたでしょう。これには、Internet Explorerを含む最新のブラウザーで作業する利点があります。しかし、タブは正方形のボックス以上のものにはなりません。 border-radius（およびそれに関連するブラウザ固有の呼び出し）を追加することで、丸みをつけて、マニラフォルダのタブに近いように見えるようにすることができます。
あなたが追加するべきスタイル .tablist li a ルールは次のとおりです。 -webkit-border-top-right-radius：0.50em; -webkit-border-top-left-radius：0.50em; -moz-border-radius-topright：0.50em; -moz-border-radius-topleft：0.50em; border-top-right-radius：0.50em;ボーダー - 左上 - 半径：0.50em;
これは私たちが書いた最終的なスタイルルールです：
.tablist li a {display：ブロック;パディング：0 1em;テキスト装飾：なし;ボーダー：0.06em solid＃000; border-bottom：0;フォント：太字0.88em / 2em arial、geneva、helvetica、sans-serif;色：＃000;背景色：#ccc; / * CSS 3要素* / webkit-border-top-right-radius：0.50em; -webkit-border-top-left-radius：0.50em; -moz-border-radius-topright：0.50em; -moz-border-radius-topleft：0.50em; border-top-right-radius：0.50em;ボーダー - 左上 - 半径：0.50em; } .tablist li a：ホバー{背景：＃3cf;色：#fff;テキスト装飾：なし; }
これらのスタイルでは、すべての主要なブラウザで動作するタブ付きメニューがあり、CSS 3準拠のブラウザではすばらしい印刷されたタブのように見えます。次のページでは、さらにそれをドレスアップするために使用できるもう1つのオプションがあります。
現在のタブを強調表示する
私たちが作成したHTMLには、ULにIDを持つリスト要素が1つありました。これにより、あるLIに残りのスタイルとは異なるスタイルを与えることができます。最も一般的な状況は、現在のタブを何らかの形で目立たせることです。これを考えるもう一つの方法は、ライブではないタブをグレーアウトしたいということです。その後、異なるページにあるIDの場所を変更します。
#current Aタグと#current A：hover staの両方を少しずつ異なるようにスタイル付けします。あなたは、その要素の色、背景色、高さ、幅、および詰め物を変更することができます。デザインに何らかの変更があればそれを意味します。
.tablist li＃current a {背景色：＃777;色：#fff; } .tablist li＃現在のa：ホバー{背景：＃39C; }
そして、あなたは終わった！あなたはあなたのウェブサイト用のタブ付きメニューを作成しました。
