段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか？コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。
HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。
p {
color: red;
}
それでは試してみましょう。テキストエディターを使用して、 (上記の) 3 行の CSS 新しいファイルに貼り付けてください。そのファイルを style.css として styles という名前のディレクトリーに保存してください。。
コードを働かせるには、この (上記の) CSS を HTML 文書に適用する必要があります。そうしないと、このスタイルはブラウザーの HTML 文書の表示に影響しません。 (今までのプロジェクトを実行していない場合は、ここでいったん止めてファイルの扱いと HTML の基本を読み、まず何をする必要があるのかを見てください。)
index.html ファイルを開き、先頭 ({{HTMLElement("head")}} タグと </head> タグの間) に以下の行を貼り付けてください。
<link href="styles/style.css" rel="stylesheet">
index.html を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。
赤い段落テキストの CSS コードを分解して、その仕組みを理解してみましょう。
全体の構造は規則セットと呼びます (規則セットという語はよく、単に規則とも呼ばれます)。それぞれの部分の名前にも注意してください。
color: red; のような単一の規則です。これは要素のプロパティのうち、スタイル付けしたいものを指定します。color は {{htmlelement("p")}} 要素のプロパティです。) CSS では、規則の中で影響を与えたいプロパティを選択します。color の値は red 以外にもたくさんあります。)構文の他の重要な部分に注意してください。
{}) で囲む必要があります。:) を使用してプロパティと値を分離する必要があります。;) を使用して、それぞれの宣言と次の規則を区切る必要があります。一つの規則セットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。
p {
color: red;
width: 500px;
border: 1px solid black;
}
複数の要素を選択して、そのすべてに一つの規則セットを適用することもできます。複数のセレクターはカンマで区切ります。たとえば、以下のようになります。
p, li, h1 {
color: red;
}
セレクターにはさまざまな種類があります。上記の例では、要素セレクターを使用しており、特定の種類の要素をすべて選択しています。しかし、もっと特定の要素を選択することもできます。ここでは、より一般的なセレクターの種類を紹介します。
| セレクター名 | 選択するもの | 例 |
|---|---|---|
| 要素セレクター (タグまたは型セレクターと呼ばれることもあります) | 指定された型のすべての HTML 要素 | p<p> を選択 |
| ID セレクター | 指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。 | #my-id<p id="my-id"> または <a id="my-id"> を選択 |
| クラスセレクター | 指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。 | .my-class<p class="my-class"> および <a class="my-class"> を選択 |
| 属性セレクター | 指定された属性を持つページ上の要素です。 | img[src]<img src="myimage.png"> を選択するが、<img> は選択しない |
| 擬似クラスセレクター | 指定された要素が指定された状態にあるとき。 (例えば、マウスポインターが上に乗っている (ホバー) 状態。) | a:hover<a> を選択するが、マウスポインターがリンク上にあるときのみ。 |
他にも様々なセレクターがあります。詳しくは、 MDN のセレクターガイドをご覧ください。
CSS の基本をいくつか勉強しましたので、style.css ファイルにいくつかの規則と情報を追加して、この例を見栄え良くしましょう。
index.html の先頭のどこか ({{HTMLElement("head")}} タグと </head> タグの間) に追加します。それは次のようなものです。
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">このコードは、ウェブページに Open Sans フォントファミリを読み込むスタイルシートにページをリンクします。
style.css ファイルにある既存の規則を削除します。試験としては良いものでしたが、赤いテキストだらけにするのはもうやめましょう。font-family の割り当てをウェブサイトをどんな外見にするかで選択した font-family に置き換えます。 font-family というプロパティは、テキストに使用するフォントを指します。この規則では、ページ全体の基本フォントとフォントの大きさを定義します。 {{HTMLElement("html")}} はページ全体の親要素なので、その中のすべての要素は同じ font-size と font-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 */
}
注: CSS の /* と */ の間にあるものは何でも CSS コメントになります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
px の値はお好みで調整してください。進行中の作品は、このようになるはずです。
CSS を書いていて気づくことがあります。それは、その多くがボックスに関するものだということです。これには、サイズ、色、位置の設定が含まれます。ページ上のほとんどの HTML 要素は、他の箱の上に置かれた箱と考えることができます。
CSS のレイアウトは、主にボックスモデルに基づいています。ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。
padding: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。border: padding のすぐ外側にある実線margin: 要素の外側の周りの空間
この節では次のものを使用します。
width (要素の)background-color: 要素の内容と padding の背後にある色color: 要素のコンテンツ (通常はテキスト) の色text-shadow: 要素内のテキストに影を設定しますdisplay: 要素の表示モードを設定します (これについてはまだ心配しないでください)続けて、さらに CSS を追加していきましょう。 style.css の一番下に、これらの新しい規則を追加し続けます。値を変えてどうなるか実験してみましょう。
html {
background-color: #00539F;
}
この規則はページ全体の背景色に設定を行います。上記のカラーコードを、ウェブサイトをどんな外見にするかで選んだ色に変更しましょう。
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
次は {{htmlelement("body")}} 要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。
width: 600px; — これにより body は常に 600 ピクセルの幅になります。margin: 0 auto; — margin や padding などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します (この場合は 0 になります )。2 番目の値は左右に影響します (ここで auto は残った水平方向の余白を左右に均等に配分する特別な値です)。 margin の構文で説明しているように、 1 つ、3 つ、または 4 つの値を使用することもできます。background-color: #FF9500; — これは要素の背景色を設定します。このプロジェクトでは body の背景色に明るいオレンジ色を使用して、 {{htmlelement("html")}} 要素の暗い青とは対照的にしました。 (気軽に試してみてください。)padding: 0 20px 20px 20px; — これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。margin と同様、 padding の構文で説明されているように、 1 つ、 2 つ、または 3 つの値を使用することもできます。border: 5px solid black; — これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが (他のものの中で) {{htmlelement("h1")}} 要素に既定のスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 margin: 0; を設定して既定のスタイルを上書きします。
次に見出しの上下のパディングを 20 ピクセルに設定します。
続いて、見出しテキストが HTML の背景色と同じ色になるように設定します。
最後に、 text-shadow は要素のテキストコンテンツに影を適用します。 4 つの値は次のとおりです。
いろいろな値を試して、表示方法の変化を確認してみてください。
img {
display: block;
margin: 0 auto;
}
次に、画像を中央に配置して見栄えを良くします。本文のときと同じように、 margin: 0 auto のトリックを使うこともできます。しかし、 CSS を機能させるために追加の設定が必要になる違いがあります。
{{htmlelement("body")}} はブロック要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像はインライン要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、display: block; を使用して画像にブロックレベルの動作を指定する必要があります。
注: 上記の手順は、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) 画像編集ソフトを使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を <img> 要素に設定し、画像の大きさを変更します。
注: display: block; や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の display のリファレンスページを参照してください。
この記事のすべての手順に従っている場合は、次のようなページが表示されます。
(作成した結果はこちらから見ることができます。) もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。
ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}