こんにちは。yamahanaです。 htmlコーディングをしてると、「どうするんだろうっ」「あれ、おかしいな」なんてことあるかと思います。

ネットで検索して調べてって事が私はよくあるのですが・・・ そこで今回は最近私がhtmlコーディング中に、調べた点や初耳だった物をメモも兼ねてまとめました。

SVG画像が出ない！

私がちょっと苦手なsvg画像。。ローカルで開くと普通に見れるのに、テスト上でなぜか画像が見れない！という現象がありました。

調べてみるとphotoshopやillustratorでsvgを書き出した時などにあるようです。

解決策

SVGをテキストエディタで開いて、下記を編集したら直りました。

imgをimageに変えるだけ

image〜〜〜 xlink:href=”data:img/png; 

↓

image〜〜〜 xlink:href=”data:image/png;

ファビコンを今あるサイトから持ってくる

ん？

ファビコンてサイトからどうやって持ってくればいいんだろう。。

解決策

GoogleのURLを使うとファビコンを表示することができます！下記のサイトURL部分に該当のURLを入れるとファビコン画像が出るので、そこから保存できました。

http://www.google.com/s2/favicons?domain=サイトURL

aタグの中にaタグをいれる

aタグの中にaタグを入れなければならず、入れてみたんですが、htmlを保存してみると

ブラウザ側でaタグの閉じ位置が別の場所になってしまいました。。

これはブラウザ側が勝手に判断して、そうなってしまうみたいです。

解決策

aタグの中のaタグをobjectタグで囲うことで、記述したとおりにブラウザが表示してくれました。

<object><a href="/maromaro">マロマロ</a></object>

aタグ無効化する

上で設定したaタグなんですが、SP時にリンクを無効化しなければならず、どうしたたらいいのだろう。。

解決策

JSでする事も出来るみたいですが、aタグに入れたクラスに下記をあてることで、リンクを無効化することが出来ました。

.maromaro{pointer-events: none;}

おわりに

htmlコーディングをしていると、悩む箇所って多いですね。

一つ一つ経験して身につけていくしかないのでしょうね。。

お役に立つ方がいれば幸いです。

参考サイト：https://freeladay.com/?p=2273
https://qiita.com/fukamiiiiinmin/items/7412b21c6df5de31cab1