【プログラミング独学16日目】セレクターの組み合わせ・擬似要素

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学16日目】学んだこと

今日もCSSの続きをやりました。今日はあまり時間が取れませんでした。今日は初めてレッスンで「？？？」となりました。擬似要素の部分です。ひとまずアウトプットしていきます。

①セレクターの組み合わせ／a , b

昨日セレクターにはさまざまな種類があることを学びましたが、それらは組み合わせて使用することもできます。このとき2つのセレクターの間に記号を使うことで組み合わせに意味を持たせることができます。

セレクターaとセレクターbがあったとき、「a , b」と記述するとセレクターaとセレクターbの要素にスタイルを適用することができます。

<main>
　<h1 class="ttl info">Title<h1>
　<p>Hello</p>
　<section>
　　<h1 class="ttl">Title</h1>
　　　<p>Hello</p>
　　　<p>Hello</p>
　　　<p>Hello</p>
　</section>
</main>
.info , p {
　color : orange ;
}

上のように記述すると、「.info」と「p」の部分の文字色がオレンジになります。つまり以下の部分です。

<h1 class="ttl info">Title<h1>

<p>Hello</p>

<p>Hello</p>

<p>Hello</p>

なおコンマで区切れば「a , b , c , d」など何個でも指定することができます。

②セレクターの組み合わせ／ab

セレクターaとセレクターbがあったとき、「ab」と記述すると、セレクターaとセレクターbの両方を満たす要素にスタイルを適用することができます。

<main>
　<h1 class="ttl info">Title<h1>
　<p>Hello</p>
　<section>
　　<h1 class="ttl">Title</h1>
　　　<p>Hello</p>
　　　<p>Hello</p>
　　　<p>Hello</p>
　</section>
</main>
h1.info {
　color : orange ;
}

上のように記述すると、「h1」かつ「.info」である部分の文字色がオレンジになります。つまり以下の部分です。

<h1 class="ttl info">Title<h1>

なお「h1h2」など、要素型セレクターを続けて書くことはできないため注意が必要です。

③セレクターの組み合わせ／a > b

セレクターaとセレクターbがあったとき、「a > b」と記述すると、セレクターaの直下の階層にあるセレクターbにスタイルを適用する、という意味になります。

<main>
　<h1 class="ttl info">Title<h1>
　<p>Hello</p>
　<section>
　　<h1 class="ttl">Title</h1>
　　　<p>Hello</p>
　　　<p>Hello</p>
　　　<p>Hello</p>
　</section>
</main>
main > h1 {
　color : orange ;
}

上のように記述すると、「main」の直下の階層にある「h1」の部分の文字色がオレンジになります。つまり以下の部分です。

<h1 class="ttl info">Title<h1>

下記はh1ですがmainの直下ではないため、スタイルが適用されません。

<h1 class="ttl">Title</h1>

④セレクターの組み合わせ／a  b

セレクターaとセレクターbがあったとき、「a b」と記述するとセレクターaの下にあるセレクターbにスタイルを適用することができます。セレクターaの直下などといった指定はなく、単純にセレクターaより下の階層にあるセレクターbであればスタイルが適用されます、

<main>
　<h1 class="ttl info">Title<h1>
　<p>Hello</p>
　<section>
　　<h1 class="ttl">Title</h1>
　　　<p>Hello</p>
　　　<p>Hello</p>
　　　<p>Hello</p>
　</section>
</main>
main h1 {
　color : orange ;
}

上のように記述すると、「main」の下の階層にある「h1」の部分全ての文字色がオレンジになります。つまり以下の部分です。

<h1 class="ttl info">Title<h1>

<h1 class="ttl">Title</h1>

⑤セレクターの組み合わせ／a + b

セレクターaとセレクターbがあったとき、「a + b」と記述するとセレクターaの直後にあるセレクターbにスタイルを適用することができます。

<main>
　<h1 class="ttl info">Title<h1>
　<p>Hello</p>
　<section>
　　<h1 class="ttl">Title</h1>
　　　<p>Hello</p>
　　　<p>Hello</p>
　　　<p>Hello</p>
　</section>
</main>

例えば以下の3つのテキストの間に境界線を入れたかったとしましょう。

<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

border-bottomやborder-topをそのままp { で使うと、3本の線が引かれてしまい1本ずつ余計ですね。このようなときにp + pを使うと上手く境界線を引くことができます。

p + p {
　border-top :10px solid blue ;
}

セレクターa + bの組み合わせは、隣接した要素の間に何らかのスタイルを差し込みたいときに便利です。なおa + bだけでなく、a + b + cなどと増やすこともできます。

⑥擬似要素

要素の特定の部分をスタイリングすることができるもので、よく使われるのは以下の2つです。

  • :: before
  • :: after

なお擬似要素を使用するには「content」プロパティの併用が必須で、content内でスタイルを指定します。

h1::before , h2::before {
　content : '-  ' ;
}

h1::after , h2::after {
　content : '  -';
}

上のように記述すると、h1とh2それぞれが「-  見出し1 -」「-  見出し2 -」といったように表示されます。

⑦content属性の値を要素によって変えたい場合

content属性の値を要素によって変えたい場合、1つ1つ指定し直しても良いですが、「deta-」を使えば独自の属性を作ることができます。

<h1 data-subtitle=". -main title">見出し1</h1>
h1:: after , h2:: after {
　content : attr(data-subtitle) ;
}

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

【プログラミング独学16日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

  • p+pで適用される範囲
  • 擬似要素content内は「" "」でなく「' '」？
  • data-subtitle？？？

p+pで適用される範囲

（準備中）

擬似要素content内は「" "」でなく「' '」？

擬似要素content内の指定方法は、今までと同様「" "」でもOKです。ただGoogleではHTML内での記載を「" "」、CSS内での記載を「' '」と推奨しているようです。そのためドットインストールでもそのようにしており、どちらでも良いが、大手企業のガイドラインなどを参考にすると良いとのことでした。

面倒だし、なるべく疑問や覚えることを増やしたくないので全部「" "」にしようと思いましたが、Googleがそのように推奨しているなら使い分ける癖を付けていこうかなと思います。

data-subtitle？？？

今までのレッスンで一番？？？となった部分でした。data-を使わなくても、他の方も言っているように

<h1>事業内容<span>-services-</span></h1>

とかで良くない？と思いました。ただ結論から言うと、HTMLとCSSの役割を考えるとあまり良くないということでした。HTMLはページの構造を作るためのもので、それをスタイリングしたり装飾したりするために使うのがCSSだからです。擬似要素のこの部分は難しいですが、上手く使うことでより複雑なスタイリングができるようになるとのことでした。

なおドットインストールのQ&Aが一番よくわかったのでリンクを貼っておきます。先生がさらに詳しく解説してくれたページです。

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

FREELANCE,WORDPRESS/WEB

Posted by miho