スタイルを適用
まずは、前のページで用意した「index.html」を開き、<p>タグを使って以下のような4つの文章を書きましょう。
（これまでの通り<body>～</body>内に入力してください）
index.html
<p>これはロゴです</p> <p>これは文章です。</p> <p>これは赤い文章です。</p> <p>これも赤い文章です。</p>
以下のように3つの文章が全て同じスタイルで表示されているかと思います。
見本ページを新しいタブで開く1.全部のpタグ要素にスタイルを適用
いよいよCSSファイルを使ってhtmlにスタイルを適用していきます。まず、3つのpタグ全てに同じスタイルを適用しましょう。
前回用意した白紙のstyle.cssファイルを開いて、以下のコードを入力しましょう。
（CSSファイルは、htmlのときのような宣言文は特に必要ありません）
style.css
p{
text-align:center;
}
| text-align:○○; | 文字の横の位置を設定するプロパティ （左：left 中央：center 右：right） |
|---|
上のコードをstyle.cssに入力したら、保存し、index.htmlをブラウザで開いてみましょう。
見本ページを新しいタブで開く上のように4つの文字全てが中央に位置していれば、スタイルはうまく適用できています。
今回は、セレクタをp要素にしたので、pタグで囲まれたもの全てのtext-alignにcenterが適用されました。
うまく適用されなかった場合、様々な理由が考えられます。このページを参考にして間違いがないか確認しましょう。
2.IDを使って特定の要素にスタイルを適用
では、1つ目のp要素をロゴとして、大きな文字にしたい場合どうすればいいでしょう？
そのような、「ある一つの要素だけスタイルを変えて、他のものは変えない」といった場合、IDを使います。
まずは、index.htmlを開き、1つ目のpタグにIDをつけます。
index.html
<p>これはロゴです</p>
を
<p id="logo">これはロゴです</p>
のように書き加えます。
これで、このpタグには「logo」というIDが名づけられました。
もちろんこれだけでは、見た目には何も変化はありません。
次に、また「style.css」を開き、以下のコードを追加しましょう。
（さきほど入力したコードは消さずに、その下に書いてください）
（今後も追加するCSSのみを表示するので、style.cssの一番下に追加していって下さい）
style.css
p#logo{
font-size:32px;
}
| font-size:○px; | 文字の大きさを変更するプロパティ |
|---|
htmlファイルでは「id="logo"」と指定しましたが、CSSファイルでは「#logo」と、全く違った指定の仕方になっていることに気をつけましょう。
入力したら、index.htmlを開いてみましょう。
見本ページを新しいタブで開くlogoというID名のついたp要素だけの文字が大きくなりましたね。
3.Classを使って特定の要素にスタイルを適用
今度は、Class名をつけて、特定の要素にスタイルを適用してみましょう。
今回は3つ目と4つ目のp要素の文字を赤にします。まずは、先ほどID名をつけたようにhtmlファイルでClass名をつけます。
index.html
<p>これは赤い文字です。</p> <p>これも赤い文字です。</p>
を
<p class="red">これは赤い文字です。</p> <p class="red">これも赤い文字です。</p>
のように書き加えます。
これで、このpタグには「red」というClassが名づけられました。
次に、「style.css」を開き、行の一番下に以下のコードを追加しましょう。
style.css
p.red{
color:rgb(100%,0%,0%);
}
| color:○; | 文字の色を変更するプロパティ 指定方法はさまざまあります→詳細 （今回はRGB指定で、rgb(100%, 0%, 0%)は、赤(R)が100%、緑(G)と青(B)が0%という意味です） |
|---|
redというClass名がついた3つ目と4つ目のpタグのスタイルが変わりました。
このページで作成した全てのソース
ソースを表示
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p id="logo">これはロゴです</p> <p>これは文章です。</p> <p class="red">これは赤い文字です。</p> <p class="red">これも赤い文字です。</p> </body> </html>
style.css
p{
text-align:center;
}
p#logo{
font-size:32px;
}
p.red{
color:rgb(100%,0%,0%);
}