CSSと画像なしのタブ付きナビゲーションを作成する方法

01/06

CSSと画像なしのタブ付きナビゲーションを作成する方法

CSS 3タブ付きメニュー。 J Kyrninによるスクリーンショット

ウェブページ上のナビゲーションはリストの一形式であり、タブ付きナビゲーションは水平リストのようなものです。 CSSで水平方向のタブ付きナビゲーションを作成するのはかなり簡単ですが、 CSS 3では、より見栄えの良いツールをいくつか提供しています。

このチュートリアルでは、CSSタブ付きメニューを作成するために必要なHTMLとCSSについて説明します。 どのように見えるかを見るには、そのリンクをクリックしてください。

このタブ付きメニューには画像なく 、HTMLとCSS 2とCSS 3だけが使用されます。タブを追加したり、テキストを変更したりするのは簡単に編集できます。

ブラウザのサポート

このタブメニューは、 すべての主要なブラウザで機能します 。 インターネットエクスプローラは丸みのあるコーナーを表示しませんが、Firefox、Safari、Opera、Chromeのようなタブが表示されます。

02の06

あなたのメニューリストを書く

すべてのナビゲーションメニューとタブは、実際には順序付けられていないリストです。 だから最初にやりたいことは、あなたのタブ付きナビゲーションをどこに行きたいかに応じてリンクのリストを並べることです。

このチュートリアルでは、HTMLをテキストエディタで記述し、Webページ上でメニューのHTMLをどこに配置するかを知っていることを前提としています。

あなたの順序付けられていないリストを次のように書く:

03/06

スタイルシートの編集を開始する

外部スタイルシートまたは内部スタイルシートを使用できます。 サンプルメニューページは、文書のに内部スタイルシートを使用します。

まずUL独自のスタイルを作成します

ここでは、HTMLでクラスタブリストを使用します。 あなたのページ上のすべての順序付けられていないリストをスタイルするULタグをスタイルするのではなく、ULクラスだけをスタイルする必要があります。 tablist CSSの最初のエントリは次のようになります:

.tablist {}

私は前に中括弧(})を入れておくのが好きなので、後でそれを忘れることはありません。

タブメニューリストには順序付けられていないリストタグが使用されていますが、箇条書きや数字に忍び寄ることはありません。最初に追加するスタイルは追加する必要があります。 リストスタイル:なし; これは、リストである間に、あらかじめ決められたスタイル(箇条書きや数字など)のないリストであることをブラウザに伝えます。

次に、リストの高さを、入力するスペースに合わせて設定できます。 私は高さに2emを選択しました。それは標準のフォントサイズの2倍であり、タブのテキストの上下に約半分を与えます。 高さ:2em; しかし、あなたはあなたが好きなサイズにあなたの幅を設定することができます。 ULタグは自動的に幅の100%を占めるため、現在のコンテナよりも小さくしない限り、幅を外にすることができます。

最後に、 マスタースタイルシートにULタグとOLタグのプリセットがない場合は、それらを配置する必要があります。つまり、ULの枠線、余白、パディングをオフにする必要があります。 パディング:0; マージン:0; ボーダー:なし; すでにULタグをリセットしている場合は、マージン、パディング、境界線をデザインに合うものに変更できます。

最後の.tablistクラスは次のようになります。

.tablist {リストスタイル:なし; 高さ:2em; パディング:0; マージン:0; ボーダー:なし; }

04/06

LIリスト項目の編集

順序付けされていないリストのスタイルを設定したら、その中にLIタグをスタイルする必要があります。 それ以外の場合は、標準リストのように動作し、タブを正しく配置しないで次の行に移動します。

まず、スタイルプロパティを設定します。

.tablist li {}

次に、タブが水平面に並ぶように浮動させたいとします。 float:left;

また、タブ間に余白を追加することを忘れないでください。それらは一緒にマージされません。 margin-right:0.13em;

あなたの李のスタイルは次のようになります:

.tablist li {float:left; margin-right:0.13em; }

05/06

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:hoverを追加する必要があります。

私はあなたがそれの上にマウスを置いたときにタブがポップするようにテキストと背景の色を変更するのが好きです。 背景:#3cf; 色:#fff;

そして私は、リンクに下線が引かれないようにするもう一つの思い出しをブラウザに加えました。 テキスト装飾:なし; 別の一般的な方法は、タブの上にマウスを置いたときに下線を戻すことです。 それをしたい場合は、それをtext-decoration:underlineに変更してください。

しかし、CSS 3はどこですか?

あなたが注目してきたのであれば、おそらく、スタイルシートにCSS 3スタイルが使用されていないことに気づいたでしょう。 これには、Internet Explorerを含む最新のブラウザーで作業する利点があります。 しかし、タブは正方形のボックス以上のものにはなりません。 border-radius(およびそれに関連するブラウザ固有の呼び出し)を追加することで、丸みをつけて、マニラフォルダのタブに近いように見えるようにすることができます。

.tablist liルールに追加するスタイルは次のとおりです。-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つのオプションがあります。

06の06

現在のタブを強調表示する

私が作成したHTMLには、ULにIDを持つリスト要素が1つありました。 これにより、あるLIに残りのスタイルとは異なるスタイルを与えることができます。 最も一般的な状況は、現在のタブを何らかの形で目立たせることです。 これを考えるもう一つの方法は、ライブではないタブをグレーアウトしたいということです。 その後、異なるページにあるIDの場所を変更します。

#current Aタグと#current A:hover staの両方を、少しずつ異なるようにスタイル付けします。 あなたは、その要素の色、背景色、高さ、幅、および詰め物を変更することができます。 デザインに何らかの変更があればそれを意味します。

.tablist li#current a {背景色:#777; 色:#fff; } .tablist li#現在のa:ホバー{背景:#39C; }

そして、あなたは終わった! あなたはあなたのウェブサイト用のタブ付きメニューを作成しました。