ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
CSSを使うと、<h1>や<p>などの文字を大きくしたり、色を変えたりすることができるのは「CSSの基本的な書き方」で学習しましたね。
でも、この方法だと特定のタグ全てにスタイルが効いてしまうため、自由自在に操ることができません。
例えば、<p>の色を赤に指定した場合、そのホームページ内に出てくる全ての<p>が赤色に変わってしまいます。
これでは少し不便です。
そこで、classとidといった要素を使い、CSSを自在に操る方法があります。
例えば、
p {
color:#F00;
}
このようなスタイルの場合、ページ内の<p>全てにスタイルが適用されてしまいます。（全て赤色になってしまいます）
これじゃあちょっと不便ですね。
そこで、classとidを使うことにより、任意の場所にだけスタイルを適用することができます。
CSSを自在に操るコツは、セレクタ名にあります。
セレクタ名は自分で自由に決めることができます。
必ずしも<h1>や<p>などのタグを入れる必要はありません。
下記のようなセレクタ名でもOKなんです。
ここで注目していただきたいのが、セレクタ名akaの前に.（ドット）が入っている点です。これは任意のタイミングで呼び出すことのできるスタイルであることを意味します。
h1やpなど、.（ドット）を付けずにセレクタ名を指定した場合、強制的にそのタグに対してスタイルが適用されてしまいますが、.（ドット）を付けることにより好きなタイミングで呼び出すことが可能です。
この.（ドット）がついたセレクタを、classセレクタといいます。
セレクタに.（ドット）が付いたスタイルを使うには、以下の方法で呼び出すことができます。
任意のタグの後ろに、class="セレクタ名"を付けることにより、呼び出すことができます。（pとclassの間には半角スペースが入ります）
この場合、<p>で囲んだ「テキスト」の文字が赤色に変わります。
なお、classを指定した<p>だけにCSSが適用されますので、他の<p>には影響を与えません。
この<p>は文字の色を変えたいけれど、ここの<p>は変えたくないな・・・なんて時に便利です。
[classの適用例]<p>テキストテキストテキスト</p>
<p class="aka">テキストテキストテキスト</p>
これをブラウザで表示すると、以下のような結果になります。
自分の好きなタイミングで、好きな場所にスタイルを適用することができるので、非常に便利です。
セレクタ名は自由に決めてもOKです。
例えば、sakichinやhako、akairo、momoiro、dekamojiなど、好きな名前を付けることができます。
.（ドット）が付いたスタイルを呼び出すのがclassですが、もうひとつ、idを使ってスタイルを呼び出すこともできます。
#（シャープ）がついたセレクタを、idセレクタといいます。
idを使ってスタイルを呼び出す場合は、セレクタ名の前に#（シャープ）を付ける必要があります。
#（シャープ）が付いたスタイルを使うには、以下の方法で呼び出すことができます。
classと同じように、指定した場所にのみスタイルを適用することができます。
classとid、どちらでスタイルを呼び出しても結果は変わりません。読込速度が早いとか遅いとか、そんなこともありません。
classとidの違いは、「使用回数」にあります。
classは1ページ中に何度でも呼び出すことができますが、idは1ページ中に1度だけしか使うことができません。
まだCSSに慣れないうちは、1度しか使えないidなんて意味あるの？なんて思ったりもしますが、慣れてくるとそうでもないんです。
ホームページを制作していると、必ず「これは一度しか使用しない」スタイルが出てきます。
例：#wrapや#header、#footerなど
そこそこの規模のホームページになると、CSS周りもゴチャゴチャしてきますので、見やすいようにclassとidで使い分けたほうが、編集や修正の際に便利なんです。
この「さきちんWeb」のスタイルは100種類以上あるのですが、その中でidは3割ちょっと使っています。（数えてみたら、結構ありました・・・）
これが全部classになっちゃうと、スタイルを修正する際に探し出すのが大変です。
はじめのうちは慣れないかもしれませんが、徐々にclassとidを使い分けるようにするといいと思います。
もちろん、稀に全てclassで統一している人もいたりしますので、必ずしもclassとidを使い分けなければならないことはありません。
しかし、この先Web業界を目指す方や中～大規模のホームページを作りたい方、共同で作業する必要がある場合などは、自分だけではなく他人にもわかりやすいHTML・CSS構造とするために、classとidは使い分けたほうが良いでしょう。
classは何度でも使い回すことができますが、idは一度しか使うことができません。なので、idは一度しか使わない要素（例えば、headerやfooter）などに使われることが多いです。
頻繁に呼び出すCSSはclassで定義し、一度しか使わないCSSはidで定義すると良いでしょう。
1ページ中にidを複数回使っても、正常にスタイルが適用される場合があります。でも、これはブラウザが気を利かせてくれているだけであって、文法的には大間違いです。必ず、classとidは使い分けるようにしましょう。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。