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

CSS20150403

Original Update by Geir Arne Brevik


このブログのモバイル用スタイルシートの設定もとりあえず一段落付きました。

毎日ワクワクしてますか!?AllSync.jpへようこそ。Sync.です!今回はモバイル用にスタイルシートを設定した際に、知ってちょー助かったドメイン別にスタイルシートの指定をする方法を紹介します。


ドメイン別に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]

AllSync

少しづつスタイルシートをいじったりしているのですが、効率の良いまとまったスタイルシートを目指したいです。