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

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

CSS CSSの基本と応用って?セレクタ・プロパティ・値を知るとCSSが効率的になる!CSSの適応の仕方を全て教えます。
交互に見ながら作業をするのは意外と面倒です。モバイルで見ながら、パソコンで操作できるようにこのページのQRコードを張っています。QRリーダーで読み込んで活用してください。モバイル用URL QRコード

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は上記のように記述していきます。

HTMLに対応するCSSを作成して、それぞれの要素に対して装飾をしていきますが、それぞれに名前がありますので以下の画像で確認してください。

htmlの要素・CSSのセレクタ・プロパティ・値の説明画像

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

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

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

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

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

タグ名

CSSでタグを適用すると、そのすべてのタグのスタイルが変更します。

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

タグ名をそのまま書くと、サイト内の同一タグ全てのスタイルを変更することができます。

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

id名

CSSでidを適用すると、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名を付けた場合、CSSには”.+class名”となりclass名の前にドットを付けてセレクタを指定します。

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

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

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

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

ドットで分けてセレクタを複数指定すると同じCSSを適用できます。

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

サイトを作っていくと、同じCSSなるけど要素的に同一classやidが付けられない場合があります。

そんな時にそれぞれのセレクタでCSSを作るのではなく、“,”で区切って各セレクタを指定することで1つのCSSで処理することができます。

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

半角スペースで区切って並べることで絞り込んでCSSの適用ができます。

セレクタを半角スペースで区切ることで、親要素に囲まれた子要素やその下の孫要素だけにCSSを適用させられるようになります。

それぞれのタグにclass名をつけるのもいいのですが、親要素のあるimgタグなどにつけているとCSSファイルの中がぐちゃぐちゃになります。

また、以下のような時にも効果的に利用ができますので、是非活用してください。

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

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

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

:nth-child(odd)を利用して奇数行のみにCSSを適用させてスタイルを変更させる

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

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

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

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

:nth-child(even)を利用して偶数行のみにCSSを適用させてスタイルを変更させる

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

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

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

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

:nth-child(n)を利用してn番目のみにCSSを適用させてスタイルを変更させる

○: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のセレクタは他にもありますが、正直他はあまり使い勝手はよくありません。

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

1つの効果を得るための書き方は複数あります。

極端な例をあげますが、

.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;
}

上記は同じ結果ですが書き方が変わります。

実際は簡単な要素とCSSだけで構成することの方がほとんどです。

必ずしも複雑なCSSを使う必要はありませんが、知っていると臨機応変に対応できますので、覚えておいて損はありません。

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