1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: CSSとは何か？
slug: Learn/CSS/First_steps/What_is_CSS
tags:
- Beginner
- CSS
- Introduction to CSS
- Learn
- Modules
- Specifications
- Syntax
translation_of: Learn/CSS/First_steps/What_is_CSS
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets；カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか？この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>
<p>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p>
</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>CSS とは何かを学ぶ。</td>
</tr>
</tbody>
</table>
<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a> では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落はあたらしい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによるデフォルトのスタイリングです。ページの作者がスタイリングしていなくても読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。</p>
<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
<p>しかし、ウェブサイトみんながこのような見た目では退屈でしょう。CSS をつかうとブラウザー内で HTML 要素をどう見せるかはっきりと制御できるようになり、マークアップを好きなように表現できます。</p>
<h2 id="What_is_CSS_for" name="What_is_CSS_for">CSS の目的</h2>
<p>前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。</p>
<p><strong>文書</strong> は普通、マークアップ言語をつかって構造化されたテキストファイルです。{{Glossary("HTML")}} がもっとも一般的な マークアップ言語ですが、{{Glossary("SVG")}} や {{Glossary("XML")}}も出会うことがあります。</p>
<p>文書を <strong>表現する</strong> とは、それを使いやすいフォームに変換することを意味します。{{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, あるいは {{Glossary("Microsoft Edge","Edge")}} といった{{Glossary("ブラウザー","ブラウザー")}} はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。</p>
<div class="blockIndicator note">
<p><strong>注</strong>: ブラウザーは時に{{Glossary("User agent","user agent ユーザーエージェント")}} と呼ばれますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。</p>
</div>
<p>CSS は、例えば見出しやリンクの <a href="/ja/docs/Web/CSS/color_value">色</a> や <a href="/ja/docs/Web/CSS/font-size">フォントサイズ</a>の変更といったごく基本的なテキストのスタイリングでもつかえます。例えば、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">一列のテキストをレイアウトして</a>メインコンテンツ領域と関連情報のためのサイドバーに分けるといった、レイアウト作成に使うこともできます。<a href="/ja/docs/Web/CSS/CSS_Animations">アニメーション</a>のような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。</p>
<h2 id="CSS_syntax" name="CSS_syntax">CSS の構文</h2>
<p>CSS はルールベースの言語です。ウェブページ上の特定の要素かグループに適用するスタイリングのルールを定義します。例えば、「ページ上の <code><h1></code> 要素の文字を大きく、赤くしたい」といったようにです。</p>
<p>これを実現するコードはとても簡単な CSS ルールです:</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}</pre>
<p>ルールは {{Glossary("CSS Selector", "セレクタ")}} から始まります。ここにはこれからスタイリングしようとする HTML 要素を選びます。この例では {{htmlelement("h1")}} を選んでいます。</p>
<p>つぎに波カッコ <code>{ }</code> を書き、この中に<strong>プロパティ</strong>と<strong>プロパティ値</strong> のペアで作られた <strong>宣言 </strong>を 1 つ以上置きます。それぞれのペアは選んだ要素のプロパティとそれに与えたいプロパティ値を特定します。</p>
<p>コロン <code>:</code> の前にプロパティを書き、コロンの後にプロパティ値を書きます。CSS {{Glossary("property/CSS","プロパティ")}} は特定されたプロパティによって異なる許容値を持ちます。例えば、<code>color</code> プロパティは様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Color">color 値</a>を持っています。<code>font-size</code> プロパティもあります。このプロパティは値として様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">size 単位</a> を持っています。</p>
<p>CSS スタイルシートはたくさんのルールを含みます。</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}</pre>
<p>ほかにどんな値があるか調べる必要があることに気づくでしょう。 MDN のプロパティのページをつかえば、忘れた時やほかにどんな値が使えるか知りたいときにすばやく調べられます。</p>
<div class="blockIndicator note">
<p><strong>注</strong>: <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>にすべての CSS プロパティのリストがあります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn <em>css-feature-name</em>" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください!</p>
</div>
<h2 id="CSS_Modules" name="CSS_Modules">CSS モジュール</h2>
<p>CSSを使ってスタイリングできることがたくさんあるので、CSS は <strong>モジュール</strong> にまとめられています。 MDN を探せばこれらモジュールのリファレンスが見つかるでしょうし、多くのページは特定のモジュールで編集されていることがわかります。例えば、その目的やプロパティと機能の違いを見つけるために<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">背景と境界</a> モジュールを見ることができます。（後述で） CSS 技術を定義する仕様へのリンクもあります。</p>
<p>CSS がどのように作られているか、ここではあまり心配する必要はありませんが、もし例えば、特定のプロパティが似たものの中で見つかる可能性があることを知っていれば、情報は見つけやすくなります。</p>
<p>たとえば、背景と境界モジュールに戻ってみましょう。<code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> と <code><a href="/ja/docs/Web/CSS/border-color">border-color</a></code> プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。</p>
<h3 id="CSS_Specifications" name="CSS_Specifications">CSS の仕様</h3>
<p>(HTML, CSS, JavaScript といった) ウェブの標準技術はすべて、仕様 (または単に 「スペック」)とよばれる文書で定義されており、({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, or {{glossary("Khronos")}} といった) 標準化組織によって発行され、技術がどう働くか定義しています。</p>
<p>CSS は W3C 内の <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> と呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する <em>invited experts</em> もいます。 </p>
<p>新しい CSS の機能は、CSS ワーキンググループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーやデベロッパーが要望することもありますし、ワーキンググループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。</p>
<p>CSS の初心者としては、CSS仕様が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能のサポートを実装するために使用するのを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによるサポート（以下を参照）、および仕様間の関係を理解することは価値があります。</p>
<h2 id="Browser_support" name="Browser_support">ブラウザーサポート</h2>
<p>一度CSS が指定されると、1 つ以上のブラウザーが CSS を実装している場合にのみウェブページの開発に役立ちます。これはコードが CSS ファイルの命令を画面に表示できるように記述されることを意味します。これは <a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS がどう働くか</a>のレッスンで見ることになるでしょう。すべてのブラウザーで同時にある機能が実装されることは通常はありませんし、それゆえ通常、一部のブラウザーでは CSS の一部を使用でき、他のブラウザーでは使用できないというギャップがあります。こういったわけで、どういった機能が実装されているか確認できることは有益です。MDN のそれぞれのページでは、関心のあるプロパティの状態が確認できるので、ウェブサイト上でそれが使えるか見極めることができます。</p>
<p>以下は CSS の <code><a href="/ja/docs/Web/CSS/font-family">font-family</a></code> プロパティについての互換データです。</p>
<p>{{Compat("css.properties.font-family")}}</p>
<h2 id="Whats_next" name="What's_next">次のステップ</h2>
<p>CSS とは何かについていくらか理解したと思いますので、<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a> に進みましょう。ここでは自分で CSS を書き始められます。</p>
<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
<ol>
<li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
<li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
</ol>
|
