ブログデザインのカスタマイズ！CSS基本のクラスを理解する

html_css

ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。（参照：HTMLとCSSの使い方を簡単に理解する！）

今回はいよいよ最初の壁となるCSSのクラスの使い方です。

HTMLとCSSを使ってみようと思ったはいいけど、結局良くわからずにやめてしまった、という場合、原因の多くは以下２点。

「簡単そうなので一気にやろうとして分けわからなくなった」
「クラスとかidが出てきて分からなくなった」

ネットビジネスではWordPressを使い、外観のデザインは”テーマ”を選ぶこと自ら体を入れることなく、基本は全てでき上がっています。

それでも他のブログと外観で差別化をはかるには、ヘッダー画像を変えたり、個別のパーツの色や大きさ、形を変える、といったように、何もないところから全て作る、というのではなく「部分修正が基本」。

つまりCSSの全てを理解し習得する必要はなく、修正したい箇所に対して必要なもののみを使えるようになれば良い、ということがポイントです。
（極端に言えばどこかに示されているサンプルをコピペして使えるようにする術だけを覚えれば良い）

ここでは一歩進んでCSSの最初の難関、クラスについて理解を深めます。

あなたのデザインスキルを上げるため、ここで更に武器に磨きをかけ、成功への足取りを楽しくします。

Contents

1 簡単動画解説
2 HTMLとCSSの復習
3 誰もがつまづくクラス
4 クラスの使い方
5 クラスの使い回しとタグの限定
6 今回の復習

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

HTMLとCSSの復習

まずは少しだけHTMLとCSSの復習です。

HTMLとは、文の構成や要素
CSSとは、構成や要素に対するデザインの指定
HTMLにCSSを適用するときの形式
HTMLのタグ {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・・・・
}
具体例
h1{
font-weight: bold;
color: black;
}

さてこの内容に対して、ちょっと待った！イマイチ理解が．．．と言う場合には、以下の記事をもう一度見て復習しておきましょう。

ブログデザインのカスタマイズ！HTMLとCSSの使い方を簡単に理解する！

誰もがつまづくクラス

ぱっと眺めればとてもシンプルなHTMLとCSSですが、CSSには”クラス”と”id”というものがあります。

多分多くの人が最初につまずく１つがこの”クラス”と（次回解説の）"id"ですが、ここが理解できれば怖いものはありません。

CSSは上で見たように、HTMLのタグに対して直接指定できます。が、これだと不便な場合も出てきます。

例えば、記事本文にある見出しは h2タグを使いますが、この h2 に対して文字色を緑で太字にしよう、ということで、

h2 {
color: green; /* 文字色を緑 */
font-weight: bold /* 文字を太字に */
}

※）/* ~ */ はコメントを示します

と指定すると、 h2 で指定された箇所全て「文字色が緑で太字」に変化します。

おぉ、CSSって凄い！と思いつつも、実はブログの一番下の部分（フッター）や新着記事の表示などをする横のサイドバーなど、思わぬ所で同じタグ（h2）が使われてたりして、実際表示してみるとゲゲ！となることも少なくありません。

こういう場合があるからこそ活躍するのが「id」や「クラス」です。

クラスとは

（今回の記事では基本となるクラスの解説です）

クラスとは、色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの。

例えば、

セットメニュー１は、太字と文字色は黒
セットメニュー２は、文字色は黄色で、下線付き
セットメニュー３は、周りを黒色の線で囲む

これらのセットメニュー１~３に対して、英数字で固有の名前を付けたものがクラスです。例えば、

セットメニュー１　→　title21
セットメニュー２　→　title22
セットメニュー３　→　box01

※）ここでは意味なく適当に名前を付けてます

他に使ってない名前なら基本はOK.
自分にとってその中身がよく分かる名前にします。（具体例は以下参照）

クラスの使い方

こうしてクラス（セットメニュー）を作り、それをHTMLのタグに適用する、とうい使い方になります。

クラスの形式

実際のクラスの書き方は、最初に「.」（ピリオド）を付けて以下の形。
（頭に「.」を付ける以外は最初に復習したHTMLのタグの場合に同じです）

クラスの形式
.クラス名{
プロパティ:値;
プロパティ: 値;
プロパティ: 値;
・・・・
}
具体例
.title21{
font-weight: bold; /* 太字 */
color: black; /* 文字色は黒 */
}

※）/* ~ */ はコメントを示します

これで title21 というクラスは、太字で文字色は黒、という内容になります。

タグへの指定の仕方

タグへの指定の仕方は、タグの中に　class="xxx"　を書き、xxxの部分に作成したクラス名を記述します。

これを先ほどのh2に適用する場合では以下の様な形です。

クラスをタグへ指定する形式
＜タグ class="クラス名"＞・・・・</タグ>
具体例
<h2 class="title21">明日に向かって売れ！</h2>

このようにクラスを使ってデザインを指定することで、

１つ目のh2には　title21　を指定し、
２つ目のh2には　title22　を指定する、

という使い方ができます。

<h2 class="title21">明日に向かって売れ！</h2>
<h2 class="title22">明後日に向かって釣れ！</h2>

クラスの使い回しとタグの限定

感覚の鋭いあなたなら「お、ということは．．．」とわかると思いますが、ここで作成したクラス「title21」などはどこにでも使えます。

例えば、

<p>これは記事本文です。内容は．．．</p>

といった最もよく見かける「p」タグ（paragraph：段落や文章のまとまりを意味するタグ）ですが、ここに太字で文字色は黒、と上で定義でしたクラス「title21」」を同じように適用したいとします。

この場合、正に上でしたように以下のように指定すれば良いんですね。

<p class="title21">これは記事本文です。内容は．．．</p>

このように使い回しが出来てとても便利なクラス。

それでも異なるHTMLのタグに対して同じCSSのクラスを使うと、結果としてどこでどのように使っているか分からなくなり、後で修正を入れる時に大変なことになったりします。（経験者、大いに語る σ^-^;)）

（タイトルだけ文字色を黒から紫に変えるつもりが、記事の本文まで全て紫色に変わってしまい大パニック、みたいな感じですね）

特定のタグへ限定する指定法

ということから、特定のHTMLタグに限定して有効とするクラスの書き方も勿論あります。形式は以下のとおり。

形式
タグ.クラス名 {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・・・・
}
具体例
h2.title21{
font-weight: bold;
color: black;
}

このように、クラス名の前にHTMLのタグを書けば、この「title21」はh2のタグだけに有効なクラス、となります。
（逆にいえば、HTMLタグを書かなければ、全てに対して使えるクラスになる、ということですね）

つまりこの場合、

<h2 class="title21">明日に向かって売れ！</h2>

では、title21の指定は有効であり、内容が反映されて表示されますが、

<p class="title21">これは記事本文です。内容は．．．</p>

では、title21の指定は無効になる、ということです。
（間違って使われることはない。間違って使われても機能しない、となります）

今回の復習

難関の１つとなるCSSのクラスについて見てきました。

クラスとは、色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの
クラスの形式
- .クラス名{
  プロパティ:値;
  プロパティ: 値;
  プロパティ: 値;
  ・・・・
  }
- 具体例
  .title21{
  font-weight: bold;
  color: black;
  }
特定のタグへの限定
- 形式
  タグ.クラス名 {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
  ・・・・
  }
- 具体例
  h2.title21{
  font-weight: bold;
  color: black;
  }
タグへの指定の仕方
- 形式
  ＜タグ class=”クラス名”＞・・・・</タグ>
- 具体例
  <h2 class=”title21″>明日に向かって売れ！</h2>