今回のポイント
今回はHTMLで『属性』を指定しているものに対して装飾を与える方法を解説していきます。
属性とは
例えば以下のような、HTMLがあったとします。
<div class=”＊＊＊＊”>●●●●●●</div>
この場合『div』は要素で『class』は属性となります。
今回はこのような属性を対象に文章や図に対して装飾を与える方法について解説していこうという回です。
HTMLの記事を準備
それではいつものようにHTMLの記事を準備します。
というか準備しました（汗）。
HTMLを確認しましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだ<a href=”#”>HTML</a>のスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法は<a href=”#”>header要素</a>内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部に<a href=”#”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
<div class=”test”>この記事は、ぱくぱくが書きました。</div>
</body>
</html>
そしてブラウザで確認してみましょう。
そして今回は、外部のCSSファイルを作成して記述していきますので、準備をしておいて下さい。
ちょっと不安な方は、以下の以前の記事を参考にして下さいね。
HTMLの属性を確認する
それでは今回の記事の中で、属性がどこに潜んでいるか分かりますか？
分かりやすくするために、太字で表現してみました。
以下のHTMLの記事を、確認してみて下さい。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだ<a href=”#”>HTML</a>のスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法は<a href=”#”>header要素</a>内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部に<a href=”#”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
<div class=”test”>この記事は、ぱくぱくが書きました。</div>
</body>
</html>
いかがでしょうか？
属性は分かりましたか？
それでは今回の本題である『属性セレクタを学ぶ。』に入っていきます。
属性セレクタで指定する
それではまず、今回のHTMLの記事内容の『href』属性の背景色を変えてみます。
以下のようにCSSを記述してみて下さい。
[href] {
background-color: cornflowerblue;
}
これは
HTML内の『href属性』に対して背景色をcornflowerblueに指定する。
というCSSの記述内容となります。
それではブラウザで確認してみましょう。
いかがでしょうか。
HTMLの『href属性』で指定された部分が装飾されたことが分かりますね。
それでは問題です。
Q：今回のHTMLの記事で『Class属性』に指定された文章の背景色をCSSで赤色にして下さい。
分かりますか？
答えは以下の通りです。
[class] {
background-color: red;
}
それではブラウザで確認しましょう。
いかがだったでしょうか。
前回までも、一斉にCSSで指定する方法を解説してきました。
今回のように属性に対して指定する方法もあります。
CSSを効率よく記述するためにも、あらゆる指定方法を学んで下さい。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
