No.3
- 回答日時:
>マーカーの位置をテキスト側(右側)
これは画像(マーカー)をテキストの後ろに表示したいと言うことなのか、あるいは画像(マーカー)をテキストの前に表示したいのだが、マーカーとテキストの間隔が広いので、それを縮めたいだけなのかが文面からはよく分かりません。
後者ならば、list-style-imageよりも、backgroundで指定した方が良さそうです。
たとえば、
[HTML]
<li>目次1</li>
[CSS]
li{ padding-left: XXpx; background: white url(marker.gif) no-repeat left center; }
marker.gifがマーカー画像ファイル、XXにはマーカー画像ファイル横幅より少し大きめの値をピクセルで指定します。この値を調整することによってマーカー画像とテキストの間隔を調整できます。
No.2
- 回答日時:
マーカーを背景画像にしたほうが良いです。
1回のみの表示にしてpadding-leftを取って文字と重ならないようにする。
画像を表示させない環境からは消えてしまいますが、
細かい位置指定は可能になりますし、
複数行になった場合にも先頭行の頭に固定できます。
ul{
list-style-type:none;
}
ul li{
background-image: url(マーカーのURL);
background-repeat: no-repeat;
background-position: 左からの位置px 上からの位置px;
padding-left:適当な間隔px;
}
マークに画像を使用する際の別の方法
http://www.webword.jp/cssdetail/list/index5.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- ノートパソコン ポラリスオフィスを使ってます。グラフの折れ線にマーカーが入ってしまい見にくいので消したいのですがデー 1 2022/09/09 14:49
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
- 化学 青いマーカーをした部分です なぜ3×3ではないのですか? 化学基礎 同位体 1 2022/05/20 17:26
- 大学受験 勉強で暗記する時に、赤シートを使っており、文字を隠したい場合は、緑のマーカーで引いた部分が黒くなり、 1 2023/07/02 23:57
- Word(ワード) Wordの機能について教えてください。 2 2023/07/12 15:08
- Visual Basic(VBA) WordのVBAについて 5 2023/01/11 14:38
- がん・心臓病・脳卒中 【医学・腫瘍マーカー】腫瘍マーカーに高い値が見つかったという腫瘍とは癌(がん)のことですか? 腫瘍マ 3 2022/07/15 17:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグで画像の繰り返し使用は…
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
WEB上でディレクトリ内の画像を...
-
背景画像をリピートさせない方...
-
gif画像でたまに背景がグレーに...
-
CSS マウスオーバーでテキスト...
-
CSSでの動画のマスク処理
-
フッターの背景に色を指定した...
-
LightBoxの矢印の出し方
-
ひとつの画像をWEBで異なる小さ...
-
before疑似要素で画像を指定し...
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
htmlタグで画像を背景に敷き詰...
-
【至急お助け!】チェックボッ...
-
サファリで背景画像が1ピクセ...
-
下記サイトのトップ画像はどの...
-
【Webサイト】画像が小さく表示...
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報