透明なウェブサイトのナビゲーションバーを作成する方法

ナビゲーションバーを特定の方法でスタイリングすることにより、ビジネスのブランディングとデザインを強化できます。HTMLとCSS(Cascading Style Sheet)コードの組み合わせを使用して、ナビゲーションバーの外観を指示することで、サイト全体で一貫したルックアンドフィールを作成できます。ナビゲーションバーを透明にすることを選択した場合、これは、ナビゲーションバーが背景またはそれを含む要素の背景と同じ色になることを意味します。

1

ナビゲーションバーのHTMLセクションを作成します。作業しているページのHTMLファイルで、ナビゲーションバーを追加するセクションを見つけます。次のように要素を使用してそれを含めます。

開始タグと終了タグの間に、ナビゲーションリンクを配置できます。

2

必要なナビゲーションリンクごとにアンカー要素を含めます。「nav」要素内に、ユーザーが参照できるようにする各リンクのアンカー要素を追加します。以下は、サイトセクションにリンクするアンカー要素のサンプルです。

これは、このコードが表示されるページと同じディレクトリにある「about」という名前のフォルダにあるサイト内のセクションにリンクします。フォルダではなくページにリンクするには、HTMLのマークアップは次のように表示されます。 :

3

ページにスタイルセクションを追加します。ナビゲーションバーのスタイルを設定するには、CSSコードのセクションが必要です。ページのヘッドセクションで、終了タグの前に、次のように追加します。

この中に宣言を追加して、ページの要素のスタイルを設定できます。

4

アンカーのスタイルを設定します。ページのCSSセクションで、ナビゲーションバーのアンカーのスタイルを設定する宣言を追加します。たとえば、ID属性として「nav」を使用して内のすべてのアンカー要素のスタイルを設定するには、次のセレクターを使用できます。

/スタイル宣言/

}

これは、すべての状態のアンカーを示します。このセクション内に、強制したいスタイル宣言を追加できます。次に例を示します。

text-decoration:none; 幅:100px; 表示ブロック; float:left;

これらは、アンカーを水平線上に並べて表示するための標準プロパティです。要素自体のスタイルを設定するには、次の構文を使用します。

幅:800px; }

5

背景のスタイルを設定します。CSSのナビゲーションバーにbackgroundプロパティを適用しない場合、デフォルトでは透明な背景で表示されます。ただし、ページの背景またはその背後にある別の要素を含む状態で表示される場合があります。たとえば、body要素の次のCSS宣言により、背景画像がナビゲーションバーの後ろに表示されます。

body {background-image:url( "bgpic.jpg"); }

ナビゲーションバーに背景画像または色を指定しない限り、透明な背景で表示されます。