path: root/files/ja/learn/getting_started_with_the_web/css_basics/index.html

---
title: CSS の基本
slug: Learn/Getting_started_with_the_web/CSS_basics
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Learn
  - Styling
  - Web
  - l10n:priority
  - 初心者
  - 学習
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「<em>CSS の基本</em>」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか？コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。</p>
</div>

<h2 id="What_is_CSS">CSS とは何か</h2>

<p>HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。<strong>CSS はスタイルシート言語です</strong>。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。</p>

<pre class="brush: css">p {
  color: red;
}</pre>

<p>それでは試してみましょう。テキストエディターを使用して、 (上記の) 3 行の CSS 新しいファイルに貼り付けてください。そのファイルを <code>style.css</code> として <code>styles</code> という名前のディレクトリーに保存してください。。</p>

<p>コードを働かせるには、この (上記の) CSS を HTML 文書に適用する必要があります。そうしないと、このスタイルはブラウザーの HTML 文書の表示に影響しません。 (今までのプロジェクトを実行していない場合は、ここでいったん止めて<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>と <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を読み、まず何をする必要があるのかを見てください。)</p>

<ol>
 <li><code>index.html</code> ファイルを開き、先頭 ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に以下の行を貼り付けてください。

  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet"&gt;</pre>
 </li>
 <li><code>index.html</code> を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。</li>
</ol>

<p><img alt="Mozilla のロゴといくつかの段落です。段落のテキストは、 CSS によって赤くスタイル付けされています。" src="website-screenshot-styled.png" style="display: block; margin: 0px auto;">段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。</p>

<h3 id="Anatomy_of_a_CSS_ruleset">CSS 規則セットの構造</h3>

<p>赤い段落テキストの CSS コードを分解して、その仕組みを理解してみましょう。</p>

<p><img alt="CSS p declaration color red" src="css-declaration-small.png"></p>

<p>全体の構造は<strong>規則セット</strong>と呼びます (<em>規則セット</em>という語はよく、単に<em>規則</em>とも呼ばれます)。それぞれの部分の名前にも注意してください。</p>

<dl>
 <dt>セレクター (Selector)</dt>
 <dd>これは規則セットの先頭にある HTML 要素名です。これはスタイルを設定する要素 (この例の場合は {{HTMLElement("p")}} 要素) を定義します。別の要素をスタイル付けするには、セレクターを変更してください。</dd>
 <dt>宣言 (Declaration)</dt>
 <dd><code>color: red;</code> のような単一の規則です。これは要素の<strong>プロパティ</strong>のうち、スタイル付けしたいものを指定します。</dd>
 <dt>プロパティ (Property)</dt>
 <dd>これらは、 HTML 要素をスタイル付けするための方法です。 (この例では、 <code>color</code> は {{htmlelement("p")}} 要素のプロパティです。)  CSS では、規則の中で影響を与えたいプロパティを選択します。</dd>
 <dt>プロパティ値 (Property value)</dt>
 <dd>プロパティの右側には—コロンの後に—<strong>プロパティ値</strong>があります。与えられたプロパティの多くの外観から 1 つを選択します。 (例えば、 <code>color</code> の値は <code>red</code> 以外にもたくさんあります。)</dd>
</dl>

<p>構文の他の重要な部分に注意してください。</p>

<ul>
 <li>セレクターを除き、それぞれの規則セットは中括弧 (<code>{}</code>) で囲む必要があります。</li>
 <li>それぞれの宣言内では、コロン (<code>:</code>) を使用してプロパティと値を分離する必要があります。</li>
 <li>それぞれの規則セット内でセミコロン (<code>;</code>) を使用して、それぞれの宣言と次の規則を区切る必要があります。</li>
</ul>

<p>一つの規則セットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。</p>

<pre class="brush: css">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Selecting_multiple_elements">複数の要素の選択</h3>

<p>複数の要素を選択して、そのすべてに一つの規則セットを適用することもできます。複数のセレクターはカンマで区切ります。たとえば、以下のようになります。</p>

<pre class="brush: css">p, li, h1 {
  color: red;
}</pre>

<h3 id="Different_types_of_selectors">さまざまな種類のセレクター</h3>

<p>セレクターにはさまざまな種類があります。上記の例では、<strong>要素セレクター</strong>を使用しており、特定の種類の要素をすべて選択しています。しかし、もっと特定の要素を選択することもできます。ここでは、より一般的なセレクターの種類を紹介します。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">セレクター名</th>
   <th scope="col">選択するもの</th>
   <th scope="col">例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>要素セレクター (タグまたは型セレクターと呼ばれることもあります)</td>
   <td>指定された型のすべての HTML 要素</td>
   <td><code>p</code><br>
    <code>&lt;p&gt;</code> を選択</td>
  </tr>
  <tr>
   <td>ID セレクター</td>
   <td>指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。</td>
   <td><code>#my-id</code><br>
    <code>&lt;p id="my-id"&gt;</code> または <code>&lt;a id="my-id"&gt;</code> を選択</td>
  </tr>
  <tr>
   <td>クラスセレクター</td>
   <td>指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。</td>
   <td><code>.my-class</code><br>
    <code>&lt;p class="my-class"&gt;</code> および <code>&lt;a class="my-class"&gt;</code> を選択</td>
  </tr>
  <tr>
   <td>属性セレクター</td>
   <td>指定された属性を持つページ上の要素です。</td>
   <td><code>img[src]</code><br>
    <code>&lt;img src="myimage.png"&gt;</code> を選択するが、<code>&lt;img&gt; は選択しない</code></td>
  </tr>
  <tr>
   <td>擬似クラスセレクター</td>
   <td>指定された要素が指定された状態にあるとき。 (例えば、マウスポインターが上に乗っている (ホバー) 状態。)</td>
   <td><code>a:hover</code><br>
    <code>&lt;a&gt;</code> を選択するが、マウスポインターがリンク上にあるときのみ。</td>
  </tr>
 </tbody>
</table>

<p>他にも様々なセレクターがあります。詳しくは、 MDN の<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクターガイド</a>をご覧ください。</p>

<h2 id="Fonts_and_text">フォントとテキスト</h2>

<p>CSS の基本をいくつか勉強しましたので、<code>style.css</code> ファイルにいくつかの規則と情報を追加して、この例を見栄え良くしましょう。</p>

<ol>
 <li>まず、以前に<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>で保存した、 <a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#font">Google フォントの出力</a>を探します。 {{htmlelement("link")}} 要素を <code>index.html</code> の先頭のどこか ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に追加します。それは次のようなものです。

  <pre class="brush: html">&lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
  このコードは、ウェブページに Open Sans フォントファミリを読み込むスタイルシートにページをリンクします。</li>
 <li>次に <code>style.css</code> ファイルにある既存の規則を削除します。試験としては良いものでしたが、赤いテキストだらけにするのはもうやめましょう。</li>
 <li>以下の行 (下記参照) を追加し、 <code>font-family</code> の割り当てを<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>で選択した <code>font-family</code> に置き換えます。 <code>font-family</code> というプロパティは、テキストに使用するフォントを指します。この規則では、ページ全体の基本フォントとフォントの大きさを定義します。 {{HTMLElement("html")}} はページ全体の親要素なので、その中のすべての要素は同じ <code>font-size</code> と <code>font-family</code> を継承します。
  <pre class="brush: css">html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
}</pre>

  <div class="note">
  <p><strong>注</strong>: CSS の <code>/*</code> と <code>*/</code> の間にあるものは何でも <strong>CSS コメント</strong>になります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。</p>
  </div>
 </li>
 <li>次に、 HTML 本文内にテキストを配置する要素 ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}) のフォントの大きさを設定します。また、見出しを中央揃えにします。最後に、 2 つ目の規則セット (下記) を展開して、行の高さや文字の間隔などの設定を行い、本文のコンテンツを読みやすくしましょう。
  <pre class="brush: css">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p><code>px</code> の値はお好みで調整してください。進行中の作品は、このようになるはずです。</p>

<p><img alt="mozilla のロゴといくつかの段落。 sans-serif フォントが設定され、フォントの大きさ、行の高さ、文字の間隔が調整され、メインページの見出しが中央に配置されています。" src="website-screenshot-font-small.png" style="display: block; margin: 0px auto;"></p>

<h2 id="CSS_all_about_boxes">CSS: ボックスのすべて</h2>

<p>CSS を書いていて気づくことがあります。それは、その多くがボックスに関するものだということです。これには、サイズ、色、位置の設定が含まれます。ページ上のほとんどの HTML 要素は、他の箱の上に置かれた箱と考えることができます。</p>

<p><img alt="大きな箱や木箱が積み重なっている状態" src="boxes.jpg" style="display: block; margin: 0px auto;"></p>

<p>CSS のレイアウトは、主に<em>ボックスモデル</em>に基づいています。ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。</p>

<ul>
 <li><code>padding</code>: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。</li>
 <li><code>border</code>: <code>padding</code> のすぐ外側にある実線</li>
 <li><code>margin</code>: 要素の外側の周りの空間</li>
</ul>

<p><img alt="3 つのボックスがお互いの内側に配置されています。外側から内側に向かって、 margin, border, padding と書かれています。" src="box-model.png" style="display: block; margin: 0px auto;"></p>

<p>この節では次のものを使用します。</p>

<ul>
 <li><code>width</code> (要素の)</li>
 <li><code>background-color</code>: 要素の内容と padding の背後にある色</li>
 <li><code>color</code>: 要素のコンテンツ (通常はテキスト) の色</li>
 <li><code>text-shadow</code>: 要素内のテキストに影を設定します</li>
 <li><code>display</code>: 要素の表示モードを設定します (これについてはまだ心配しないでください)</li>
</ul>

<p>続けて、さらに CSS を追加していきましょう。 <code>style.css</code> の一番下に、これらの新しい規則を追加し続けます。値を変えてどうなるか実験してみましょう。</p>

<h3 id="Changing_the_page_color">ページの色を変更する</h3>

<pre class="brush: css">html {
  background-color: #00539F;
}</pre>

<p>この規則はページ全体の背景色に設定を行います。上記のカラーコードを、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#theme_color">ウェブサイトをどんな外見にするかで選んだ色</a>に変更しましょう。</p>

<h3 id="Styling_the_body">本文のスタイル付け</h3>

<pre class="brush: css">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。</p>

<ul>
 <li><code>width: 600px;</code> — これにより body は常に 600 ピクセルの幅になります。</li>
 <li><code>margin: 0 auto;</code> — <code> margin</code> や <code>padding</code> などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します (この場合は <code>0</code> になります )。2 番目の値は左右に影響します (ここで <code>auto</code> は残った水平方向の余白を左右に均等に配分する特別な値です)。 <a href="/ja/docs/Web/CSS/margin#syntax">margin の構文</a>で説明しているように、 1 つ、3 つ、または 4 つの値を使用することもできます。</li>
 <li><code>background-color: #FF9500;</code> — これは要素の背景色を設定します。このプロジェクトでは body の背景色に明るいオレンジ色を使用して、 {{htmlelement("html")}} 要素の暗い青とは対照的にしました。 (気軽に試してみてください。)</li>
 <li><code>padding: 0 20px 20px 20px;</code> — これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。<code>margin</code> と同様、 <a href="/ja/docs/Web/CSS/padding#syntax">padding の構文</a>で説明されているように、 1 つ、 2 つ、または 3 つの値を使用することもできます。</li>
 <li><code>border: 5px solid black;</code> — これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。</li>
</ul>

<h3 id="Positioning_and_styling_the_main_page_title">メインページのタイトルの配置とスタイル付け</h3>

<pre class="brush: css">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが (他のものの中で)  {{htmlelement("h1")}} 要素に既定のスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 <code>margin: 0;</code> を設定して既定のスタイルを上書きします。</p>

<p>次に見出しの上下のパディングを 20 ピクセルに設定します。</p>

<p>続いて、見出しテキストが HTML の背景色と同じ色になるように設定します。</p>

<p>最後に、 <code>text-shadow</code> は要素のテキストコンテンツに影を適用します。 4 つの値は次のとおりです。</p>

<ul>
 <li>最初はピクセル値で、影のテキストからの<strong>水平オフセット</strong>、どれだけ横に移動するかを設定します。</li>
 <li>2 番目はピクセル値で、影のテキストから<strong>垂直オフセット</strong>、どれだけ下に移動するかを設定します。</li>
 <li>3 番目のピクセル値で、影を<strong>ぼかす半径</strong>を設定します。値が大きいほどぼやけた影を生成します。</li>
 <li>4 番目の値は、影の基本色を設定します。</li>
</ul>

<p>いろいろな値を試して、表示方法の変化を確認してみてください。</p>

<h3 id="Centering_the_image">画像のセンタリング</h3>

<pre class="brush: css">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>次に、画像を中央に配置して見栄えを良くします。本文のときと同じように、 <code>margin: 0 auto</code> のトリックを使うこともできます。しかし、 CSS を機能させるために追加の設定が必要になる違いがあります。</p>

<p>{{htmlelement("body")}} は<strong>ブロック</strong>要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像は<strong>インライン</strong>要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、<code>display: block;</code> を使用して画像にブロックレベルの動作を指定する必要があります。</p>

<div class="note">
<p><strong>注</strong>: 上記の手順は、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) <a href="https://ja.wikipedia.org/wiki/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88%E3%82%BD%E3%83%95%E3%83%88">画像編集ソフト</a>を使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を <code>&lt;img&gt;</code> 要素に設定し、画像の大きさを変更します。</p>
</div>

<div class="note">
<p><strong>注</strong>: <code>display: block;</code> や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の <a href="/ja/docs/Web/CSS/display">display のリファレンスページ</a><span lang="ja">を参照してください。</span></p>
</div>

<h2 id="Conclusion">まとめ</h2>

<p>この記事のすべての手順に従っている場合は、次のようなページが表示されます。</p>

<p><img alt="モジラのロゴを中央に配置し、ヘッダーとパラグラフを配置しています。これで、ページ全体の背景が青くになり、中央に配置されたメインコンテンツストリップの背景がオレンジになるなど、きれいなスタイルになりました。" src="website-screenshot-final.png" style="display: block; margin: 0px auto;"></p>

<p>(<a href="https://mdn.github.io/beginner-html-site-styled/">作成した結果はこちらから見ることができます</a>。) もしわからなくなった場合、<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">Github の完成したサンプルコード</a>と作業内容を常に比較することができます。</p>

<p>ここでは、CSS の表面に少し触れただけです。詳細については、<a href="/ja/docs/Learn/CSS">CSS の学習トピック</a>をご覧ください。</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="In_this_module">このモジュール</h2>

<ul>
 <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
 <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
 <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
 <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
 <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
 <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
 <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li>
 <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
</ul>