MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS basics

CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。 CSS の基礎ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます:テキストを黒または赤にするにはどうすればいいですか? そのような場所でコンテンツを画面に表示させるにはどうすればよいですか? 背景画像と色を使ってウェブページをどのように飾るのですか?

それでは CSS とは何でしょうか?

HTML のように、 CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のように記述します。

p {
  color: red;
}

それでは試してみましょう : これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを style.css として styles ディレクトリに保存します。

しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(もしあなたが私たちのプロジェクトに従っていないのであれば、ファイルを扱うHTML の基本を読み、まず何をする必要があるのかを見てください。)

  1. あなたの index.html ファイルをオープンし、次の行を head のどこか、つまり <head> タグと </head> タグの間に貼り付けます :
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. index.html を保存し、ブラウザで読み込みます。このように表示するでしょう :

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.あなたの項の段落のテキストが赤色になった場合、おめでとうございます、あなたは今はじめて CSS を書き、成功しました!

CSS ルールセットの構造

上記の CSS をもう少し詳しく見てみましょう :

全体の構造はルールセットと呼びます (しかし時々"ルール"として略します) 。ここのパーツの名前にも注意してください :

セレクタ
ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。 別の要素をスタイルするには、Selector を変更します。
宣言
color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定します。
プロパティ
指定された HTML 要素のスタイルを設定する方法 (この場合 colorp 要素のプロパティです) 。CSS ではルール内でどのプロパティを適用するかを選択します。
プロパティ値
プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります) 。

構文の他の重要な部分に注意してください :

  • 各ルールセット (セレクタを除く) は中括弧 ( { } ) で囲む必要があります。
  • 各宣言内ではコロン (:) を使用してプロパティを値から分離する必要があります。
  • 各規則セット内でセミコロン (;) を使用し、各宣言を次の規則と区切る必要があります。

したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです :

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素を選択する

複数のの要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。 例えば :

p,li,h1 {
  color: red;
}

異なるセレクタの種類

多くの異なるセレクタの種類があります。上では、指定された HTML 文章内の特定の型のすべての要素を選択する要素セレクタのみを調べました。しかしそれ以上の具体的な選択は可能です。 より一般的なタイプのセレクタを次に示します :

セレクタ名 何を選択するか
要素セレクタ (時々タグまたは型セレクタと呼ばれます) 指定された型のすべての HTML 要素 p
Selects <p>
ID セレクタ
 
ページ上の指定されたIDを持つ要素 (特定のHTMLページでは、IDごとに1つの要素しか許可されません)
#my-id
Selects <p id="my-id"> or <a id="my-id">
クラスセレクタ
 
指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます )
.my-class
Selects <p class="my-class"> and <a class="my-class">
属性セレクタ
 
指定された属性を持つページ上の要素
img[src]
Selects <img src="myimage.png"> but not <img>
擬似クラスセレクタ
 

指定された要素だが指定された状態にあるときの
例: 上に乗っている

a:hover
Selects <a>, but only when the mouse pointer is hovering over the link.

探索するセレクタはさらに多くあり、セレクタガイドに詳細なリストがあります。

フォントとテキスト

CSSの基本をいくつか勉強しましたので、style.css ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストを少し良くしてみましょう。

  1. まず最初に、どこかの安全に保存した Google フォントの出力を見つけてください。 <link ... > 要素を index.html の先頭の中のどこかに追加します (もう一度、<head> タグと </head> タグの間) 。 これは次のようになります :
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. 次に style.css ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実際には非常によく見えません。
  3. 次の行を代わりに追加し、プレースホルダ行をGoogleフォントから取得した実際の font-family 行に置き換えます。 (この font-family は、テキストに使用するフォントを意味します) 。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します ( <html> はページ全体の親要素です。 その中のすべての要素は同じ font-size font-famil を継承します)  :
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    : 「px」の意味を説明するコメントを追加しました。 / * と * / の間にある CSS ドキュメント内のものは CSS コメントです。ブラウザはコードをレンダリングするときに無視します。 これはあなたが実施していることに役立つメモを書く場所です。

  4. HTML ボディ (<h1><li><p>) 内のテキストを含む要素のフォントサイズを設定します) 。 また読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します :
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

これらの px 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります :

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

ボックス、ボックス、それはすべてのボックスについて

CSS を書くことについて気づくことの1つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。

a big stack of boxes or crates sat on top of one another

当然のことながら、CSS レイアウトは主にボックスモデルに基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます :

  • paddingコンテンツのまわりのスペース (例えば段落テキストの周り)
  • borderpadding のすぐ外側にある実線
  • margin、要素の外側の周りの空間

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

このセクションでは次のものを使用します :

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

では、ページに CSS を追加しましょう! これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。

ページの色を変更する

html {
  background-color: #00539F;
}

このルールはページ全体の背景色に設定を行います。上記の色のコードを、サイトを計画する際に選択した色に変更します。

ボディを並び替える

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

次は body エレメントです。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう :

  • width: 600px; — これにより body は常に 600 ピクセルになります。
  • margin: 0 auto; margin padding などのプロパティに2つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は0になります )。2 番目の値は左右です (ここauto 利用可能な水平スペースを左右に均等に分割します )。 ここで説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。
  • background-color: #FF9500; 前と同じようにこれは要素の背景色を設定します。 私は html 要素にbody に暗い青とは対照的な赤いオレンジ色の一種を使用しました。 実験してください。 white や何でも好きなものを自由に使用してください。
  • padding: 0 20px 20px 20px; 埋め込みに 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に20ピクセルを設定します。 値は上・右・下・左の順に設定されます。
  • border: 5px solid black; これはボディの全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。

メインページタイトルの配置とスタイリング

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが <h1> 要素 (他の中でも) にデフォルトのスタイルを適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築の Web ページでも基本的な読みやすさを求めています。 ギャップをなくすには、margin: 0; を設定してデフォルトのスタイルをオーバーライドします。

次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを html の背景色と同じ色にしました。

私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する text-shadow です。 その 4 つの値は次のとおりです。

  • 最初のピクセル値は、テキストからのシャドーの水平オフセットを設定します。移動する距離は負の値で、左に移動する必要があります。
  • 2 番目のピクセル値は、テキストからシャドーの垂直オフセットを設定します (この例では、どれだけ下に移動するか) 。負の値では上に移動します。
  • 3 番目のピクセル値は影のぼかし半径を設定します。値が大きいほど影がぼやけることを意味します。
  • 4 番目の色は影の基本色を設定します。

繰り返しますが、さまざまな値を試してみてください。

画像のセンタリング

img {
  display: block;
  margin: 0 auto;
}

最後に画像をよりよく見えるように中央に配置します。以前は body のために実施したことと同じようにもう一度 margin: 0 auto トリックを使うことができましたが、何か別のことをする必要もあります。body 要素はブロックレベルです。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。 一方、イメージはインライン要素でありできないことを意味します。 画像にマージンを適用するには、display: block; を使用して画像のブロックレベルの動作を指定する必要があります。

: あなたがまだ display: block; とブロックレベル/インラインの区別を理解していなければ、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、display のリファレンスページを参照してください。

結論

この記事のすべての手順に従っている場合は、次のようなページが表示されます (ここでバージョンを表示することもできます) 。

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

もしわからなくなった場合、Github の完成したサンプルコード と作業内容を常に比較することができます。

ここでは、CSS の少し触れただけです。 詳細については、CSS の学習トピックをご覧ください。

 

ドキュメントのタグと貢献者

 このページの貢献者: T.Ukegawa
 最終更新者: T.Ukegawa,