blob: f7715de3d0e56d0fbd8d5ffe15e15568d29240f2 (
plain)
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
|
---
title: 'CSS: カスケーディングスタイルシート'
slug: Web/CSS
tags:
- CSS
- Cascading Style Sheets
- Design
- Guide
- Landing
- Layout
- Reference
- Style Sheets
- Styles
- Stylesheets
- 'l10n:priority'
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>
<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、<a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p>
<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、<a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1、CSS2.1、CSS3 について聞いたことがあるでしょう。しかし、CSS4 は公式なバージョンにはなっていません。</p>
<p>CSS3 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p>
<h2 id="Key_resources" name="Key_resources">主なリソース</h2>
<dl>
<dt>CSS 入門</dt>
<dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、CSS とは何か、どのように使用するかを学習しましょう。</dd>
<dt>CSS チュートリアル</dt>
<dd><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a>は、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。</dd>
<dt>CSS リファレンス</dt>
<dd>CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>です。</dd>
</dl>
<div class="callout">
<h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4>
<p>目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。</p>
<p><a class="button primary" href="/ja/docs/Learn/Front-end_web_developer">始めましょう</a>
</p>
</div>
<h2 class="Documentation" id="Tutorials" name="Tutorials">チュートリアル</h2>
<p><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a> は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。</p>
<dl>
<dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt>
<dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd>
<dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt>
<dd>
<p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p>
<p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p>
</dd>
<dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt>
<dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt>
<dd>現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</dd>
<dt><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></dt>
<dd>このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。</dd>
</dl>
<h2 class="Tools" id="Reference" name="Reference">リファレンス</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>: CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの CSS リファレンスです。</li>
<li>CSS の主要な概念:
<ul>
<li><a href="/ja/docs/Web/CSS/Syntax">言語の構文と書式</a></li>
<li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a>と<a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a>および<a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li>
<li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a>と<a href="/ja/docs/Web/CSS/margin_collapsing">マージンの相殺</a></li>
<li><a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a></li>
<li><a href="/ja/docs/Web/CSS/Understanding_z_index/The_stacking_context">重ね合わせ</a>と<a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形</a>コンテキスト</li>
<li><a href="/ja/docs/Web/CSS/initial_value">初期値</a>、<a href="/ja/docs/Web/CSS/computed_value">計算値</a>、<a href="/ja/docs/Web/CSS/used_value">使用値</a>、<a href="/ja/docs/Web/CSS/actual_value">実効値</a></li>
<li><a href="/ja/docs/Web/CSS/Shorthand_properties">CSS 一括指定プロパティ</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a></li>
<li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a></li>
<li><a href="/ja/docs/Web/CSS/animation">アニメーション</a></li>
</ul>
</li>
</ul>
<h2 class="Tools" id="Cookbook" name="Cookbook">料理帳</h2>
<p><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a>は、よくあるレイアウトパターンや、サイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。</p>
<h2 class="Tools" id="Tools_for_CSS_development" name="Tools_for_CSS_development">CSS 開発のためのツール</h2>
<ul>
<li><a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。</li>
<li><a href="/ja/docs/Tools">Firefox Developer Tools</a> は<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>と<a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a>ツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。</li>
<li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li>
<li>ウェブコミュニティは、利用できるその他の<a href="/ja/docs/Web/CSS/Tools">様々な CSS のためのツール</a>を開発しています。</li>
</ul>
<h2 id="Meta_bugs" name="Meta_bugs">メタバグ</h2>
<ul>
<li>Firefox: {{bug(1323667)}}</li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/Demos_of_open_web_technologies#CSS">CSS デモ</a>: 最新の CSS テクノロジーの例を探索して想像力をかきたてましょう。</li>
<li>CSS がよく適用されるウェブ言語。<a href="/ja/docs/Web/HTML">HTML</a>、<a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}}、<a href="/ja/docs/XML_introduction">XML</a></li>
<li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>、<a href="/ja/docs/Mozilla/Firefox">Firefox</a>、<a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の<a href="/ja/docs/Mozilla/Add-ons">拡張機能</a>と<a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li>
<li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla メーリングリスト</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li>
</ul>
|
