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

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

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

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

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

OS Windows10

id属性でHTML要素を指定するIDセレクターを解説

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

IDセレクターは

とid名の前に#(ハッシュ)を付けて宣言します。

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

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

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

  • HTML
  • css

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

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

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

HTMLサンプル

cssサンプル

実行結果

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

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

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

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

コメント

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