質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1081閲覧

ul li のテキストに改行があってもドットを1行数分のサイズのSVGにしたい

ShortArrow

総合スコア141

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/27 13:30

編集2020/08/28 01:04

前提・実現したいこと

ul li タグのドットをSVGのチェックボックス画像にしたいです。

発生している問題・エラーメッセージ

イメージ説明
SVG画像が拡大されて2行分になってしまいます。

該当のソースコード

html

1<style> 2section ul { 3 list-style: none; 4} 5section ul li { 6 padding-left: 20px; 7 line-height: 1.6em; 8 background: url(../img/check.svg) left 0px top 3px no-repeat; 9 background-size: 15px auto; 10} 11</style> 12<section> 13 <h2>リストのアイコンに画像を使う</h2> 14 <ul> 15 <li>リストの<br>テスト1</li> 16 <li>リストの<br>テスト2</li> 17 <li>リストのテスト3</li> 18 <li>リストのテスト4</li> 19 </ul> 20</section>

Chrome developer tool のElements Styles です。
イメージ説明

SVGファイルの中身です。

html:check.svg

1<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="check-square" class="svg-inline--fa fa-check-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path></svg>

試したこと

backgraund-sizeを変更すればサイズが変わると思っていたのですが、
auto,containなど、
どうしても変わりませんでした。

下の画像は上記html単体テストを行ったときの画像です。
イメージ説明
これに、何を足すと2行分の画像サイズになってしまうのでしょうか?

補足情報(FW/ツールのバージョンなど)

chrome Latest
vscode Latest

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jinba

2020/08/27 16:38

該当のソースコードで表示した場合スクショのようなことにはならないはずです check.svgの幅は15pxで統一されなければおかしいです またテキストが改行した際どの位置にチェックボックスがある(上下中央?上端?)とお望みの姿なのかも推測出来ません 質問コードのみでの検証を再度して、正解イメージを伝えないと回答はつかないと思われます
yambejp

2020/08/28 00:37

svgが正しければちゃんと表示されると思います。 svgを例示できませんか?
ShortArrow

2020/08/28 01:00

ご指摘ありがとうございます。devtoolのスクショとSVGの中身を追記しました。 jinbaさんご指摘の通り、単体だとスクショのようにはなりませんでした。ありがとうございます。li要素以外に対して行ったCSSが効いてくるのでしょうか? yamnejpさん、ありがとうございます。SVGファイルが正しくないというのはどんな状態なのでしょうか?ちなみに、該当のSVGファイルは、devtool上でCSSの`url(~~~)`という部分にカーソルを当てると正常にプレビュー表示されます。
yambejp

2020/08/28 01:04

試してみましたが、拡大して表示されないです。 環境依存なのでは?他のブラウザでは試しましたか?
ShortArrow

2020/08/28 01:30

yambejpさん、逆に拡大して表示しようとするなら、どんなCSSを書いたらよいでしょうか?解決につながるかもしれませんので、ご教授お願い致します。
yambejp

2020/08/28 01:50

> 逆に拡大して表示しようとするなら 拡大するという再現性がないのでなんとも言えません。 無理やり拡大させないならやり方は考えますが・・・
ShortArrow

2020/08/28 02:24

yambejpさん、ありがとうございます。レンダリングエンジンはBlink、Geckoで見てみましたが、同じく2行分のサイズでした。Tridentはぐちゃぐちゃ(該当箇所以外も)でした。Tridentはサポート対象外なので捨てます。Safariは手元に無くてまだ見てないです。
guest

回答1

0

自己解決

#処理順でした

下記2行の上下を入れ替えると2行になりました。

css

1 background: url(../img/check.svg) left 0px top 3px no-repeat; 2 background-size: 15px auto;

#対策

同じ現象に遭遇したくないので、今後は、

background-imgage : url(../img/check.svg); background-repeat : no-reapeat; background-size : 15px 15px; background-position : 0px 3px;

などのように記述しようと思います。
今後は怖いから個別指定します。

#なぜこうなる?

画像を読み込む前にサイズを指定することが非推奨なのでしょうか?
background:~~;という指定だとbackgroundに関連する全プロパティが上書きされるとか?
指定してないプロパティまでデフォルトに戻されてしまうのは怖いですね。

投稿2020/08/28 03:28

ShortArrow

総合スコア141

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問