CSS20150403

Original Update by Geir Arne Brevik


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

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


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

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


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

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


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

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

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


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


AllSync

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