Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 属性を使った指定

今回は、CSS3の属性を使った指定について書きます。


CSS3では、セレクタに属性の指定ができるらしいので、その使い方を書いていきます。

ちなみに、セレクタというのは、「{}」の前にあるやつの事です。

h1 { color:blue; }

↑このコードで言うと、「h1」がセレクタです。

あと、属性は、↓のコードでいうと「href」のことです。

<a href="https://www.google.co.jp/">

属性は他にも「id」,「class」,「title」などがあります。

この辺をもっと詳しく知りたい方は、こちら


では、本題に入ります。

セレクタに属性の指定する方法は、セレクタの後ろに「 [] 」をつけます。
こんな感じに↓

a[href="http://www.yahoo.co.jp/"] { color: green;}

実際のプログラムで使うと、こうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		a[href="http://www.yahoo.co.jp/"] {
			color: green;
		}
	</style>
</head>
<body>
		<ul>
			<li><a href="https://www.google.co.jp/">ぐーぐる</a></li>
			<li><a href="http://www.yahoo.co.jp/">やふー</a></li>
			<li><a href="http://www.apple.com/jp/">りんご</a></li>
		</ul>
</body>
</html>

実行結果
f:id:gupuru:20140324214912p:plain

「href="http://www.yahoo.co.jp/"」だけ緑色になってます。

上の使い方以外に、他にも使い方があります。

  • 「^」をつけると、部分一致になります。
a[href^="https"] { color: red; }

この場合ですと、https」から始まるものを赤色に指定します。

「a[href^=」を使ったプログラム↓

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		a[href^="https"] {
			color: red;
		}

	</style>
</head>
<body>
		<ul>
			<li><a href="https://www.google.co.jp/">ぐーぐる</a></li>
			<li><a href="http://www.yahoo.co.jp/">やふー</a></li>
			<li><a href="http://www.apple.com/jp/">りんご</a></li>
                       	<li><a href="https://twitter.com/">ついったー</a></li>
		</ul>
</body>
</html>

実行結果
f:id:gupuru:20140324215459p:plain
https」から始まっているものだけだが、赤色に変わっています。

  • 「$」というものもあります。

こちらも部分一致です。

a[href$="jp/"] {color: red;}

「jp/」で、終わるものを指定します。

  • 「*」というものもあります。

こちらは、含まれているものを指定します。

	a[href*="com"] {color: red;}

この場合では、「com」が含まれているものを指定できます。



まとめますと・・・

  • 「^」・・・〜で始まるもの
  • 「$」・・・〜で終わるもの
  • 「*」・・・〜が含まれるもの

参考サイト
意外と知らない!?CSSセレクタ20個のおさらい|Webpark
スタイルシート[CSS]/CSSの基本/属性を使った指定 - TAG index Webサイト

広告を非表示にする