CSSの基本と応用って?セレクタ・プロパティ・値を知るとCSSが効率的になる!CSSの適応の仕方を全て教えます。

  • 2019年2月9日
  • 2020年5月15日
  • CSS
CSS CSSの基本と応用って?セレクタ・プロパティ・値を知るとCSSが効率的になる!CSSの適応の仕方を全て教えます。

CSSは基本的な書き方がありますが、より効率的な書き方があります。

効率的な書き方ができると、ファイルも軽くなりますし、CSSファイルの記述も整理できますので、是非覚えてください。

CSSの為の基本的な知識

CSSは記述したHTMLに対して装飾を行うものです。

多少強引なHTMLですが以下は例です。

 

HTML<div id="main-content">
<h1>CSSの基本構文</h1>
<p>CSSのことを良く知ろう</p>
<div id="content-box">
<p>CSSはもっと<span class="weight">簡単に</span>できます。</p>
</div>
</div>
CSSh1{
font-color:#ff0000;
}
#content-box{
border:2px solid #000000;
}
.color{
font-weight:bold;
}

 

「どの要素のレイアウトを変更するか?」

変更したいか箇所に対応するHTMLに対してCSSを作成します。

 

CSSは広範囲でも局所的でも指定した要素に対して装飾ができます。

これから説明するのに必要な各要素などの名前は以下の画像に書いてますので、これから説明する内容に役立ててください。

 

CSSとHTMLの各要素の説明

 

HTMLのタグとは、h・div・a・imgなどのことを指し、このタグにはidやclassを付けられ、それぞれに名前が付けられます。

そして、このタグに囲まれたまとまりを”要素”といいます。

 

CSSはセレクタ・プロパティ・値という3つで構成されていますが、簡単に説明するとセレクタは、タブ・id名・class名を付けられ、スタイルを変更する要素を指定する役割を持ちます。

プロパティでどのようなスタイルを適応させるかを指定し、値でそのスタイルを具体的にどのように作用させるかというものです。

 

基本的なセレクタの使用例

 

タグ名を指定して装飾する

 

CSSのタグの指定の仕様例

 

CSS例h1{color:#ffffff; border:2px bold #000000;}
p{font-size:18px;}

 

タグ名(例:hタグ、p、div、a・・・など)をそのまま書くと、サイト内の同一タグ全てのスタイルを変更することができます。

例えば、h1のような見出し要素に適用すれば、h1タグを付けるだけで、サイト全体のh1のスタイルを変えることができます。

id名を指定して装飾する

 

CSSのid指定の使用例

 

CSS例#content-box{color:#ffffff; border:2px bold #000000;}
#main{font-size:18px;}

 

id名を付けた場合、CSSで指定する場合はid名の前にシャープを付けて「#id名」でセレクタを指定します。

id名を付けた要素内のみにスタイルが反映されます。

 

ちなみに、idは1ページに1つしか付けられないので、メインのコンテンツやページ内で大きな要素となるところでの利用が好ましいです。

 

class名を指定して装飾する

 

CSSのclass指定の使用例

 

class名を付けた場合、class名の前にコンマ(ドット)を付けて、「.class名”」でセレクタを指定します。

class名を付けた要素内のみにスタイルが反映されます。

 

クラスはidと異なり、1ページに同じ名前を何個おいても大丈夫です。

テキストの装飾など、複数個所に同じレイアウトスタイルを付ける場合などに使います。

 

idタグとclassタグのどちらを使うというのは、決まりはありませんがclassタグを使うことが多いです。

 

基本的な使い方の中の応用編

 

セレクタをカンマ区って同じCSSを纏めて適用する

 

CSSで複数のタグやclassやidを指定して同じ装飾をする方法

 

idやclassはその要素の名前のようなものです。

サイトを作っていくと、CSSの内容が同じになるけど、管理の上で別のclassやidを付けた方が良い場合があります。

 

ただ、同じ内容をいくつも書くのは、記述としてもゴチャゴチャになりますし、あまり好ましいことではありません。

そのような時は、それぞれのセレクタでCSSを作るのではなく、”,(コロン)”で区切って各セレクタを指定することで1つのCSSで処理することができます。

要素を絞り込んで明確に特定の要素にCSSを適用する

 

CSSで親要素・子要素・孫要素を細かく指定して装飾を変更する

 

セレクタを半角スペースで区切ることで、親要素に囲まれた子要素、その下の孫要素に限定的な範囲でレイアウトを指定できるようになります。

 

HTML例<div id="main-content">
<h1>CSSの基本構文</h1>
<p>CSSのことを良く知ろう</p>
<div id="content-box">
<p>CSSはもっと<b>簡単に</b>できます。</p>
</div>
</div>
CSS例
#main-content p b{ border-bottom:2px solid #000000; }

 

例えば上記の例でbタグの範囲に下線を引きたい場合、bタグにclassタグというのはあまり現実的ではありません。

このやり方で、要素の中の限定的なタグだけの場所にも、レイアウトを施すことができます。

CSSをよりすっきりと記述するため便利なセレクタ

 

表やリストの奇数行にだけスタイルを変更する

 

CSSで子要素の奇数行だけレイアウト変更する方法

 

○:nth-child(odd){ CSSを記述 }で奇数行のみに、CSSのスタイルを適用させることができます。

奇数列だけに1行1行にclassタグを入れても可能ですが、HTMLもCSSも管理しづらくなります。

○にはセレクタを入れますが、リスト形式で”ul li”で活用することが多いセレクタです。

表やリストの偶数行にだけスタイルを変更する

 

CSSで子要素の偶数行だけレイアウト変更する方法

 

○:nth-child(even){ CSSを記述 }で偶数行のみに、CSSのスタイルを適用させることができます。

○:nth-child(odd){ CSSを記述 }と同様に偶数列だけに1行1行にclassタグを入れても可能ですが、HTMLもCSSも管理しづらくなります。

〇にはセレクタを入れ、リスト形式で”ul li”で活用することが多いセレクタです。

特定のn番目だけのスタイルを変更する

 

CSSで子要素のn行だけレイアウト変更する方法

 

○:nth-child(n){ CSSを記述 }でn行目のみに、CSSのスタイルを適用させることができます。

()内には整数のみの入力も可能ですが、nを使った数式を入れることもできます。

 

()内の入力例(3)・・・・3番目のみのスタイルを変更する
(3n)・・・3の倍数番目のスタイルを変更する
(3n+1)・・4、7、10、13、16…番目のスタイルを変更する

 

奇数や偶数というレイアウトでない場合、非常に役に立ちます。

 

その他のセレクタ

個人としてはあまり使いませんが、知ってると便利なセレクタを簡単に解説していきます。

サイト全部の要素のスタイルを一気に変える。

 

HTML例<div id="main-content">
<h1>CSSの基本構文</h1>
<p>CSSのことを良く知ろう</p>
<div id="content-box">
<p>CSSはもっと<span class="weight">簡単に</span>できます。</p>
</div>
</div>
CSS例*{
font-size:16px;
}

 

セレクタをアスタリスク(*)にすると、サイト内のすべての要素に記述したCSSのスタイルにすることができます。

例題のようにサイトのフォントサイズを指定するときなどに便利ですが、私はbodyで指定することが多いです。

サイト全部の要素のスタイルを一気に変える。

 

HTML例<div id="main-content">
<h1>CSSの基本構文</h1>
<p>CSSのことを良く知ろう</p>
<div id="content-box">
<p>CSSはもっと<span class="weight">簡単に</span>できます。</p>
<p>理想のサイトをめざしてください。</p>
</div>
</div>
CSS例*{
font-color:#000000;
}

まとめ

CSSのセレクタは他にもありますが、正直他はあまり使い勝手はよくありません。

できるからといって、なんでもかんでも使ってしまうと余計にゴチャゴチャになります。

 

また、CSSのレイアウト効果を出す記述は、同じ結果でも記述方法は異なります。

 

.ex{
border:2px solid #000000;
}
.ex{
border-top:2px solid #000000;
border-bottom:2px solid #000000;
border-right:2px solid #000000;
border-left:2px solid #000000;
}

 

「class名が”ex”の範囲の要素の周りを線で囲む」というレイアウトの結果は同じでも記述が変わります。

 

新しいことを覚えると新しい記述をやってみたくなります。

もちろん勉強のために記述していくことは良いことですが、最終的には、自分が管理しやすくシンプルな記述をすることを心掛けてくださいね。

 


【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)