横並びリストでナビゲーションの作成

リンク文字のスタイルを設定するには

横並びリストメニューの枠と文字との間隔を空けるには、リンク文字のスタイルにパディングを指定します。

1. ［書式設定］-［新規スタイル］をクリックするか、［スタイルの適用］パネルの［新しいスタイル］をクリックします。
2. ［新しいスタイル］ダイアログボックスの［セレクター］ボックスには、「#top_nav li a」と入力します。最初の「.」も消すことを忘れないように注意しましょう。
3. ［定義先］は「既存のスタイルシート」、URLは「style.css」が選択されていることを確認します。
4. 枠線スタイルを指定します。ここでは、右辺に1ピクセルの実線を引きます。枠線のスタイルはborder-style、枠線の太さはborder-width、枠線の色はborder-colorプロパティで設定します。それぞれの［すべて同じにする］のチェックをはずしてそれぞれの［right］に値を指定します。実線は「solid」となります。
   
5. 続いて、リスト項目のパディングを指定します。［ボックス］カテゴリを開き、paddingプロパティにそれぞれ値を入力します。ここでは［すべて同じにする］のチェックははずして下の図のように上下5ピクセル、左右20ピクセルに指定します。
   
6. リンクの文字だけなく項目全体をリンク対象にするために、［レイアウト］カテゴリを開いて［display］プロパティを「block」にします。
   
7. リンクの文字スタイルを指定します。［フォント］カテゴリを開き、文字色は［color］プロパティで指定して、アンダーラインを消すために［text-decoration］プロパティの「none」にチェックを入れます。
   
8. 最後に背景色を指定します。［背景］カテゴリを開き、［background-color］プロパティに背景色を指定して［OK］ボタンをクリックします。
   
9. リスト項目のリンクスタイルのコードは以下のとおりです。

   #top_nav ul li a{
   	border-right-style: solid;
   	border-right-width: 1px;
   	border-right-color: #006600;
   	padding: 5px 20px 5px 20px;
   	display: block;
   	text-decoration: none;
   	color: #008800;
   	background-color: #FFFF66;
   }

問題は解決しましたか？

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！

▲このページのトップへ