list-styleのをCSS設定で画像を指定しています。
文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか?
現在のCSSはこのように設定しています。
.style_1 {
list-style-image: url(画像url.gif);
}
フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。
また、リスト画像とli要素(文章)までの間隔も離したいです。
CSSに詳しい方がいましたら、ご教授下さいませ。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは。
この場合、list-style-imageで指定するより<li>に背景画像をおいて、
background-positionで位置を指定したほうがいいと思いますよ。
例
<ul>
<li>サンプル</li>
<li>サンプル</li>
</ul>
li {
padding:0 0 0 20px;/* 背景画像分の余白を取る */
background:url(画像パス) no-repeat 5px 5px;/* 5px 5pxとなっている所で位置を調整 */
}
詳しくはこちらを参考にしてください
http://www.htmq.com/style/background.shtml
ご回答下さいまして誠にありがとうございました。とても丁寧なご投稿を嬉しく思います。<li>への背景画像指定で調節できるのですね。CSSの関連本を見ながらチャレンジしてみますね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
投稿した文書の編集ができません。
-
外国人のコメント欄でよく、コ...
-
ワードプレス管理画面から、ヘ...
-
goo解答欄にURLの貼りたいです...
-
HPを作りたいと考えているので...
-
グーグルサーチコンソール。サ...
-
ワードプレスのプラグイン
-
Adobe Express(アドビエクスプ...
-
ワードプレステーマkatawaraのCSS
-
ワードプレスに詳しい方に質問...
-
「ページにリダイレクトがあり...
-
ワードプレスでデータの移動
-
ワードプレスで新規で新しい記...
-
WP ショートコードの編集?
-
ワードプレスで投稿(ブログ)...
-
ワードプレス。複数の投稿ペー...
-
ワードプレスCocoonで作ったペ...
-
旧サーバーが解約状態ですが新...
-
課題でホームページを作るんで...
-
ワードプレスのテーマ:katawara
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
背景透過の画像を共有した際に...
-
アメーバーブログで余計な空白...
-
HTMLで画像の背景に枠線を付け...
-
FC2ブログ トップ画像につ...
-
livedoorブログのヘッダの変更...
-
楽天ブログのタイトル・カスタ...
-
アメブロ、カスタマイズでタイ...
-
アメブロのタイトル画像にURLを...
-
アメブロのヘッダー画像をクリ...
-
wordからjpg、gif、pngへ
-
tiffのlzw形式とg4形式の違い
-
ネット上のgif形式画像が保存で...
-
WordPressで使用している画像の...
-
パワーポイントをPDFに変換した...
-
CloudflareでSSL化出来るのは良...
-
WordPress。cocoon。に関しまし...
-
男子高校生の裸足画像が載って...
-
WordPressに関しまして。 WordP...
-
白い部分を透明にすることは可...
-
音楽に被せてナレーションをい...
おすすめ情報