Q&A
デベロッパーツールで確認してみました？
画像(svg)が表示されているか、されていないのかが分からないです。
該当のコードは下記になります
下記コードはphpのテンプレートエンジン(blade)を使用していますが、問題はhtml及びcssであるかと思いますので、タグはHTML,及びCSSのみにさせて頂きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>@yield('title')</title> <link rel="stylesheet" href="/css/styles.css"> </head> <body> <header> <div class="header_top"> <a class="svg_header_logo" href="{{url('/')}}"></a> <p>テスト</p> </div> <div class="vets_number"> <p>医院TEL<a>000-0000</a></p> </div> <div> <p>@yield('heading')</p> </div> </header> @yield('content') </body> </html>
css
1.header_top { 2 text-align:center; 3 background-color:orange; 4} 5.header_top a { 6 background-image:url(../images/top_logo.svg); 7}
コードを実行した際の画面は以下になります。
左上端に表示されるはずの画像が表示されていない状態です。
どなたか、解決方法につきまして、ご助言頂けましたら幸いです。
よろしくお願いします。
追記です
デベロッパーツールにて、sourcesの欄を確認してみましたが、imagesフォルダに、該当のsvg画像が格納されていました。
回答2件
0
ベストアンサー
<a class="svg_header_logo" href="{{url('/')}}"></a> に内包要素が無いので高さを指定してみてください。
投稿2019/06/11 07:17
総合スコア69407
ご回答ありがとうございます。
「.header_top a 」に対し、heightを設定はしてみましたが、画像は見えていないです...
あとはwidthも指定するくらいでしょうか。
そういえば404エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
今、おかしいと思って、aタグを確認したのですが、確かにcss,styleの方では、height、widthを設定しているのですが、elementsの方では、0×0になっていました。。。
height,widthの指定の仕方が間違っているのでしょうか？
特にエラーなどは表示されていないです。
display: block;もしくはdisplay: inline-block;を追加してみてください。
display:blockとしましたら、なんと、画像が表示されました...
恐らく、heightだけでなく、widthも設定していなければ表示されなかったと思います。
設定したwidthのサイズ分だけしか画像が表示されなかったもので。
しかし、何故display:blockとしたら、画像が表示されたのでしょうか...?
横槍失礼しますね。
widthは指定しなくても表示されますよ〜！
@masshuさん
本当ですね。widthは指定しなくても、表示されました。
widthを外しましたら、画像がリピートされてしまっていたので、background:no-repeatとしておきました！
@masshuさん
しかし、こういったdisplay-blockなどとすると、何故画像の表示ができるようになるのか、といった点が自分としましては疑問でならないです...
さっきの状態で下記のようにしてみてください。
<a class="svg_header_logo" href="{{url('/')}}">あ</a>
https://jsfiddle.net/st34feLq/
個人的なイメージなので参考にはして欲しくないのですが、
「ここは俺の陣地だ！」って感じです。
あと、なんでかな〜って思ったら自分で調べることも大切ですよ〜！！
確認させて頂きました。
今、display-inlineについて調べていましたら、インライン要素の場合は、幅、及び高さの指定ができないとの記事を見つけました。つまり、いくら、インライン要素にwidthやheightを設定しても画像が表示されなかった訳ですね...
初歩的なことをようやく解決できた気がします。
ありがとうございました。
0
直接の回答ではなく、Laravelとして導入する際の注意点、デバッグの仕方についてのアドバイスになっています。
他の場面でも使える考え方なので、覚えておいて損はないです。
Laravel使用における外部ファイルの設定
/css/styles.cssという指定の仕方ですが、Laravelでは外部ファイルを指定する際はasset()を使うやり方がより好ましいです。
直書きは望ましくありません。
リンクをurl()で書かれているなら尚更、記法は合わせるべきでしょう。
jQueryとPureJavaScriptの記述が混ざっているような感覚に近いですが、こと、パスに関してはアプリケーションにおいては生命線なので、Laravelのように規約がしっかりあるフレームワークではなるべくフレームワークが提供する機能を利用しておいたほうが良いでしょう。
※別の質問にて、ちょっとしたことでしたが書き方を守っていないことでバリデーションルールが正しく機能しないということがありました。
また、CSSは読めても画像はそこからの相対パスなので正しく参照できないというのはよくある話です。
ひとまず画像も含めてLaravel管理下におくのをすすめます。
「これは直書き、これはフレームワークの機能」と記法が統一されていないと問題切り分けの妨げにしかなりません。
画像が表示されない時の問題切り分け
これもデバッグの一環です。
- 画像URL直に叩いて実行してみる
「そこにある・なし」がすぐに分かります。画像に限らずCSSファイル、jsファイルでも有効です。
0. もっと分かりやすい画像を使ってみる
風景写真とか動物の写真とか何かのアニメのイラストとかでもいいですが、
svgにこだわらず同じ場所においてそのパスをCSSで指定する。
「CSSが効かない」問題切り分けのために例えばbody{background-color:red;}のようにして分かりやすい指定をすることで問題切り分けを行うことはよくあります。
手元で少しでも多くの問題切り分けを行うことができるようになれば、それで解決しなくて質問することになったとしても、
「調べたこと、試したこと」が充実したいい質問になって、回答も得やすくなり、自身のスキルアップにもつながります。
スキルアップができれば、質問する前に自身で確認できる引き出しが増え、質問する前に自分で解決できるようになります。
「調べるより聞くほうが早い」という言葉、実は自身の成長の弊害となっていることが多いです。
質問を書くこと、質問の不備を指摘されて修正すること、やり取りによって解決すること、実は非常にハイコストです。自身だけではなく回答やアドバイスを送ってくれる相手の時間を使うことになります。
少しでも早く、「自分でやったほうが早い」になるといいですね。
投稿2019/06/11 07:59
編集2019/06/11 09:33
総合スコア80850
ごめんなさい！回答としては間違っているので低評価しました〜！！
ご指摘ありがとうございます。できれば具体的に教えてください。今後の参考にさせていただきます。
私としてはズバリの回答というよりデバッグ等で問題切り分けを行う方面でアドバイスをしました。
確かに回答冒頭は本件とは関係のない事柄でしたが、編集前の質問からするとあり得ない内容ではありません。
Laravelとして推奨されない書き方をしているのは事実ですし。
問題切り分けの仕方をおさえておけば毎回質問を書く作業から開放されるという意味合いで回答の中盤から後半に書いています。
なにが問題か分からないという質問者は多いので、切り分けの方法をひとつでも知っておいて試すことができたら問題解決までの時間も労力も短縮できると思うのですが如何でしょうか？
再現する環境が質問者にある以上は自分で試せる引き出しは多い方が良いと思うのですが。
後半のアドバイスに関しては全くもってその通りだと思います！
ただ、
>編集前の質問からするとあり得ない内容ではありません。
でしたら追記、編集依頼で突っ込めば良いのではないかと思います。
↑これ違うなって思ったので無視してください！
mtsさんは修正前の内容に対しての回答とアドバイスということであれば修正後の内容に合わせて回答は修正すべきだと思いますよ〜〜！！
もし全部アドバイスにするのでしたら前半の書き方を修正すべきかな〜と思います！！
今のままですとアドバイスってより回答なので！
Laravelの書き方とパスを直書きしても不整合は起こらない
>masshuさん
確かにそうですね。
ただ、そこが非常に難しいところで、解決しているのでしたら結局既に出ている回答をなぞることになるのであまり意味がないと思います。
それでしたら「Laravelにおける書き方はあわせたほうが良い」方面になります。
ひとまず、それで書いておきますね。質問者さんはたぶんずっとこのままいくでしょうから同じような問題を抱えた誰かに向けて。
>arasiさん
ご指摘ありがとうございます。
若干書き方がまずかったようですね。調整します。
>mtsさん
そうなんですよ！！回答しかできないのがteratailの辛いところ！！そして回答がかぶる！！
回答かアドバイスか選べる機能があるといいんですけどね〜
とりあえず回答の冒頭に「回答ってよりはアドバイスになります」って一文入れとけば誤回答って意味での低評価はされなくなるのかなーとは思ってます。
質問者さん云々はわかんないですが修正していただけたのを確認したら低評価は戻します〜
>masshuさん
だいぶ冒頭が分厚くなりましたが修正してみました。
ただ、特に前半のLaravelについてはこの質問者さんには何度も他の人も指摘していること、また同様の指摘に近い内容です。
私の回答を無視するだけならともかく、他の人のアドバイスや指摘を全てマイナスに捉えてしまう傾向があるので、そういう性質も自身のスキルアップの妨げになっていると気づいてもらえたらいいんですが。
>mtsさん
修正ありがとうございます！
すごい！わかりやすい！と思ったのでむしろ高評価にしました！
どうぞよしなに〜
ありがとうございます。
ちょっと省略しすぎることがあるので、ちゃんと伝わらないこともありますし、
注意しないといけませんね。
あなたの回答
tips
プレビュー
