CSSはWebページを装飾し、見た目を整えるプログラミング言語です。
今回はCSSの構成と書き方についてわかりやすく解説します！
ぜひ最後まで見ていってください！
CSSの基本構成について
CSSは3つの要素「セレクタ」、「プロパティ」、「値」で構成されています。
「プロパティ」と「値」は「セレクタ {}」で囲まれている必要があります。
「セレクタ」と「値」の間に「: (コロン)」、「値」の後に「; (セミコロン)」を入力しないとエラーになってしまうので、忘れず記入しましょう。
セレクタ {プロパティ : 値; }
「どの部分の(セレクタ)」「何を(プロパティ)」「どのように(値)」装飾するかを指定していきます。
セレクタ
セレクタとはどのHTMLタグにCSSを適用させるかを決定する要素です。
「body」タグや「img」タグなどの要素や、class名、id名も指定することができます。
「*(アスタリスク)」をセレクタとして使用すると、全てのセレクタが選択されます。
以下のように、カンマで区切ると複数のタグやclass、idに同じスタイルを適用することができます。
<h1>見出し</h1>
<div id="service">
<p>文章が入ります</p>
</div>
<ul>
<li class="list">犬</li>
<li class="list">猫</li>
<li class="list">うさぎ</li>
</ul>
h1, #service, .list
{
color: #ffffff;
}プロパティ
プロパティとは指定したセレクタに対して実行するCSSのスタイルのことです。
例えば、「font-size」を指定するとフォントサイズを設定できます。
一つのセレクタに対して、複数のプロパティを指定することが可能です。
値
値はセレクタに適用するプロパティをどのように調整するかを指定する要素です。
例えば、フォントサイズをプロパティで指定する際は「16px」など数値を記述します。
基本的なセレクタの種類
セレクタには様々な種類がありますが、今回は基本の「タイプセレクタ」、「classセレクタ」、「idセレクタ」で指定する方法について紹介します。
タイプセレクタ
タイプセレクタとは要素名を指定してCSSのスタイルを適用するセレクタです。
「要素型セレクタ」とも呼ばれています。
例えば以下のように見出しの色を変更したい場合、このように指定するとページ内の全ての<h1>タグに適用されます。
<h1>見出しが入ります</h1>
h1{
color: red;
}classセレクタ
classセレクタとは指定したclass属性にCSSスタイルを適用するセレクタです。
class名の前に「. (ドット)」を記述し、「.class名」という形で指定します。
以下の例のように同じ<p>タグが並んでいたとしても、class属性が指定されている<p>タグにのみスタイルが適用されます。
<p class="example">犬が走っています</p>
<p>猫が寝ています</p>
<p class="example">馬が走っています</p>
<p>牛が寝ています</p>
.example
{
font-size: 24px;
}idセレクタ
idセレクタとは指定したid属性にCSSスタイルを適用するセレクタです。
「# (シャープ)」をid名の前に記述し、「#id名」という形で指定します。
同じページ内に複数の同じid名を使用することはできないので注意しましょう。
以下の例のように<section>タグにid属性を付与し、CSSで背景色を設定すると指定したid属性を持つ<section>タグにのみCSSが適用されます。
<section id="description">
<h1>見出し</h1>
<p>文章が入ります</p>
</section>
#description{
background-color: red;
}セレクタの優先順位
基本的なセレクタの優先順位は以下です。
- !important
- インラインスタイル
- idセレクタ
- クラスセレクタ、疑似クラスセレクタ
- 要素セレクタ
- ユニバーサルセレクタ
より明示的なセレクタが優先されます。
もし、同じセレクタが記述された場合は、CSSスタイルシートの下に書くほど優先されます。
①!important
CSSの値に!importantを記述することで最も優先順位が高くなります。
p{
color: blue !important;
}②インラインスタイル
インラインスタイルとはHTMLに直接スタイルを記述する方法です。
要素・class・idセレクタよりも優先されます。
<p style="color: green">テキストが入ります</p>③idセレクタ
id要素を使用したセレクタはclassセレクタやタイプセレクタより優先順位が高くなります。
<p id="example">テキストが入ります</p>
#example {
color: green;
}④クラスセレクタ、疑似クラスセレクタ
クラスセレクタと疑似クラスセレクタは要素セレクタ、ユニバーサルセレクタより優先されます。
<p class="example">テキストが入ります</p>
<button>送信する</button>
.example {
color: green;
}
button:hover {
color: yellow;
}⑤要素セレクタ
ユニバーサルセレクタより優先されるセレクタになります。
以下の例の場合、<p>タグにスタイルを適用できます。
<p>テキストが入ります</p>
p{
color: green;
}⑥ユニバーサルセレクタ
「* (アスタリスク)」を使用するとページ全体にCSSを適用できますが、優先順位は最下位になります。
とりあえず初期情報としてスタイルを設定しておきたい場合に便利です。
*{
color: green;
}まとめ
今回はCSSの構成と書き方について解説しました。
いかがでしたでしょうか？
ルールに基づいて記述することでメンテナンスがしやすくなったり、SEO対策にもなります。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント