ときどきサイトのチェックをしているのですが、ある日ブラウザごとにきちんと表示されているか確認をしていると画像になぜか青い枠線（リンク画像の枠線）がでていたのです。
マックの場合SafariとIEでは枠線は表示されず、Firefoxで開くと画像表示時にリンク画像の枠線がでてしまいました。
（ウィンドウズの場合はまた違うかもしれません）
見た目的にもよくないので、それを回避するためにimgタグ内に
border="0"
これを挿入すれば、枠線なしで画像だけ表示されるようになる・・・はず。
というわけで、すでに青い枠線がでてしまっている画像のタグを以下のように直してみました。
<img src="〜" width="250" height="93"border="0" alt="タイトルバナー" />
この箇所を修正し保存、再構築すると見事青い枠線は消えました！！
で、めでたしめでたしとなればいいのですが、ここで終わらないのです。(^^;)
表示上はなんら問題はないのですが、いつもサイトを添削してもらっているAnother HTML先生に見てもらうとダメだしをくらってしまったのです！(T_T)
0: line 652: ( の属性 `border` はあまり薦められない属性です。スタイルシートを使いましょう。) → 解説 82
この表示です。
減点はされないものの、HTML4.0からは非推奨とのこと。
やはり文法上あってないというのが気になって、直したいという気持ちにさせられます。（笑）
これを文法上正しくするとこうなるそうです。
<img src="画像のあるURL" width="250" height="93" style="border-style:none;" alt="タイトルバナー" />
しかし、これだとimg画像を置くたびにstyleで指定して枠線を消す作業をしなくてはならないので面倒ですし、ファイルの量も無駄に増えてしまいます。
そこで、imgタグ内では枠線の指定はせず、スタイルシート内だけで指定をすれば面倒な作業もせずあのリンク画像の青い枠線からもおさらばできる、というわけです。（笑）
スタイルシート内にimg、a imgに枠線をつけない設定を追加します。
img { border-style:none; }
a img { border-style:none; }
これだけで完了！！
もう、img画像を追加するたびにタグを修正する必要はありません！
これだけでもほんと記事を投稿するのが楽になったような気がします。＼(^O^)／
今回も参考にさせてもらったのは「小粋空間」さんのリンク画像の枠線を消すの記事です。
いつもわかりやすい説明、参考にさせてもらってます。
ありがとうございます。m(_ _)m
またひとつ、賢くなったような・・・そんな気がします。（笑）
|
コメント
はじめまして。突然、昔の記事にコメント失礼致します。
サイトの引っ越し＆模様替えをした折に、
自分のMacのSafariでは見えなかった
画像リンクの青枠が、FireFoxでは出てしまい、
＜img src="画像のURL" border="0"＞を
入れて消したのですが、後でWinのIEで見たら
全く消えていませんでした。
（WinのFireFoxでは消えていたのですが。）
スタイルシートなどに疎いので、困りつつ、
ネットで検索をして、
こちらのブログに辿り着きました。
style="border-style:none;"で、無事に
WinのIEからも青枠を消すことが出来ました。
助かりました！ありがとうございます！
本当は記事にも書かれているように
スタイルシートで一括に設定してしまうのが
楽なのでしょうが、
まるで疎い私には、数カ所面倒でも、
確実に消す事が出来てとても有り難かったです。
スタイルシートでの説明は、
他のサイトでもいくつか見かけ、
あとは私も知っている
＜img src="画像のURL" border="0"＞の
紹介が殆どでしたので、
こちらのブログ記事に出会えて
本当に助かりました。
ブログをやっておりますが、
トラックバックは不慣れなのと、
スパムが多いので切ってしまっているため、
コメントを入れさせて頂きました。
突然失礼致しました。
どうもありがとうございました。