CSS

知っておくと便利なセレクタまとめ

Sponsored Link

Sponsored Link

セレクタについてはその基本を以下の記事にまとめてありますが。

復習の意味もあって重複するものも含めて便利なセレクタについて解説をしていきます。

セレクタ、プロパティ、値って何?と言われれば基本は非常にシンプルです。
上記記事の最初の部分を引用しておきます。

基本は一つだけで。

セレクタ {

プロパティ:値

}

で記述していきます。

セレクタのあとに波括弧を置き。その中にプロパティと値を入れます。

プロパティと値の間にはコロンを入れます。

「セレクタ」はCSSを適用する場所のことで。
例えばセレクタにbodyと指定してあれば<body>タグの中全部を装飾します、という意味ですし。
<body>タグ内にある<span>タグとか。<P>タグなどを装飾する場合にはspanとかpなどをセレクタに指定します。
するとそのタグ内が指定された「プロパティ:値」によって装飾されます。 「プロパティ」は「何を」装飾するのかを指定するもので。
値は「どの様に」変えるかを指定します。

このようにとりあえずはシンプルではありますが。
セレクタを理解するにはその前提として。
要素と子要素についてしっかりと理解をしておく必要があります。

まず要素とは開始タグ〜終了タグまでのかたまりを言います。

例えば<p>~</p>で1つの要素です。

この要素の中にさらに要素が入る場合元の要素を親要素といい。
親要素の中に入り込んだ要素のことを子要素といいます。

<div>
<p>~</p>
</div>

となっていた場合、pタグはdivタグの小要素といい

divタグはpタグの親要素といいます。

セレクタの書き方様々

以下のHTMLを使ってセレクタについて説明をしていきたいと思います。

 <div class="test1">
   <h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  </div> 

  <div id="test2">
  	<h2>インコの種類</h2>
  	<p>
  		インコには沢山の種類がありますが、一番お手軽なのは<span>セキセイインコ</span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </div>

ブラウザ表示は以下



タグで指定

上記例で、例えばCSSでpタグをセレクタに指定し色を赤に変えたとします。

p{
  color: red;
}

するとpタグで囲まれた部分だけが赤になります。

ブラウザ表示



クラス名で指定

CSSでクラス名で指定する場合には

.ピリオド+class名

を使います。
例えばクラス名で指定したdiv部分に背景を水色に指定した場合
HTMLで目印を付けておいたクラス名で.class名{}を使って記述をしていきます。

.test1{
background: skyblue;
}

p{
  color: red;
}
.test1{
  background: skyblue;
}

ブラウザ表示は以下



id名で指定

CSSでid名で指定する場合には
#(ハッシュ)+id名

を使います。

id名で指定したdivタグで囲まれた部分の背景を銀色にしてみます。

#test2{
background:silver;
}

を加えます。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

ブラウザ表示は以下。



セレクタを複数指定

セレクタを複数指定することもできます。

その場合セレクタを,(コンマ)で区切っていきます。
例えばh1とh2両方の文字の色を金色に変えたいというような場合は

h1,h2{
color: gold;
}

と記述します。
もちろんクラス名やid名、他のタグ名でも複数指定できます。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

h1,h2{
  color: gold;
}

ブラウザ表示



セレクタを絞り込み指定

〇〇要素の中にある△△要素だけを指定したいというときには
セレクタ部分を

〇〇半角スペース△△{}

のように記述をしていきます。

このようにして絞り込まれたセレクタのことを子孫セレクタといいます。

例えばid名をtest2とつけたdivタグの中にあるspanタグを指定して色を緑、文字の大きさを二倍にしたいという場合。

#test2 span{
color: green ;
font-size: 2em;

}

と記述をします。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

h1,h2{
  color: gold;
}
#test2 span{
  color: green ;
  font-size: 2em;

}

今まですべてのCSSによるデザイン変更で以下のようになりました。



以上が基本的なセレクタの使い方ですが。
しかしセレクタは奥が深くて他にも様々なものがあって。
それらを知っておくことでデザインの自由度が高まります。
そんなセレクタの一部をまとめてみます。

知っていると役に立つセレクタ

全ての要素に対してスタイルを適用させたい場合に使うセレクタ

*(アスタリクス)

をセレクタに使うとそこで指定したデザインすべての要素に適用されます。
試しに全体の要素に対して枠をかけてみます。

先程のHTMLの記述をそのままにし。

 <div class="test1">
   <h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  </div> 

  <div id="test2">
  	<h2>インコの種類</h2>
  	<p>
  		インコには沢山の種類がありますが、一番お手軽なのは<span class=test3>セキセイインコ</span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </div>

CSSに以下の記述を加えます。


*{
border:dashed 3px red;
}

すべての要素に赤い破線の枠をつけるよう指定してあります。

*{
  border:dashed 3px red;
}

p{ 
  color: red; 
  }
.test1{ 
    background: skyblue; 
   } 
 #test2{
     background:silver; 
   }
 h1,h2{ 
        color: gold;
      }
  #test2 span{
         color: green ; font-size: 2em; 
      }

デザイン的にはかっこ悪いんですが、ブラウザ表示は以下のようになります。




すべての要素が赤い破線に囲まれています。

ある要素部分の全体に適用する場合

例えばpタグのデザインにだけ同じデザインを適用したいというような場合。
p *{}

pタグに限らず、指定したいタグやclass,idなどを前につけた上でその後に半角スペースと*(アスタリクス)を加えると
その部分のみのデザインを変えることができます。

先程のCSSで*(アスタリクスの前に最初のdivタグのクラス名を指定してみます。
そして以下のような記述を付け加えます。
.test1 *{
border:dashed 3px red;
}

背景を赤い破線の枠で囲む、と指定します。
ブラウザ表示



すると背景が青い部分の要素全てに枠がかかります。
一々要素ごとに指定しなくてもよいのでとても便利です^^;

子要素にのみ適用するセレクタ

要素の中からさらに子要素だけをデザインを指定しようとする場合。

親要素>小要素{}

という形でセレクタを設定します。

例えば先程の記述を変更してdivタグのうちclass名をtest1としたものの中にある子要素pだけデザインの変更をしたいという場合。

.test1 > p{
border:dashed 3px red;
}

と記述をすると

p{ 
  color: red; 
  }
.test1{ 
    background: skyblue; 
     } 
 #test2{
     background:silver; 
   }
 h1,h2{ 
        color: gold;
      }
   #test2 span {
         color: green ; font-size: 2em; 
      }
 .test1  > p{
  border:dashed 3px red;
}

ブラウザ表示は以下。



同じ階層のすぐ後や後ろ全部の要素に装飾が適用されるようにするセレクタ

セレクタの次に+や~をつけることによって指定したセレクタの前や後の要素のみに装飾をすることができます。
使用例を書いてみます。

<p>これは前</p>
    <p class="center">ここが基準</p>
    <p>これは後ろ</p>
    <p>これは更に後ろ</p>

これは前

ここが基準

これは後ろ

これは更に後ろ

その上でCSSをいじってみます。
まず真ん中のClassを使ってそのすぐ後ろのセンテンスの文字を赤くしてみます。
classで目印を付けたその名前に+を付けて下のpタグ要素を装飾します。

.class名 + 下のタグ名{}とします。

.center + p{
  color: red;
}

するとブラウザ表示は以下のようになります。



次に~を付けて目印を付けた要素の下をすべて装飾します。

.class名 ~ 下のタグ名{}とします。

.center~p{
  color: red;
}

すると以下のようにpタグの要素はすべて赤色なります。



何番目を装飾するかを指定する疑似要素を加えたセレクタ

表やリストに装飾を加える場合、何番目かを指定することができるととても便利です。
擬似クラスを使うことでそれができます。

例えば一例として以下を作ります。

  • 一番目です
  • 二番目です
  • 三番目です
  • 四番目です
  • 五番目です。

これにCSSでアンダーラインをつけてみます。

ul li{
  border-bottom: solid 2px black;
  }

すると以下のようになります。



最初や最後だけ装飾を変えるセレクタ

まず一番最後だけを指定する場合はセレクタを
◯:last-child {}
とします。
擬似クラスは last-child

CSSに変更を加え、一番下だけアンダーラインを破線にし、その色を赤にし、少し太くしてみます。

ul li{
  border-bottom: solid 2px black;

}
ul li:last-child{
  border-bottom: dashed 5px red;
}

すると以下のようになります。



更に最初のアンダーラインを緑色にして少し太くしたいなどという場合。

一番最後だけを指定する場合はセレクタを
◯:first-child {}
とします。
擬似クラスは first-child

CSSに以下の記述を加えます。

ul li:first-child{
  border-bottom: solid 5px green;
}

すると以下のようにブラウザ表示されます。



偶数・奇数・nの倍数ごとに装飾を変えるセレクタ

偶数・奇数ごとに装飾を変える事もできます。

偶数番目を指定する場合はセレクタを
◯: nth-child(even){ }
とします。
擬似クラスは nth-child(odd)

奇数番目を指定する場合は セレクタを
◯: nth-child(odd){ }
とします。
擬似クラスは nth-child(even)

それではまずCSSに変更を加えてリストの偶数ごとに背景色を水色に変えてみます。

ul li:nth-child(odd){
  background-color: skyblue;
}

すると以下のようにブラウザ表示されます。



次に更にCSSに変更を加えて奇数番目のリストの背景色を灰色にしてみます。

ul li:nth-child(odd){
  background-color: skyblue;
}

ul li:nth-child(even){
  background-color: grey;
}

すると以下のようにブラウザ表示されます。



nの倍数番目を指定して装飾をする場合もあるかと思います。

nの倍数を指定する場合は セレクタを
◯: nth-child(△n){ }
とします。
擬似クラスは nth-child(△n)

仮に3の倍数を指定した場合、先程のHTMLでは3番目だけが装飾されます。
3番目だけを赤い枠で囲んでみましょう

それを加えた全体のCSSは以下。


ul li:nth-child(odd){
  background-color: skyblue;
}

ul li:nth-child(even){
  background-color: grey;
}
ul li:nth-child(3n){
  border:solid 4px red;
  border:solid 4px red;
}

以下のようにブラウザ表示されます。



まとめ

セレクタの使い方についていくつかの例を書いてみました。
セレクタについて知識が増えるとデザインの幅が広がります。

今回はここまで。


Sponsored Link

Sponsored Link

関連記事

  1. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  2. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  3. CSS positionの使い方
  4. HTML・CSSを実際に記事を作りながら覚えていこう
  5. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  6. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  7. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  8. CSS 擬似要素beforeとafter 使い方基本

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  2. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. WordPress新エディタ「Gutenberg」の使い方
  5. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  6. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  7. WordPressのフォルダ構成とバックアップの仕方
  8. Windows10 でフォルダの拡張子を表示するには?

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク

ソフト・アプリの使い方

PAGE TOP