100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

10589 ワード
CSS 初心者 エンジニア CSS テキストリンク

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 14日目 - CSS - CSSの基礎1

CSSのセレクタ

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ(selector)はCSSを適応させる対象のことです。

どの部分のスタイルを変えるのかを指定するのには
まずセレクタの使い方を覚えないと
変なところが変更されてしまいレイアウト崩れが発生してしまうことがあるので
頑張って覚えていきましょう。

要素セレクタ

セレクタに要素名を使用すると
指定した全ての要素にスタイルが適用されます。

sample.css

/* 全ての h2 タグに適用 */
h2 {
  color: blue;
}

/* 全ての div タグに適用 */
div {
  color: red;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<div>divテキスト</div>
<p>pタグのテキスト</p>

全称セレクタ

セレクタに *（アスタリスク） を使用すると
その配下の全ての要素にスタイルが適用されます。

sample.css

/* div タグ内の全ての要素に適用 */
div * {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
  <h2>タイトル2</h2>
</div>
<p>pタグのテキスト</p>

idセレクタ

任意のidが付いている要素にスタイルが適用されます。
id名の前に#をつけることで指定できます。

sample.css

/* id名がotuの要素に適用 */
 #otu {
  background-color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p id="otu">pタグのテキスト</p>

classセレクタ

任意のクラスが付いている要素にスタイルが適用されます。
クラス名の前に.をつけることで指定できます。

sample.css

/* class名がopの要素に適用 */
.op {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p class="op">pタグのテキスト</p>

子孫セレクタ

半角スペースでセレクタを区切ると、指定した要素の中の要素にスタイルが適用されます。

sample.css

/* div タグ内の a タグに適用 */
div a {
  color: red;
}

sample.html

<div>
  <p>pテキスト</p>
  <a href="#">aテキスト</a>
</div>

子要素、孫要素にのみ適当させることができるなど
幅広い指定ができます。

子セレクタ

セレクタとセレクタを > で繋ぐことで、要素の直下の子要素のみにスタイルが適用されます。

sample.css

/* class名がotuのdivタグの直下のspanタグのみに適用 */
div.otu > span {
  color: blue;
}

sample.html

<div class="otu">
  <span>spanテキスト1</span>
  <p>
    <span>spanテキスト2</span>
  </p>
</div>
<div>
  <span>spanテキスト3</span>
</div>

特定の子要素にだけスタイルを適用できます。
全称セレクタとあわせると要素の中の全ての子要素にスタイルが適用されます。

/* p タグ内の全ての子要素に適用 */
p > * {
  color: blue;
}

隣接セレクタ

セレクタとセレクタを +で繋ぐことで
ある要素に隣接してる要素にスタイルが適用されます。

sample.css

/* h2 タグに隣接してる p タグに適用 */
h2 + p {
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<p>隣接1</p>
<p>隣接2</p>

関接セレクタ

セレクタとセレクタを ~で繋ぐことで、ある要素以降の兄弟要素にスタイルが適用されます。

sample.css

/* p タグ以降の span タグに適用 */
p ~ span{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<p>隣接1</p>
<h2>タイトル2</h2>
<p>隣接2</p>
<div>div1</div>
<span>span1</span>
<div><span>span2</span></div>

属性セレクタ

要素の後に [ ]で属性を指定すると
任意の属性を持つセレクタにスタイルが適用されます。

要素[属性名]

要素[属性名="値"]

属性値まで指定すると、その属性値のものだけに適応されます。

sample.css

/* target属性を持つ div タグに適用 */
div[target="window"]{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<div target="window">target1</div>
<div target="blank">target2</div>

link擬似クラス

セレクタの後に:linkをつけることで、未訪問のリンクにスタイルを適用することができます。
また、セレクタの後に :visitedをつけることで、訪問済みのリンクにスタイルを適用できます。

sample.css

/* 未訪問リンクに適用 */
a:link{
  color: red;
}
/* 訪問済みリンクに適用 */
a:visited{
  color: green;
}

sample.html

<a href="https://www.yahoo.co.jp/">link1</a>
<a href="https://www.google.co.jp/">link2</a>

その他の擬似クラス

hover擬似クラス

セレクタの後に:hoverをつけると、ある要素にマウスが乗っている間だけ
スタイルが適用されます。

a:hover{
  color: blue;
}

active擬似クラス

セレクタの後に:activeをつけると、ある要素をクリックしてから離すまでの間だけ
スタイルが適用されます。

input:active{
  color: blue;
}

focus擬似クラス

セレクタの後に:focusをつけると、 ある要素をフォーカスしている間だけ
スタイルが適用されます。

textarea:focus{
  background-color: blue;
}

first-child疑似クラス

セレクタの後に:first-childをつけると、 最初に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:first-child{
  color: green;
}

last-child疑似クラス

セレクタの後に:last-childをつけると、 最後に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:last-child{
  color: green;
}

nth-child疑似クラス

セレクタの後に:nth-child(n)をつけることで、
最初から数えて「n番目」に当たる子要素 にスタイルが適用されます。
偶数や奇数を指定して交互に色を変更する事もできます。

/* 3番目の li タグを赤くする */
ul li:nth-child(3){
  color: red;
}

まとめ

セレクタはかなりたくさんあり
スタイルをきちんと適応させるには押さえておく必要があります。
頑張って覚えておきましょう。

君がエンジニアになるまであと85日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython