ホーム＞コース別ガイド一覧＞特定の場所のデザインを変えるのに必要な知識は？
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
h1 { color: red; font-size: 20px;}
p.style1 { font-size: 14px;}
.style2 { background-color: blue;}
</style>
</head>
<bodｙ>
<h1>簡単に作れるワンポイント料理</h1>
<p class="style1">料理をおいしくするための<br>
<em class="style2">ワンポイント</em>を紹介します！</p>
<p>おいしい<strong class="style2">チャーハン</strong>の作り方</p>
</body>
</html> |
同じタグが複数ありその中の特定のタグに異なるデザインを指定したい場合はタグに名前を付けます。これを「クラス名」といいます。
例えば、HTMLファイルで段落を投入する場合は p 要素を入力しますが、特定の p 要素の特定のデザインを変えたいとき、タグに名前を付けてCSSでデザインを指定します。目的の部分のタグに class 属性を追加することで、タグにクラス名を付けることができます。（右図の赤の点線）
このクラス名にデザインを指定する場合、CSSのセレクタを「タグ.（ドット）クラス名」の形式でデザインを指定します。右の記述例（右図の赤文字）を参考にしてください。
また、セレクタのタグを省略し「.（ドット）クラス名」と記述すると （右図の青文字）同じクラス名が設定されたすべてのタグに対してデザインを指定することができます。（右図の青点線）
※クラス名には、アルファベットで始まる半角英数字や「 - 」（ハイフン）、「 _ 」（アンダーバー）で任意の名前を指定することができます。ただし、古いブラウザではアンダーバーはクラス名が認識されないものもありますので、使用はひかえたほうが良いかもしれません。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
span { color: red;}
</style>
</head>
<bodｙ>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<span>ワンポイント</span>を紹介します！</p>
<p>おいしいチャーハンの作り方</p>
</body>
</html> |
タグで区切られていない部分をデザインしたい場合は、span 要素を使います。ただ span 要素を使っただけでは見た目は変わりませんので、CSSで span 要素のデザインを指定します。右の記述例を参考にしてください。
