TOP > Expression > Tips > スタイルシート

リストの先頭画像のずれを修正するには

Google Bookmarks に追加 Check Yahoo!ブックマークに登録 このページをはてなブックマークに追加

箇条書きの記号を画像にしたとき、どうも文字列と画像との配置がずれて困ったなんてことはありませんか？　解決策としては、CSSで list-style-image プロパティを使わず、繰り返しなしの背景画像に設定するとよいでしょう。

はじめに

箇条書きの記号を画像にしたとき、どうも文字列と画像との配置がずれて困ったなんてことはありませんか？

解決策としては、CSSで list-style-image プロパティを使わないことです。

  1. 記号から置きかえるための画像サイズを確認します。たとえば、→の場合、20x20ピクセルです。
  2. padding-left の値をその画像サイズよりちょっと大きめの値に指定します。ここでは22ピクセルで。
  3. margin-left の値をpadding-left分と同じ負の値を指定します。（-22px）
  4. 繰り返しなしの背景画像を指定します。座標は左上で十分と思います。

では、<li>に classスタイル .move のスタイルを作成することを前提に手順を説明します。

操作手順

  1. ［セレクター］ボックスには li.move と入力します。
  2. ［リスト］カテゴリで、list-style-type プロパティを「none」に指定します。
    0419-3
  3. ボックスカテゴリでは、padding と margin の「すべて同じにする」のチェックを外して、
    padding-left を 22px、margin-left を-22px に設定します。
    0419-2
  4. ［背景］カテゴリを開き、background-image プロパティにその画像ファイルを指定します。
  5. background-repeat プロパティは no-repeat にします。
  6. (x) background-position ボックスにはX座標（左から）の値を指定します。
    左端0ピクセルの場合は「left」を選択します。
  7. (y) background-position ボックスにはY座標（上から）の値を指定します。
    上端0ピクセルの場合は「top」を選択します。
    0419-1 
li.move{ 
    background-position: left top; 
    padding-left: 22px; 
    list-style-type: none; 
    background-image: url('../common/images/move.gif'); 
    background-repeat: no-repeat; 
    margin-left: -22px; 
}

小さな画像の場合は、画像リストに適用した部分としてない部分とを比較してバランスを見ながら調整してみてください。

小さな画像の場合

小さな画像の場合は、画像リストに適用した部分としてない部分とを比較してバランスを見ながら調整してみてください。

たとえば、 の場合は、下の図のようにするといいでしょう。

 0419-4

X座標は左端でOKですが、Y座標は上から3ピクセルぐらいがちょうどいいと思います。
スタイルの変更

コードは以下の通りです。

li.arrow{ 
    background-position: left 3px; 
    font-weight: bold; 
    background-image: url('../common/images/arrow/right.gif'); 
    list-style-type: none; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    margin-left: -20px; 
}
INDEX

問題は解決しましたか？

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

▲このページのトップへ