【プログラミング独学15日目】要素型セレクター・classセレクター・idセレクター・属性セレクター
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学15日目】学んだこと
今日もCSSの続きをやりました。昨日で基礎文法編が終わったので、今日からセレクター編です。
先日上の記事で書いたように、ここ数日プログラミング学習にやる気が無く・・・。そこで夜ではなく午前中に学習時間を取ってみたら、集中でき学習も捗りました！夜はインプットではなくアウトプットの時間にした方が良いですね。
①セレクターの種類
CSSを構成するセレクターは、5つの種類に分けられます。
- 要素型セレクター
- classセレクター
- idセレクター
- 属性セレクター
- 全称セレクター
それぞれ詳しく見ていきましょう。
②要素型セレクター
要素型セレクターとは以下のようなものを指します。
<h1>見出し</h1>
<p>説明文</p>h1 {
color: skyblue;
}上のCSSにおける「h1」の部分が要素型セレクターです。今までこのような基本的な部分の説明が飛ばされていたので、「. h1」ではないのか、セレクター前に「. 」が付く場合と混同するな・・・と思っていました。このように分類を教わってすっきりしました。
③classセレクター
先述の要素型セレクターの記述は、classセレクターを使って以下のように書き換えることができます。
<h1 class="info">見出し</h1>
<p>説明文</p>.info {
color: skyblue;
}上のCSSにおける「. h1」の部分がclassセレクターです。HTMLでclass属性を使って名前を指定すると、名前を付けた特定の部分にだけスタイルを指定することができます。
スタイリングをするとき、要素型セレクターでもclassセレクターでもどちらを使ってもOKです。ただ要素型セレクターだと、例えば途中でh1をh2に変えなければいけなくなったとき、HTMLだけでなくCSSの記述も変える必要があります。要素が多いと大変ですね。それに対してclassセレクターで指定しておけば、そのようなことがあっても手間がかかりません。また例えば<h1>だけでなく<p>にも同じ文字色を指定したいときでもHTMLに以下のように書き加えれば良いだけです。
<p class="info">説明文</p>つまり同じスタイルを適用したい部分には同じclass名を書き加えるだけ。言い換えればスタイルが1つ決まっていれば、どこにでも使い回すことができます。
なおclass属性は複数付けることもできます。複数付けたいときは以下のように半角空白を入れて記述します。
<h1 class="info title">見出し</h1>.info {
color: skyblue;
}
.title {
font-weight: normal;
}④idセレクター
<h1 id="title">見出し</h1>#title {
color: pink;
}上の「#title」の部分がidセレクターです。idセレクターには以下のようなルールがあります。
- 同じページ内で同じ値は使えない
- id属性には空白を含めてはいけない
例えばh1に対してid属性で「title」という名前を付けた場合、h2では「title」という名前を付けることができません。付けても反映はされエラーなどは出ませんが、意図した動作にならないことがあります。エラーが出ないからといって使い回すのはやめましょう。またid属性には空白を含められないことから、class属性のように値を複数指定することもできません。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール
⑤属性セレクターの種類
属性セレクターには以下のようにいくつか種類があります。
- 存在の有無 [ attr ]
- 値の完全一致 [ attr="value" ]
- 値の前方一致 [ attr^="value" ]
- 値の後方一致 [ attr$="value" ]
- 値の部分一致 [ attr*="value" ]
※attr：targetやhrefといった属性 value：値
⑥属性セレクター／存在の有無
「存在の有無」とはtargetやhrefといった属性が存在さえすればスタイルが適用されるものです。
<a href="https://dotinstall.com" target="_blank">ドットインストール1はこちら</a>
<a href="https://dotinstall.tokyo">ドットインストール2はこちら</a>
<a href="https://twitter.com/dotinstall">ドットインストールのツイッターはこちら</a>[target] {
font-weight: bold;
}上のような記述の場合、「target属性が含まれる文字列に対して太字のスタイル（font-weight: bold;）を適用する」という意味になります。つまり1つ目の「ドットインストール1はこちら」という文字列のみ太字のスタイルが適用されます。
⑦属性セレクター／値の完全一致
<a href="https://dotinstall.com" target="_blank">ドットインストール1はこちら</a>
<a href="https://dotinstall.tokyo">ドットインストール2はこちら</a>
<a href="https://twitter.com/dotinstall">ドットインストールのツイッターはこちら</a>[ href="https://dotinstall.tokyo"] {
font-weight: bold;
}上のような記述の場合、「href属性内の値がhttps://dotinstall.tokyoである部分に対して太字のスタイル（font-weight: bold;）を適用する」という意味になります。つまり2つ目の「ドットインストール2はこちら」という文字列のみ太字のスタイルが適用されます。
⑧属性セレクター／値の前方一致
<a href="https://dotinstall.com" target="_blank">ドットインストール1はこちら</a>
<a href="https://dotinstall.tokyo">ドットインストール2はこちら</a>
<a href="https://twitter.com/dotinstall">ドットインストールのツイッターはこちら</a>[ href^="https"] {
font-weight: bold;
}上のような記述の場合、「href属性内の値の前方がhttpsである部分に対して太字のスタイル（font-weight: bold;）を適用する」という意味になります。つまり1〜3つ目全ての文字列に太字のスタイルが適用されます。
⑨属性セレクター／値の後方一致
<a href="https://dotinstall.com" target="_blank">ドットインストール1はこちら</a>
<a href="https://dotinstall.tokyo">ドットインストール2はこちら</a>
<a href="https://twitter.com/dotinstall">ドットインストールのツイッターはこちら</a>[ href$="dotinstall"] {
font-weight: bold;
}上のような記述の場合、「href属性内の値の後方がdotinstallである部分に対して太字のスタイル（font-weight: bold;）を適用する」という意味になります。つまり3つ目の「ドットインストールのツイッターはこちら」という文字列にのみ太字のスタイルが適用されます。
⑩属性セレクター／値の部分一致
<a href="https://dotinstall.com" target="_blank">ドットインストール1はこちら</a>
<a href="https://dotinstall.tokyo">ドットインストール2はこちら</a>
<a href="https://twitter.com/dotinstall">ドットインストールのツイッターはこちら</a>[href* ="com] {
font-weight: bold;
}上のような記述の場合、「href属性内にcomが含まれている部分に対して太字のスタイル（font-weight: bold;）を適用する」という意味になります。つまり1つ目の「ドットインストール1はこちら」と3つ目の「ドットインストールのツイッターはこちら」という文字列に太字のスタイルが適用されます。
⑪全称セレクター
全称セレクターは、以下のように記述することで全ての要素にスタイルを適用することができるものです。
* {
font-size: 12px;
}上のように記述すると、h1やh2、pなどに関係無くサイト内全ての文字サイズが12pxで表示されます。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール
【プログラミング独学15日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
idセレクターを使わず全部classセレクターじゃだめなの？
idセレクターにはいくつかルールがあり使いづらいので、汎用性の高いclassセレクターで全部作っちゃえば良くない？と思いました。これに対する先生に回答は、「CSSスタイリングではclassセレクター中心でOK」とのこと。すでにid属性が付いた要素をサクッとスタイリングするにはidセレクターが有用ですが、柔軟なスタイリングにはやはりclassセレクターが向いているとのことでした。
むしろclassセレクターだけでスタイリングすることは可能であり、企業や案件によってはid属性の使用を禁止するプロジェクトもあるようです。ただid属性は不必要なものではなく、スタイリングの他にページ内リンクの移動先指定などには用いられ、さまざまな用途があります。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール