インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

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

  2015/11/27   あとで読む

約 5 分で読めます

html_css

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

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

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

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

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

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

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

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

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

関連記事 ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

簡単動画解説

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

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

HTMLとCSSの復習

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

  • HTMLとは、文の構成や要素
  • CSSとは、構成や要素に対するデザインの指定
  • HTMLにCSSを適用するときの形式

    HTMLのタグ {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }

  • 具体例

    h1{
        font-weight: bold;
        color: black;
    }

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

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

誰もがつまづくクラス

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

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

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

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

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

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

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

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

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

クラスとは

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

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

例えば、

  • セットメニュー1は、太字と文字色は黒
  • セットメニュー2は、文字色は黄色で、下線付き
  • セットメニュー3は、周りを黒色の線で囲む

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

  • セットメニュー1 → title21
  • セットメニュー2 → title22
  • セットメニュー3 → box01

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

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

クラスの使い方

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

クラスの形式

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

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

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

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

タグへの指定の仕方

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

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

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

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

  • 1つ目のh2には title21 を指定し、
  • 2つ目の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の指定は無効になる、ということです。
(間違って使われることはない。間違って使われても機能しない、となります)

今回の復習

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

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

CSSのクラスの形式、タグへの指定の仕方は分かりましたか?

実際のCSSはどういう指定の仕方をすると、そうなるんだろう、と先ばかりが気になりますが、まずはこの形を理解するようにして下さい。

極端に言えば、形さえ理解すれば、必要な所を抜き取ってコピペすればデザインカスタマイズはできるのです。あせらず1つづつ自分のものにしていって下さいね。

次回はもう1つの難関、id について解説します。

クラスとidをものにして、その後は具体的カスタマイズへ移行です!

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です