CSSスキル - 第2章 Lesson5

複数の同じタグに異なるCSSを適応させる:class名の記述

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。
ここでは、class名を利用して、複数の同じタグに対して、それぞれ異なるCSSをかける方法について、解説します。
また、class名とid名をどのように使い分ければ良いかについても触れていきます。



この動画で学べること

・class名を使ったスタイルの指定方法



class名を使ったスタイルの指定方法

class名を使ったスタイルの指定方法について説明します。
前回までは、id名を使ったスタイルの指定について学びました。
今回使うclass名というのも、指定した特定の要素にスタイルを書けるというのは同じですが、
id名は1つのHTMLファイルの中で1回しか使えないのに対して、class名は1つHTMLファイルの中で何回も使うことができます。




CSSではclass名を「.(ピリオド)」と表現します。
ではclass名「center」をつけた文章の文字を真ん中寄せにしてみたいと思います。



.center {
text-align: center;
}




一度、保存してブラウザで見てみましょう。
変化はありませんが、HTMLファイルの中でclass名に「center」と指定されたものの文字を真ん中寄せにするという定義ができました。
複数の要素に同じスタイルをかけたいときには、このclass名を使うのが便利です。
これから何度も使うので、id名と合わせて、覚えておきましょう。