小粋空間: リストマークの画像のずれを修正する

Top ＞ CSS ＞リストマークの画像のずれを修正する

2005年6月14日

リストマークの画像のずれを修正する

Posted at June 14,2005 11:59 PM
Category：[CSS]
Tag：[Background, CSS, list-style-image]

サイドバーメニュー等の先頭のマーク（マーカー）表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり（テンプレートでは数ヶ所の指定で済みますが）、ページサイズにも影響します。

ということで、マーク表示にはCSS・リスト形式（li）の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで

li {
    list-style-image: url(hogehoge.gif);
}

と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです（サンプル１）。

サンプル１

これを背景画像で表示させる方法に変更すれば位置を揃えて表示させることができます。

li {
    padding-left: 12px;
    background: url(hogehoge.gif) no-repeat 10px 0.5em;
    list-style: none;
}

padding-left は画像を配置する分の余白です。
url の後ろの指定は順に

background-repeat（画像の繰り返し表示）

background-position-x（X軸方向の開始位置）

background-position-y（Y軸方向の開始位置）

です。サンプル２が background 指定で表示した場合です。

サンプル２

ちなみに左上の「最近のエントリー」で使っている地味な画像のHTMLとCSSは下記のような指定を行っています。

HTML

<ul class="list">
    <li>～</li>
　　　　　　：
    <li>～</li>
</ul>

CSS

ul.list {
    list-style: none;
    margin: 0px;
    margin-left: 0px;
    padding: 0px;
}
 
ul.list li {
    margin: 0px;
    padding: 0px 0px 0px 12px;
    background: url(hogehoge.gif) no-repeat 3px 0.4em;
    list-style: none;
}

HTMLの ul 要素に class 属性を与えているのは、ul - li を適用する場所によって異なるスタイルを与えることを想定しています。全ての ul - li 要素に同じスタイルを与える場合、HTMLの class 属性や CSS の class セレクタは不要（ul.list → ul）です。

2005.08.21 追記
サンプルのHTMLを追加しました。

Posted by yujiro このページの先頭に戻る

« シマダヤ　韓国風冷麺 | Main | Musical Baton »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ 記事のタイトルをリストにしました。 from 137g
スタイルによってタイトルの部分のアイコン（記号？）が変わるようにしたくてｃｓｓ... [続きを読む]

Tracked on June 15, 2005 9:11 PM

≫ CSS　リストマーク from アメブロ向上企画書
先日リストマークのズレについて質問がありましたリストマークの付け方も説明しておきますリストマークってなに？サイドバーの中の項目は... [続きを読む]

Tracked on March 23, 2008 1:23 PM

いつもお世話になっております。
初歩的な質問で申し訳ありませんが。。。

エントリー、コメントの各々頭にマーカー画像を表示させたいですが。。。

スタイルシートで
ul.side {
...
ul.side li {
中身はいっしょです。
と上記のように指定しても表示してくれません。

なにがいけないんでしょうか？
アドバイスお願いします。

[1] Posted by 空煉遊 : August 20, 2005 6:26 AM

＞空煉遊さん
こんばんは。
ご利用ありがとうございます。

ご質問の件ですが、記事本文でHTMLにの設定に関する記述が不足しておりました。申し訳ございません。
先ほど追記致しましたのでご確認いただけますでしょうか。

以上です。
それではどうぞよろしくお願い致します。

[2] Posted by yujiro : August 21, 2005 2:07 AM

yujiro 様

いつも助かります。
おかげさまで自分の理想どおりに。

大変ありがとうございました。

[3] Posted by 空煉遊 : August 21, 2005 10:48 PM

＞空煉遊さん
こんにちは。
ご連絡ありがとうございました。
うまくできて良かったです。

ではでは！

[4] Posted by yujiro : August 22, 2005 3:41 PM

こんばんわ、いつも困ってきてしまいます。
リストマークをなんとかつけることができたのですが、文字とマークの間がどうしても狭まらないのと、background-positionで少しずらそうと思ってもできないのです。
スタイルシートをすべて見てみたんですが、わからなくてよろしくお願いします。

[5] Posted by bobin : February 19, 2006 8:32 PM

リストマークさえできてませんでした。(-_-ﾒ)
他のページに飛ぶと斜めになってしまうリストになったり最初のひとつしか出なかったりでした。ヒントをお願いします。

[6] Posted by bobin : February 19, 2006 9:09 PM

＞bobinさん
こんばんは。
修正したものをこちらにおきましたのでご確認ください。
IEでしたら、ブラウザの[表示]→[ソースの表示]→[ソースの表示]でHTMLソースが参照できます。またスタイルシートのURLを指定すれば参照またはダウンロードできると思います。

なお修正箇所は下記の通りです。
メインページ：ul - li タグの修正
スタイルシート：下記の青色を修正、赤色を削除（場所は検索で探してください）

ul.side {     list-style-image: url(".gif");     background-repeat: no-repeat;     background-position: 5px 15px;     list-style-type: none;     padding-left: 2px;     margin: 1px 0px 0px 2px;     line-height: 150%;     text-align: left; }
ul.side li {
    padding-left: 15px;
    background: url("http://handmade.boo.jp/img/list-heart.gif") no-repeat 0px 0.4em;
    list-style: none;
}

.side li {
    list-style-image: url(http://handmade.boo.jp/img/list-heart.gif);
    background-repeat: no-repeat;
    background-position: left 5px;
    list-style-type: none;
    padding-left: 3px;
    margin: 1px 0px;
    line-height: 150%;
    text-align: left;
}

ul - li タグはマークアップが誤っていますので下記の構造になるようにテンプレートを修正してください。br タグは不要です。

<ul> <li>エントリータイトル１</li> <li>エントリータイトル２</li> <li>エントリータイトル３</li> 　　　　　　　　　　　： <li>エントリータイトルn</li> </ul>

以上です。
それではよろしくお願い致します。

[7] Posted by yujiro : February 20, 2006 10:35 PM

こんにちは、yujiroさんのご説明通りやってみました。直すところが結構ありまして、でもなんとかできました。
タグの打ち間違いであんなにも変わってきてしまうのですね。
本当にいつも御世話になってすみません。
個別ページまで作成していただきありがとうございました。
こんなにいろいろしていただいてうれしい限りです。

[8] Posted by bobin : February 22, 2006 5:26 PM

＞bobinさん
こんばんは。
ご連絡ありがとうございました。
お役にたてて良かったです。
文字化けについてはIEの［ソースの表示］で起動エディタを指定する方法が良いかも知れません。または Firefox であれば文字化けせずに表示します。
ではでは！

[9] Posted by yujiro : February 23, 2006 12:28 AM

いつもお世話になっています。
コメントの確認覧のエラーについて、エントリーしてくださったとおりにすると
「comment name・・・」とまたエラーが出てきてしまったので、思い切って小粋空間様のテンプレートを使用させてもらいました。ありがとうございます。

そリストマークのずれを修正しようと、こちらで載せてくれているCCSと全く同じ（画像だけ異なる）ように指定したのですが、どうも画像がずれてしまうのでどこをいじればいいのか教えてください。

また、メインページなんですが、同じように設定しても画像で表示されずに●で表示されてしまう箇所もあります。そこの修正方法のアドバイスもどうかお願いします。

[10] Posted by みずほ : May 12, 2006 7:22 PM

＞みずほさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、リストマークのずれは 0.4em の部分を 0.8em に変更するとよくなりました。
メインページのリストマークはテーブルタグを削除するとすべて表示されましたのでHTMLのマークアップに問題がないかご確認ください。
それではどうぞよろしくお願い致します。

[11] Posted by yujiro : May 13, 2006 2:01 AM

リストマークのずれの修正とリストマークの表示、できました！
ありがとうございました。

[12] Posted by みずほ : May 14, 2006 11:31 AM

＞みずほさん
こんばんは。
ご連絡ありがとうございました。
うまく表示されたようでよかったです。
ではでは！

[13] Posted by yujiro : May 14, 2006 11:40 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）