【-class編-】1日15分で覚えるWEBデザイン-第3回

この記事はこんな方におすすめです

WEBデザインを始めたい方
プログラミング（マークアップ）をはじめたい方
WEBデザイナーに仕事を依頼する立場にある方
ワードプレスをカスタマイズしたい方

こんにちはデザイナー/アートディレクターのnobuです。

当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。

前回の記事はこちら

今回はclass編になります！

classとは
HTMLでの指定
【divタグ】classとセットで覚える
CSSでの指定
グループごとに背景色をつけてみる
【応用】さらに文字色を変えてみましょう
classに似た属性でidがある
まとめ

classとは

「HTMLではh1やpなどの要素（タグ）を指定する」と１限目で解説しましたが、それだけでは同じ要素のスタイルが被ってしまいます。

それぞれの要素に違うスタイルが適用できるように、HTMLではclassを使い要素にクラス名をつけることができます。

「ここのh2と、あそこのh2の装飾を別々にしたいよ」ってときにclassを使います。

HTMLでの指定

HTMLでのclassは【要素_class=”クラス名”】で指定することができます。クラス名は自由に決められますが、デザインの意図やそのグループの役割をクラス名にすることが推奨されています。

・main – 主要な。
・primary – 主要な。
・secondary – 補助的な・第二の。
・tertiary – 第三の。
・quaternary – 第四の。
・common – 共通の。
・global – 全体的な。
・local – 局所的な。
・general – 一般的な。
・site – サイトの。 etc….

【divタグ】classとセットで覚える

classとセットで覚えておくと良いのがdivタグです。

divタグは複数のタグを１つにまとめる箱のような役割で、div単体では意味を持ちません。

「背景色をつける」「余白を設ける」等、divで囲んだグループに対してスタイルを行うこともできます。

テクニックとして、慣れないうちは各グループに背景色をつけて作業するとわかりやすいです！

CSSでの指定

CSSでのclassは「.（ドット）」を頭につけることで指定できます。

グループごとに背景色をつけてみる

実際にグループごとに背景色をつけてみます。

完成はこちら

See the Pen by seison waten (@capplus1-design) on CodePen.

背景色をつける流れ

HTML・・・classを指定する
CSS・・・・それぞれに背景色をつける
【応用】文字色を変える

1.HTML・・・classを指定する

①まずはグループをひとつ作ります。全体を囲うclassには「content-1」を指定します。

<div class="content-1">
  <h2>これはコンテンツ１</h2>
  <p>それぞれのグループに背景色をつける。</p>
</div>

②content-1を複製して3グループにします。それぞれclass名とh2の中身を「content-2」「content-3」に書き換えましょう。

<div class="content-1">
  <h2>これはコンテンツ１</h2>
  <p>それぞれのグループに背景色をつける。</p>
</div>

<!--↓↓↓↓↓content1をコピペで追加&書き換え↓↓↓↓-->
<div class="content-2">
  <h2>これはコンテンツ2</h2>
  <p>それぞれのグループに背景色をつける。</p>
</div>

<div class="content-3">
  <h2>これはコンテンツ3</h2>
  <p>それぞれのグループに背景色をつける。</p>
</div>

プレビューはこのようになります。

See the Pen by seison waten (@capplus1-design) on CodePen.

CSS・・・・それぞれに背景色をつける

それぞれのclassに背景色を指定します。

.content-1{
  background-color:red;
}

.content-2{
  background-color:green;
}

.content-3{
  background-color:blue;
}

プレビューはこのようになります。

See the Pen by seison waten (@capplus1-design) on CodePen.

【応用】さらに文字色を変えてみましょう

さらに文字色を変えてみましょう。

HTMLにclassを追加する

先ほどの3グループを「content-wrap」というクラス名でグループ化します。

<div class="content-wrap">
<!--ここから下はさっきのコード-->
  <div class="content-1">
    <h2>これはコンテンツ１</h2>
    <p>それぞれのグループに背景色をつける。</p>
  </div>

  <div class="content-2">
    <h2>これはコンテンツ2</h2>
    <p>それぞれのグループに背景色をつける。</p>
  </div>

  <div class="content-3">
    <h2>これはコンテンツ3</h2>
    <p>それぞれのグループに背景色をつける。</p>
  </div>
<!--ここから上はさっきのコード-->
</div>

CSSで「content-wrap」の文字を白くする

/*コレを追加*/
.content-wrap{
  color:#fff;/*16進数で指定する白*/
}
/*コレを追加*/

.content-1{
  background-color:red;
}

.content-2{
  background-color:green;
}

.content-3{
  background-color:blue;
}

プレビューはこちらです

See the Pen by seison waten (@capplus1-design) on CodePen.

お疲れ様でした。レイアウトを行う際にも慣れないうちは背景色をつけて作業すると余白や段組みを行う際わかりやすいです。