【ドメイン別にCSSを指定する方法】モバイルフレンドリー化させた際にちょー助かったスタイルシートの記述方法。

ドメイン別にCSSを設定する方法

CSS3の属性セレクタを使った方法で、まとめて「youtube.com」といったドメイン名を含むリンク全てにスタイルシートを適用したい時に使えて、iframeタグのドメイン名にも指定できます。例えば、

[code:css] /*YouTube*/ iframe[src*="youtube.com"] { width:100%; } /*GoogleMap*/ iframe[src*="google.com"] { width:100%; } /* Viemo */ iframe[src*="viemo.com"] { width:100%; } [/code]

上記のように指定すれば、YouTubeの外部プレイヤーの横幅とViemo動画の横幅を違った設定にできたりもします。

aタグ（リンク）をドメイン別に指定する方法もあります。

[code:css] /* このサイトの場合 */ a[href*="allsync.jp"]{ color: red; } /* Yahoo!の場合 */ a[href*="yahoo.jp"]{ color: red; } [/code]

上記の用に指定すれば、リンクのドメインによって文字色を変えたりできます。
ポイントはアスタリスク（*)のようで、これがあることでCSSでのスタイル指定が可能になります。逆に「^」を使うと特定キーワードの除外になるようです。

[code:css] /* ドメイン別指定の例 */ タグ名[属性名*="URL"]{ /* CSSの中身 */ } /* ドメインを除外する場合の例 */ タグ名[属性名^="URL"]{ /* CSSの中身 */ } [/code]