CSS の基本
CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか？そのような場所でコンテンツを画面に表示させるにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。
それでは CSS とは何でしょうか？
HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。
p {
color: red;
}それでは試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを style.css として styles ディレクトリに保存します。
しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、ファイルを扱うと HTML の基本を読み、まず何をする必要があるのかを見てください)
index.htmlファイルを開き、head (<head>タグと</head>タグの間) に以下の行を貼り付けます<link href="styles/style.css" rel="stylesheet" type="text/css">index.htmlを保存し、ブラウザで読み込みます。このように表示されるでしょう :
段落テキスト(<p>と</p>で囲んだ文字)が赤色になりましたか？おめでとうございます！今はじめて CSS を書き、成功しました！
CSS ルールセットの構造
上記の CSS をもう少し詳しく見てみましょう:
全体の構造はルールセットと呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :
- セレクタ (selector)
- ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。
- 宣言 (declaration)
color: red;のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定します。- プロパティ (property)
- 指定された HTML 要素のスタイルを設定する方法 (この場合
colorは<p>要素のプロパティです)。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ページでは、1つのIDにつき1つの要素（そしてもちろん1つの要素につき1つのID）しか許されません。 | #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 ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。
- まず最初に、どこかの安全に保存した Google フォントの出力を見つけてください。
<link>要素をindex.htmlの上部 (<head>タグと</head>タグの間) のどこかに追加します。これは次のようになります:<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。
- 次に
style.cssファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。 - 代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の
font-family行に置き換えます。(このfont-familyは、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<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 */ }注: 「px」の意味を説明するコメントを追加しました。
/*と*/の間にある CSS ドキュメント内のものは CSS コメントです。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。 - HTML ボディ (
<h1>、<li>、<p>) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します:h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
これらの px 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:
ボックス、ボックス、ボックスについてのすべてのこと
CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。
当然のことながら、CSS レイアウトは主にボックスモデルに基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:
padding: コンテンツのまわりのスペース (例えば段落テキストの周り)border:paddingのすぐ外側にある実線margin: 要素の外側の周りの空間
このセクションでは次のものを使用します :
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は利用可能な水平スペースを左右に均等に分割します)。margin の構文で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。background-color: #FF9500;— 前と同じようにこれは要素の背景色を設定します。このプロジェクトではbodyにhtml要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。whiteや何でも好きなものを自由に使用してください。padding: 0 20px 20px 20px;—paddingに 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。marginと同様に、パディング構文で説明されているように、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 をまったく適用していなくても、ブラウザが <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; を使用して画像のブロックレベルの動作を指定する必要があります。
注: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <img> 要素の width プロパティを小さな値、例えば 400 px; に設定することで、 CSS を使用してイメージのサイズを変更します。
注: あなたがまだ display: block; とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、display のリファレンスページを参照してください。
まとめ
この記事のすべての手順に従っている場合は、次のようなページが表示されます (このリンクから我々が作成したバージョンを見ることもできます)。
もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。
ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。