ときどきサイトのチェックをしているのですが、ある日ブラウザごとにきちんと表示されているか確認をしていると画像になぜか青い枠線（リンク画像の枠線）がでていたのです。
マックの場合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
またひとつ、賢くなったような・・・そんな気がします。（笑）
|
