6. ナビゲーションをデザインする

2. ナビゲーションのリストスタイルをデザインする

通常、箇条書きリストは、行頭に●などの記号がつき、縦方向にリストされます。しかし、先ほど作成したIDスタイル「#navigation」内の箇条書きに対して横並びで記号無しリストにするため、そのスタイルを設定しましょう。

  1. [スタイルの適用]ウィンドウの[新しいスタイル]をクリックします。
    まず、IDスタイル「navigation」内のulタグに対してのスタイルを設定しますので、[セレクタ]ボックスに「#navigation ul」と入力します。
    ※IDスタイル名とタグ名との間には半角スペースを入れます。
  2. [リスト]カテゴリを開きます。
    リストの行頭のスタイルをなしにするため、[list-style-type]の値を「none」に指定します。
  3. 次に、[配置]カテゴリを開きます。
    [width]ボックスに「100%」と指定します。
  4. [ボックス]カテゴリを開きます。
    paddingとmarginをすべて0にするために、下の図のように指定します。
  5. 最後に[OK]ボタンをクリックします。
INDEX

▲このページのトップへ

Contents Menu

Site Search by Google


Web サイト内
Expression Web Books
Buy at amazon.co.jp Now

Ads

Microsoft MVP

Microsoft Most Valuable Professional
Microsoft MVP - Expression Web
(April 2009 - March 2011)
/ Expression
(April 2008 - March 2009)
/ FrontPage
(April 2005 - March 2008)
MVP Profile