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

webデザイン

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

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

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

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

前回の記事はこちら

今回はclass編になります!

classとは

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

それぞれの要素に違うスタイルが適用できるように、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タグは複数のタグを1つにまとめる箱のような役割で、div単体では意味を持ちません。

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

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

CSSでの指定

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

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

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

完成はこちら

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

背景色をつける流れ

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

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

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

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

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

<div class="content-1">
  <h2>これはコンテンツ1</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>これはコンテンツ1</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.

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

classに似た属性でidがある

classに似たidという属性があります。それぞれの違いは下記の通りです。

  • id・・・・オンリーワンの名前を割り当てる(ページ内で一度しか使えない)
  • class・・分類や種別を割り当てる(何度でも使える)

実用性を考えると全体を囲む系にはidを、それ以外にはclassを使うのが一番シンプルでしょう。idを多用してしまうと優先度の問題で更新や修正が大変になることもあります。

ちなみに、ページ内リンクなどのidがマストな場面以外ではidを使わない方がいいとされる意見もあります。

慣れるまではclassだけでもいいかもしれません!

idの指定

HTML・・・<要素 id =”任意の名前”>

CSS・・・・#任意の名前{}

で指定することができます。

指定方法はほとんどclassと変わりませんね!

まとめ

  • HTMLではclassやidを使い要素に任意の名前をつけることができる
  • HTMLでは【<要素_class(id)=”任意の名前”>】
  • divタグは複数のタグを1つにまとめる箱
  • CSSでのclass指定はclass名の頭に【.(ドット)】をつける
  • CSSでのid指定はid名の頭に【#(シャープ)】をつける

次回は見やすいコードの書き方についてです!

この記事を書いた人
nobu

株式会社キャップ所属 デザイナー/アートディレクター。デザイン歴10年 大手小売業のインハウスデザイナーを経てフリーランスとして独立。世界初炭酸氷のロゴデザインなどを行う。様々な出会いと別れを経て、現在は株式会社キャップ メディアソリューション室にてデザイナー/アートディレクターとして奮闘中。同社webマーケティング責任者です。 公式サイトHPリニューアルにてPV数500%UPを達成。illustACにてイラストを提供中です!DLランキング上位1%に入ることができました!

nobuをフォローする
webデザイン
シェアする
nobu no blog
タイトルとURLをコピーしました