小粋空間: リンク画像の枠線を消す

Top ＞ CSS ＞リンク画像の枠線を消す

News

各種ブログテンプレート

2004年11月11日

エントリー本文

リンク画像の枠線を消す

Posted at November 11,2004 1:01 AM
Category：[CSS]
Tag：[CSS]

バナー等の画像にリンクを設定すると青い枠が表示されます。これを消去する方法を何通りかご紹介します。

消去前

消去後

１．スタイルシート（styles-site.css）に設定

まず、タイプセレクタで img 要素に枠線を与えない設定を行います。

img {
    border-style:none;
}

または、子孫セレクタで a 要素の子孫要素である img 要素に設定を与える方法です。上記の場合は全ての画像にスタイルが適用されますが、この方法であればリンク画像のみにスタイルの設定を与えることができます。

a img {
    border-style:none;
}

さらに、img 要素に class 属性または id 属性を与えて、クラスセレクタ・一意セレクタで指定すれば画像によってリンクのあり・なしを振り分けることができます。以下はクラスセレクタの例です。

.no_border {
    border-style:none;
}

HTMLの img 要素には下記のように class 属性を与えます。

<img src="～" ait="banner" class="no_border" />

２．HTMLタグ内のstyle属性にスタイルシートを設定（やや非推奨）

img 要素に直接 style 要素を設定します。全ての画像に指定する場合はファイルサイズが増えるため、１項を推奨します。

<img src="～" alt="banner" style="border-style:none;" />

３．HTMLタグのborder属性に指定（非推奨）

この属性はHTML4から非推奨となっています（参考として記しました）。

<img src="～" ait="banner" border="0" />

表示上の効果はどれも同じです。１項と２項が混在する場合、img 要素の style 属性の設定（２項）が styles-site.css 等の外部ファイル（１項）や、ここでは記しておりませんがHTMLに記述された style 要素の設定より優先されます。

Posted by yujiro ReTweet This!

« 個別エントリーアーカイブにコメント・トラックバックのアンカー追加 | Main | 枠線を »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ 画像にリンクをはった時… from /PEN/
何も考えないでやってしまうと、「リンクあるぞ」っていう枠線が表示されるんですよね... [続きを読む]

Tracked on November 11, 2004 4:08 AM

≫ 画像の枠を消す。 from D'sDinner@Blog
引き続き、小粋空間様のこちらを参照し、画像の枠を消してみました。 ... [続きを読む]

Tracked on February 21, 2005 11:01 AM

≫ 画像に枠が入る！　スタイルシートで消したい！ from れこのまったりお小遣いをもらいましょ?♪
ブログのタイトル部分の画像に急に枠がはいってしまいました。厳密に言うと、「れこのまったり?」のロゴの設定をしたのに、画像が出てこないので、別の方法で表示させ... [続きを読む]

Tracked on February 23, 2005 12:55 PM

Tracked on February 23, 2005 1:08 PM

Tracked on February 23, 2005 1:47 PM

≫ 画像の枠線の消し方 from とりあえずＬＯＧ
　いくつか方法があるようですが、私はスタイルシートで設定しました。　img{ 　　　 border-style:none; 　　　} をスタイルシートに... [続きを読む]

Tracked on June 29, 2005 9:29 PM

≫ 画像の枠線の消し方 from とりあえずＬＯＧ
　いくつか方法があるようですが、私はスタイルシートで設定しました。　img{ 　　　 border-style:none; 　　　} をスタイルシートに書き込む... [続きを読む]

Tracked on June 30, 2005 4:08 PM

≫ リンク画像の枠線を消す from digital lab
ときどきサイトのチェックをしているのですが、ある日ブラウザごとにきちんと表示されているか確認をしていると画像になぜか青い枠線（リンク画像の枠線）がでていた... [続きを読む]

Tracked on May 23, 2006 7:55 AM

yujiroさん、こんばんは。
これ、私がわかんなくて質問したヤツですね。
丁寧に教えて頂いたので、HTMLにborderってやり方はすっかりマスターしました。ありがとうございました。
yujiroさんや我楽さんのサイト見てると、もっといっぱい改良したり勉強したりしたくなっちゃうんですけど、なかなか時間がとれなくて。。。
でも、楽しいですね、少しずつでもわかってくると。がんばりま?す！

[1] Posted by KAZ : November 11, 2004 1:53 AM

ボクもコレ、気になってたんですけど…「きっと出来るんだろうなぁ」って思いながら放置してました(^^;
早速試させていただきたいと思います♪

[2] Posted by PEN : November 11, 2004 3:58 AM

＞KAZさん
こんにちは。
はい、その通りです。
私は昔、この方法が分からなくて調べた記憶があります。

他にもこういったカスタマイズ方法、投稿していきたいと思います。
お時間がある時にお越し頂ければ幸いです。
ということで記事ネタ提供、ありがとうございました！

＞PENさん
こんにちは。
トラックバックありがとうございました。
枠がなくなった時のスッキリ感はなんともいえないいい気分です。
是非お試しください！

[3] Posted by yujiro : November 11, 2004 10:53 AM

初心者の質問で申し訳ありません。
記事内の灰色破線囲み部分は、どうやって記載しているんですか？

何かの文を引用する時やスクリプトなんか記載される時に
良く使われますよね？

よかったらご教授ください。

[4] Posted by ゆえ : November 14, 2004 3:16 PM

＞ゆえさん
はじめまして。
別途ご回答致しますので申し訳ございませんが少々お待ちになってください。

[5] Posted by yujiro : November 15, 2004 2:25 AM

＞ゆえさん
こんばんは。
返事が前後してすいません。
こちらに設定方法を記しましたのでご参考頂ければ幸いです。

[6] Posted by yujiro : November 16, 2004 1:13 AM

yujiroさんのこの記事で今までの悩みがすっきりしました、ありがとうございます。m(_ _)m
こういう今までわからなかったことがわかるっていうのはうれしいものですね。

記事もアップしたのでトラバもさせてもらいました。

[7] Posted by ゆう : May 23, 2006 7:24 PM

＞ゆうさん
こんにちは。
記事参照＆トラックバックありがとうございました。
お役にたてたようでなによりです。
ではでは！

[8] Posted by yujiro : May 24, 2006 11:12 AM

はじめまして
画像の枠線を消す方法を、こちらの記事を参考にさせていただきました。

画像の枠線がついていることを、お友達からの指摘で知りました。
IE5では枠線が表示されていないのです。
勝手なお願いかと思いますが、確認していただけないでしょうか？

また、初心者の質問で大変失礼かと思いますが、新しくカスタマイズしたテンプレでカレンダーとサイドバーの文字サイズが記事の倍ほどの大きさになっているようで、私の知識ではどこを変更すればいいのかが分かりません。
カレンダーのサイズについては、CSSで設定したつもりなのですが・・・。
原因としては横のサイズを700から600と縮小したからかと初心者なりに考えているのですが。
間違っていたら、尚更お恥ずかしいのですが。

本当に申し訳ありませんが、ご教授ください

[9] Posted by aco : June 20, 2006 1:40 AM

＞acoさん
こんばんは。
ご返事遅くなってすいません。
確認したところ、スタイルシートの

div.navigation dl dt { border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #fff; padding: 5px 5px 5px 10px; color: #a2ccce; font-size: 11px; font-weight: bold; background: #fff;

の最後に "}" が抜けてましたので、追加してください。
これでリンクやカレンダーが正常に表示されると思います（スタイルシートの文法に誤りがあるとスタイルが正常に反映されない場合があります）。

なお、HTML のマークアップに誤りがありますので、機会があれば Another HTML-lint gateway でチェックされることをお勧めします。
それではよろしくお願い致します。

[10] Posted by yujiro : June 23, 2006 10:38 PM

yujiroさん、コンニチハ
さっそくやってみました。
お友達からもきちんと表示されてるとのことでした。

勧めていただいたリンク先でのチェックも出来るところから変更しているところです。
丁寧に教えていただきまして、本当にありがとうございました。

[11] Posted by aco : June 24, 2006 11:39 AM

＞acoさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは！

[12] Posted by yujiro : June 26, 2006 1:36 PM

はじめまして、candyと申します。
今まで気になりながらも、バナーの青い枠線を消すことができずにいました。
でも、今回こちらの記事を参考にさせていただき、
無事枠線が消えてスッキリしました。
わかりやすい説明を有難うございました。
これからも参考にさせてください。
よろしくお願いします。

[13] Posted by candy : June 10, 2007 1:00 AM

＞candyさん
はじめまして。
記事参照＆ご連絡ありがとうございました。
またBlogPeople登録もありがとうございました。

こちらこそ、今後ともどうぞよろしくお願い致します。

[14] Posted by yujiro : June 11, 2007 1:17 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）