和洋風KAI

すげー便利!ドメイン別にスタイルシート(CSS)を当てる方法。

覚えておくとかなり便利すぎるスタイルシートの書き方をご紹介。

特にiframeタグやaタグで使える書き方です。

ドメイン別にスタイルシートを当てる方法。

iframe[src*="youtube.com"]{
width: 500px;
height: auto;
}
iframe[src*="nicovideo.jp"]{
width: 320px;
height: auto;
}

例えば、YouTubeの外部プレイヤー(iframe)の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。

a[href*="wayohoo.com"]{
color: red;
}
a[href*="goryugo.com"]{
color: blue;
}

ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合)

タグ名[属性名*="URL"]{
/* CSSの中身 */
}

つまりドメイン別に装飾を分ける際には、上のように書くと理解すれば、ドメインを指定するタグ全てにこれが使えます。

タグ名[属性名^="URL"]{
/* CSSの中身 */
}

ちなみにドメインを除外する場合はこう書きます。

するぷはこう思った。自サイトと他サイトのリンク色を分けると面白いかも。


aタグをドメイン別に装飾し、自サイトと他サイトの色を分けるとわかりやすくなって面白いかもしれませんね。

色だけじゃなくリンクの線を自サイトは点線、他サイトは棒線としてもいいかもしれません。

色々デザインの幅が広がるとおもうのでぜひ使ってみて下さい!

参考: CSSで特定のドメインを含むURLだけ強調表示する | ITポテチ