We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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 をもう少し詳しく見てみましょう:

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

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

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

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

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

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

複数の要素を選択する

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

p,li,h1 {
  color: red;
}

さまざまな種類のセレクター

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

セレクター名 何を選択するか
要素セレクター (時々タグまたは型セレクターと呼ばれます) 指定された型のすべての HTML 要素 p
<p> を選択
ID セレクター ページ上の指定された ID を持つ要素 (特定の HTML ページでは、ID ごとに 1 つの要素しか許可されません) #my-id
<p id="my-id"> または <a id="my-id"> を選択
クラスセレクター 指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます) .my-class
<p class="my-class"> 及び <a class="my-class"> を選択
属性セレクター 指定された属性を持つページ上の要素 img[src]
<img src="myimage.png"> を選択するが、<img> は選択しない
擬似クラスセレクター 指定された要素だが指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。 a:hover
<a> を選択するが、マウスポインターがリンク上にあるときのみ。

セレクターはさらに多くあり、セレクターガイドに詳細な一覧があります。

フォントとテキスト

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-sizefont-family を継承します):
    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 */
    }

    : 「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、コンテンツのまわりのスペース (例えば段落テキストの周り)
  • border、padding のすぐ外側にある実線
  • 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; marginpadding などのプロパティに 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> 要素 (他の中でも) にデフォルトのスタイルを適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、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 の学習トピックをご覧ください。

このモジュール内の文書

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

このページの貢献者: mfuji09, Uemmra3, dskmori, hamasaki, haruo69, T.Ukegawa
最終更新者: mfuji09,