HTML5とCSS3の練習（属性セレクタ、擬似クラス）

HTML5

HTML5とCSS3の技法を使うことで、表現、装飾の幅は拡がります。しかしブラウザによって対応状況に差があるため、使うポイントについては注意が必要です。意図したとおりに見えない状況でも重要な情報は伝わるように使いどころを工夫しないといけません。

属性セレクタ

class属性、id属性の値を細かく指定できるセレクタ。○番目の要素、○○で終わる、○○で始まる、など。

属性セレクタサンプル

-index1.html(class属性をホットピンク色）
-index2.html(class属性がhamをホットピンク)
-index3.html(class属性にhamが含まれているものhotpink)
-index4.html(class属性がhamで始まるものをホットピンク色)
-index5.html(class属性がhamで終わるものをホットピンク色)
-index6.html(class属性の値がhamという区切り文字を含むものをホットピンク色）
-index7.html(class属性の値がhamというハイフン区切りの文字から始まるものをホットピンク色）

擬似クラス
  • a要素が対象。a:link、　a:visited、 a:hover、 a:activeの４つ。
  • :linkと:visitedはa要素にのみ使用できる擬似クラス
  • 擬似クラスを活用すると文書の装飾の幅が広がる

擬似クラスサンプル
-index1.html(linkをグリーン、訪問済みをグレー、ホバーをオレンジ、フォーカスをホットピンク）
-index2.html(aのカラーをブルー)
-index3.html(最初の要素の背景をイエロー、最後の要素の背景を黄緑）
-index4.html(最初から2番めの要素の背景をイエロー、最後から2番めの要素の背景を黄緑）
-index5.html(奇数番目の要素の背景を黄色、偶数番目の要素の背景を黄緑）
-index6.html(3つあるうちの一番目の要素の背景を黄色、2番めの要素の背景を黄緑、3番目の要素の背景をスカイブルー）
-index7.html(h2の奇数番目の要素を黄色、偶数番目を黄緑、pに字下げ）
-index8.html(before要素、after要素）
-index9.html(1文字めを強調)

アニメーション（マーキー）

マーキーは横向きにずっと動く動きです。

ポイント

  • meta name="viewport"を指定することでレスポンシブになる
  • (max-width:480px)を指定することでスクリーンがこのサイズ以下になった時に実行される

マーキーサンプル(safariで、そして横幅を480px以下で見てね）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>角度を変更した要素のマーキー</title>
<link rel="stylesheet" href="css/style6.css" media="only screen and (max-width:480px)">
<style>
#mq{
	overflow:-webkit-marquee;
	-webkit-transform:rotate(45deg);
	width:50%;
	white-space:nowrap;
	position:absolute;
	top:0.5em;
	right:-2.5em;
}
</style>
</head>

<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>

</body>
</html>

style6.css

@charset "utf-8";
/*  マーキーアニメ用のp要素へのスタイル*/
#mq{
	background-color:#903;
	background-image:-webkit-gradient(linear, left top, right top, from(#903), to(#903), color-stop(0.4,#F00),color-stop(0.6,#F00));
	color:#FFF;
	border:inset #999 1px;
	padding:3px 0;
}
アニメーション（大きな画像をゆっくり動かす）

サンプル（Chromeで見てね）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>無限背景</title>
<style>
body{
	background-image:url(img/town.png);
	background-repeat:repeat-x;
	-webkit-animation:bk_move 360s linear 0 infinite;
}
@-webkit-keyframes 'bk_move'{
	from{
		background-position-x:left;
	}
	to{
		background-position-x:5753px;
	}
}

</style>
</head>

<body>
<section></section>
</body>
</html>