blob: 100165c81f165c33afc69014cc8f484c635256bd (
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
|
---
title: CSS
slug: Learn/CSS
tags:
- Beginner
- CSS
- CodingScripting
- Debugging
- Landing
- NeedsContent
- Topic
- length
- specificity
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>
<p class="summary">Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。</p>
<div class="callout">
<h3 id="フロントエンドのウェブ開発者になりたいですか？">フロントエンドのウェブ開発者になりたいですか？</h3>
<p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">開始する</a></p>
</div>
<h2 id="Learning_pathway" name="Learning_pathway">学習の道のり</h2>
<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p>
<ul>
<li><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li>
<li>より高度な <a href="/ja/docs/Learn/HTML#Modules">HTML モジュール</a></li>
<li><a href="/ja/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li>
</ul>
<p>HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。</p>
<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p>
<p>このトピックに取り組む前に <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p>
<h2 id="Modules" name="Modules">モジュール</h2>
<p>このトピックは、以下のモジュールで構成されており、取り組むべき順に記載していますので、上から始めていくとよいでしょう。</p>
<dl>
<dt></dt>
<dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt>
<dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSS のはたらきから CSS の構文、そしてそれを使ってHTMLをどうデザインしていくのかといった CSS をマスターするための入門編を丁寧に解説します。</dd>
<dt></dt>
<dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt>
<dd>
<p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSS にちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバッグの方法などを見ていきます。</p>
<p>ここでの目的は、<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 レイアウトの世界に飛び込むことができます。さまざまな <code>display</code> の設定、flexboxのようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。</dd>
</dl>
<h2 id="Solving_common_CSS_problems" name="Solving_common_CSS_problems">CSS でよくある問題を解決するには</h2>
<p><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a> には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。</p>
<p>最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー（境界線）を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS 学習のなかで最も嬉しいことの 1 つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです！</p>
<h2 id="CSS_is_weird" name="CSS_is_weird">"CSS は奇妙です"</h2>
<p>CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか？ 次のビデオでは、CSS がそのように動作する理由と、そのように進化した理由について、Miriam Suzanne が役に立つ説明をしています。</p>
<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<dl>
<dt><a href="/ja/docs/Web/CSS">MDN での CSS</a></dt>
<dd>MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。プロパティがとりうるすべての値を知りたいですか？ ここは良い場所です。</dd>
</dl>
|
