CSSの基本
この記事ではCSSの基本について説明します。
CSSのセレクタや結合子、優先順位について学べます。
YouTube Video
プレビュー用のHTML/CSS
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>基本構文
1selector {
2 property: value;
3}このようにCSSの基本構造は、selector、property、valueから構成されます。各プロパティと値のペアの後にはセミコロンを付けます。
selectorは、どのHTML要素にスタイルを適用するかを指定します。この例では、全ての<header>要素に対してスタイルが適用されます。propertyは、変更するスタイルのプロパティ（例：色やフォントサイズ）を指定します。この例では、paddingやcolorがプロパティになります。valueは、プロパティに指定する値になります。例えば、色ならwhiteや#9cf、余白サイズなら20pxなどになります。
セレクタ
CSSセレクタは、HTML要素を選択するためのパターンです。セレクタを使うことで、特定の要素やグループの要素にスタイルを適用することができます。
全体セレクタ
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*は全ての要素に適用される全体セレクタになります。- この例では、すべての要素のフォントが変更されます。
要素セレクタ
1/* Element Selector */
2strong {
3 color: red;
4}- 要素セレクタは、HTMLタグ名を記述することで特定のHTMLタグに適用されるセレクタです。
- この例では、
<strong>要素の文字色が赤に変更されます。
IDセレクタ
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#は、IDを選択するIDセレクタになります。- IDは一意であるため、1つのページ内で同じIDを持つ要素は1つだけです。
クラスセレクタ
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.は、クラスを選択するクラスセレクタになります。- HTML要素にclass属性を追加して、そのクラスに属する要素にスタイルを適用します。
属性セレクタ
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]は、特定の属性を持つ要素を選択する属性セレクタになります。- この例では、
href属性の値がindex.htmlである<a>要素の文字が、太字になります。
結合子
結合子は、複数のセレクタを組み合わせて、特定の関係にある要素を選択するために使用されます。セレクタが要素を単独で選択するのに対し、結合子は要素間の構造的な関係を定義する役割を果たします。
子孫結合子
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- 子孫結合子は、特定の要素内にあるすべての指定された要素にスタイルを適用します。
- この例では、
<span>要素の中にある<strong>要素に下線が引かれます。
子結合子
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}spanとemの間にある>記号は子結合子として使用されています。この例では、<span>要素の直接的な子要素である<em>要素にだけスタイルが適用されます。3行目の例では、<span>タグと<em>タグの間に<s>タグがあるため、スタイルは適用されません。
直後兄弟結合子
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}+記号を利用する直後兄弟結合子は、ある要素の直後に現れる兄弟要素にスタイルを適用します。- この例では、
<br>タグの直後に<b>タグが現れる場合のみ、文字色が緑色になります。
後続兄弟結合子
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}~記号を利用する後続兄弟結合子は、ある要素の後に出現するすべての兄弟要素を選択するための結合子です。- この例では、
<br>タグの後に現れる全ての<b>タグの文字色が青系の色になります。
擬似クラス
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:を用いることによって、擬似クラスを選択することができます。- 擬似クラスについては別の記事にて詳細を説明します。
擬似要素
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::を用いることによって、擬似要素を選択することができます。- 擬似要素についても別の記事にて詳細を説明します。
CSSの優先順位
CSSにおける優先順位は、CSSの動作を理解し、予期しないスタイルの適用を防ぐために非常に重要です。CSSの優先順位は、同じ要素に複数のCSSルールが適用された場合に、どのルールが最も強力であるかを決定するものです。CSSの優先順位は主に以下の要素で決まります。
- インラインスタイル ： HTML内に直接書かれたスタイル
- IDセレクタ ：
#id - クラス、属性セレクタ、疑似クラス ：
.class,[attribute=value],:hover, etc - 要素セレクタ ：
div,h1,p, etc - 全セレクタ ：
*
上に行くほど優先順位が高く、下に行くほど低くなります。
優先順位の計算方法
CSSの優先順位は、各セレクタが持つ「重み」を数値化することにより計算されます。それぞれのセレクタの重みは次のように表されます。
- インラインスタイル: インラインスタイルは最も強力で、常に優先されます。
- IDセレクタ: 1つのIDセレクタは「100点」に相当します。
- クラス、属性セレクタ、疑似クラス: これらは「10点」に相当します。
- 要素セレクタ、疑似要素: これらは「1点」に相当します。
最もスコアが高いルールが適用されます。
例：
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>ここでは、<h1>タグには3つの異なるスタイルが適用されます：
h1要素セレクタ（1点）.headerクラスセレクタ（10点）#headerIDセレクタ（100点）
この場合、IDセレクタが最も高い優先順位を持つため、color: blueが適用されます。
!importantによる優先順位の上書き
通常の優先順位を無視して強制的にスタイルを適用したい場合、!importantを使用します。!importantはすべてのルールに対して最も強力な影響力を持ち、他のすべてのルールを上書きします。
例：
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- ここでは、
color: red !important;が指定されているため、color: redが優先されます。
継承と優先順位
CSSには、親要素から子要素へスタイルを継承する機能があります。たとえば、colorやfont-familyなどのプロパティは、デフォルトで継承されます。ただし、特定の子要素に直接スタイルを指定した場合、継承されたスタイルよりもその子要素に直接適用されたスタイルが優先されます。
例：
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- ここでは、
footerタグにcolor: gray;が適用されますが、p要素にはcolor: black;が明示的に指定されているため、p要素のテキストは黒く表示されます。一方、span要素はfooterからcolorプロパティを継承し、グレーで表示されます。
CSSのカスケード（Cascade）と優先順位
CSSの「Cascading Style Sheets（カスケーディングスタイルシート）」という名前が示すように、スタイルは「カスケード」します。これは、複数のスタイルシートやルールがある場合、最後に定義されたものが優先されるという意味です。優先順位が同じ場合、後に書かれたスタイルが適用されます。
例：
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- ここでは、
color: blue;が後に定義されているため、テキストは青色で表示されます。
まとめ
CSSの優先順位は、詳細度 (Specificity) などのアルゴリズムを用いて決定されますが、ここでは基本的な部分のみを考えてきました。
基本的なルールは以下の通りです：
- インラインスタイルは常に最優先です。
- IDセレクタは強力であり、クラスやタグよりも優先されます。
- クラスセレクタや疑似クラスは中程度の優先順位を持ちます。
- タグセレクタや疑似要素は最も低い優先順位を持ちます。
- !importantは通常の優先順位を無視して強制的にスタイルを適用します。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。