home
twitter
ページトップへ
目次
  • そもそもCSSの「セレクター」とは何か?
  • 「idセレクター」とは何か?
  • 「idセレクター」の使い方
  • 参考リンク。
  • あわせて読みたい記事。
  • まとめ
about
categories
page
archive
皇帝ペンギンブログ

2024/01/29 (更新日:2024/07/11)

【CSS】「idセレクター」について解説!【分かりやすい】

Categories > CSSのセレクター編
こんばんは!初めましての方は初めまして!
しゅーた(@chibasyuta)です!

この記事ではCSSの「idセレクター」について解説します。

「idセレクター」って何??

このような方が対象です。

この記事の内容!

  • そもそもセレクターとは何か?
  • idセレクターとは何か?
  • idセレクターの使い方
また、下の動画でも「idセレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!

それでは内容へ入ります!

目次
非表示
  • そもそもCSSの「セレクター」とは何か?
  • 「idセレクター」とは何か?
  • 「idセレクター」の使い方
  • 参考リンク。
  • あわせて読みたい記事。
  • まとめ

そもそもCSSの「セレクター」とは何か?

セレクターの箇所を図示

CSSの「セレクター」とは「どの要素にスタイルを当てるか?」を指定する箇所のことを指します。

ふむふむ。

「idセレクター」とは何か?

「idセレクター」とは何か?

「idセレクター」を使うと「特定のIDがついたHTML要素」にスタイルを当てることができます。

「idセレクター」の使い方

<div id="hoge"></div>
#hoge {
    width: 600px;
    height: 600px;
    background-color: skyblue;
}

「#」ハッシュ記号を書いて、その後に続けて「id名」を書けばOKです!

「#」ハッシュ記号の後にスペースは入れない、ということに注意してください!

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#id-selectors

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/ID_selectors

あわせて読みたい記事。

大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】

関連記事

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか?」を指定する箇所のことを指す。

「idセレクター」を使うと「特定のidがついたHTML要素」にスタイルを当てることができる。

「#」ハッシュ記号を書いて、その後に続けて「id名」を書けばOK!

こんな感じですかね!

この記事が気に入った方は僕のTwitter(@chibasyuta)のフォローもお願いします!

また、下の動画でも「idセレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!

それではこんな感じでこの記事を終わります!

ではまた!

自分のロゴ!

皇帝ペンギン

全力で、書きます。
少しでもお役に立てたら幸いです。
楽しんで読んで下さい 。-_- 。
よろしくお願いします!

x(旧twitter) youtube
Categories
  • トップへ
  • ITパスポート (1)
  • programming (168)
    • CSSのアニメーション編 (26)
    • CSSのグリッドレイアウト編 (1)
    • CSSのセレクター編 (58)
    • CSSのフレックスボックス編 (1)
    • CSSのメディアクエリー編 (7)
    • CSSの基本編 (34)
    • HTMLのformタグ編 (1)
    • HTMLの基本編 (3)
    • JavaScriptの入門編 (30)
    • JavaScriptの基本編 (5)
    • Web制作をする環境を整えよう! (1)
  • Uncategorized (23)
  • VScode (1)
  • おすすめ商品! (1)
  • クラロワ (2)
  • マーケティング (17)
  • 大学生活 (7)
  • 心理学 (9)
  • 映画 (1)
  • 法学 (4)
  • 経済学 (4)
  • 読書 (7)
Pages
  • プライバシーポリシー
  • 免責事項
  • プロフィール
Archive
  • 2025年3月 (1)
  • 2025年1月 (9)
  • 2024年12月 (13)
  • 2024年11月 (5)
  • 2024年10月 (10)
  • 2024年9月 (15)
  • 2024年8月 (5)
  • 2024年7月 (6)
  • 2024年6月 (5)
  • 2024年5月 (10)
  • 2024年4月 (24)
  • 2024年3月 (11)
  • 2024年2月 (6)
  • 2024年1月 (10)
  • 2023年12月 (4)
  • 2023年11月 (3)
  • 2023年10月 (2)
  • 2023年9月 (3)
  • 2023年8月 (6)
  • 2023年7月 (3)
  • 2023年6月 (8)
  • 2023年5月 (2)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2022年10月 (2)
  • 2022年9月 (2)
  • 2022年8月 (8)
  • 2022年7月 (2)
  • 2022年6月 (6)
  • 2022年5月 (9)
  • 2022年4月 (2)
  • 2022年2月 (4)
  • 2021年12月 (1)
  • 2021年11月 (4)
  • 2021年10月 (8)
  • 2021年9月 (14)
  • 2021年8月 (6)
  • 2021年6月 (1)
  • 2021年5月 (2)
  • 2021年4月 (1)
  • 2021年3月 (1)
  • 2021年2月 (2)
  • 2020年10月 (1)
  • 2020年7月 (1)
  • 2020年4月 (1)
  • 2020年1月 (1)
  • 2019年12月 (2)
© Copyright Syuta Chiba, 2019 All Rights Reserved.