【css】class属性でHTML要素を指定するクラスセレクターを解説します

css

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、10年目エンジニアです。

この記事では、 cssでclass属性でHTML要素を指定するクラスセレクターについて、書き方サンプルをまじえながら解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

class属性でHTML要素を指定するクラスセレクターを解説

class属性でHTML要素を指定するクラスセレクターを解説します。

クラスセレクターは

とクラス名の前に.(ドット)を付けて宣言します。

では、次の章で実際に使い動作を確認します。

クラスセレクターサンプルの概要

クラスセレクターサンプルでは、

  • HTML
  • css

の2ファイルを使います。

クラスセレクターを2つ用意し、それぞれデザインを指定します。
画面に表示させ、クラスで指定したデザイン表示になっているかを確認をします。
フォルダ構成は以下のようになっています。
外部css読み込みを解説するフォルダ構成

HTMLで外部のcssを読み込むやり方はこちらの記事をご参考ください。

HTMLサンプル

cssサンプル

実行結果

作成したHTMLをブラウザで開くと、指定したクラスセレクターに沿ったデザインで表示されていることが確認できました。

まとめ:クラスセレクターを使ってみよう

以上がcssでclass属性でHTML要素を指定するクラスセレクターについての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました