リンクをクリックした際に出る点線を消す方法

リンクを設定した画像をクリックすると、なにやら点線が出てきますよね?これを消す方法を幾つかご紹介いたします。

こーいうのですね。結構気になる点線ではあります。

で、消し方ですが、基本的にCSSにて一括で非表示にします。

a {
outline:none;
}

こんな感じです。でもこれだと、FirefoxやSafariで消えても、IE大先生はきえてくれません。めんどいですね笑 これでも消えない場合は、aタグに対して直接以下の記述を入れます。

onfocus=”this.blur();

この記述をaタグに直接いれます。ソースとしては下記のようになります。

<a href=”http://www.at-nature.net/” onfocus=”this.blur();>test</a>

画像にこの設定をいれてリンクするとこんなかんじ(画像をクリックしてみてください)。

設定してないとこんなかんじで点線がでます。

設定前と設定後 ビフォーアフター。岡田監督がいっぱいです(笑

lite boxの古いバージョンでこの線が、CSSの設定ではなぜか消えなかったりといろいろとめんどくさいことになってたので、直接上記のonfocusを設定すると消えるようです。後、このonfocusの設定を一つずつリンクに設定するのはめんどくさい!という場合に、良い方法を見つけました。
以下を内に記述するだけで、全てのaタグに対して、同様の効果を与えることが出来ます。

<script type=”text/javascript”>
<!–
function disable_links_outline() {
var blur = function () { this.blur() };
for (var i = 0; i < document.links.length; i++)
document.links[i].onfocus = blur;
}
//–>
</script>

BODYタグには以下を記述します。
<body onload=”disable_links_outline()”>

※参考元

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1095664

うーん、素晴らしい!

タグ


2010 年 3 月 2 日 | コメント/トラックバック(0)|

カテゴリー:CSS Web全般 てるよし メモ

IE6で透過PNGを表示する方法

すでに激しく既出ですが、現在最も簡単でお手軽である、ie7-jsを使用する方法をご紹介いたします。

1、まずは透過PNGを作成します。Fireworksで作成する場合、背景を何も無い状態(透明)にし、保存形式をPNG32として画像を保存します。

2、ここが肝心。Google コードのie7-jsをサイトに読み込みます。これは直接Googleから読み込んでくることになります。DLしてサーバに置くことも可能。下記ソースを<head></head>内に記述します。現在のバージョンは2.0(beta)なので、そのURLを。こちらはこまめに本サイトをみてバージョンアップのチェックが必要ですね。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

3、利用したい透過pngに xxx-trans.png という風に、名前の後ろに-trans.png をつけることで、その透過pngをIE6で使うようにすることができます。画像の名前がsample.pngであれば、sample-trans.pngといった感じの命名ルールとなります。

以上です。設置も非常にカンタンなので、今のところの一番のオススメでございます。

タグ


超簡単にロールオーバー効果をつけるCSS

ブログメンバーのken.iから耳寄り情報が!何かと面倒な画像のロールオーバー効果ですが、これをCSSにて、しかもたったの2行の記述で実現する方法をご紹介します。

早速ですが、CSSを下記に記します。

a:hover img {
opacity:0.8;
filter: alpha(opacity=80);
}

たったのこれだけです。ロールオーバーされた際に、opacityプロパティを使って不透明度を下げています。また、IEはopacity非対応なので、IE専用のプロパティ、filterを使い、同じく不透明度を下げる・・という方法です。数字はそれぞれ、1と100に近づくほどロールオーバー効果が薄くなっていきます。

調べてみたところ、to-Rの西畑一馬さんが紹介されていました。さすがです!だいぶ手間減りますねーこれ!

タグ


2009 年 10 月 2 日 | コメント/トラックバック(0)|

カテゴリー:CSS Web全般 てるよし メモ

構造のマークアップなしでフロートをクリアする方法

前回も書きました、フロートをクリアする裏技(笑)、clearfix技ですが、もう一つ紹介しておきます。Tony Aslett氏が考え出した書き方とのこと。これは便利!是非お使い下さい(笑)

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

タグ


block要素内のテキストを垂直位置でセンターに配置する

左右真ん中寄せはtext-alignでできますが、縦位置を揃えたい場合。vertical-alignはテーブルのセル内での垂直方向指定しか出来ません。ではどうするか?やり方は簡単です。block要素の高さ分を、line-heightでも同じ数値分、設定するだけです。block要素の高さが40ピクセルなら、line-heightも40pxで指定。超簡単お手軽です。
CSSはこんなかんじ。

.style {
	display:block;
	height:40px;
	line-height:40px;
}

タグ


このページの先頭へ

イメージ画像