コンテンツへスキップ

はじめてのCSS

Hello CSS

CSSは（Cascading Style Sheets、カスケーディング・スタイル・シート）の略で、Webページのスタイルを指定するための言語です。スタイルシートとも呼ばれます。

CSSはHTMLと組み合わせて使用します。HTMLが情報を表示するためのもの対し、CSSはその情報を分かりやすくするために見栄え（装飾）を付ける役割になります。

CSSの書き方

CSSの説明

CSSを設定する3つの方法

CSSの使い方には3通りあります。

① 外部にCSSファイルを用意して読み込む

これは一番ポピュラーな方法です。HTMLとCSSを別々のファイルに書く方法です。

まずHTMLファイルに<head>~</head> の間に<link rel="stylesheet" href="style.css"> を書きます。

これを書くことによって同じディレクトリにあるstyle.cssという名前のCSSを読み込むことができます。

HTMLを以下のように書きます。

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>テキストが入ります</p>
</body>
</html>

CSSを以下のように書きます。

p {
  color:#f00;
  font-size:18px;
}

これをブラウザで表示すると以下のようになります。

テキストが入ります

② HTMLの<head>~</head>内にCSSを書く

HTMLの<head>~</haed>の間に<style>~</style>を記述し、この中にCSSを書いていく方法です。現在ではあまり使われませんが、使い方としてあることを覚えておきましょう。

<html>
<head>
  <style>
    p {
      color:#f00;
      font-size:18px;
    }
  </style>
</head>

<body>
  <p>テキストが入ります</p>
</body>
</html>

ブラウザで表示すると以下のようになります。①と同じです。

テキストが入ります

③ HTMLのタグに直接CSSを書く

HTMLのタグにstyle=””を書き、その中にCSSを直接記述する方法です。

書き方は以下のようになります。HTMLに書きます。

<html>
<head>
</head>
<body>
  <p style="color:#f00;font-size:18px;">テキストが入ります</p>
</body>
</html>

ブラウザで表示すると以下のようになります。①と②と同じです。

テキストが入ります
※ CSSの使い方にピックアップしているため①、②、③ともにあえてCSSの書き方に直接関係ない要素は省いています。

CSSの優先順位

CSSには書く順番によって優先順位があります。

同じものを二つ書くと下に書いたものが優先されます。

例えば下のような場合

<p>こんにちは、今日は良い天気ですね。</p>
p {
  color: red;
  color: blue;
}

ブラウザの表示では下のように文字が青色になり、赤色は無視されます。

こんにちは、今日は良い天気ですね。
<p>こんにちは、今日は良い天気ですね。</p>
p {
  color: red;
}
p {
  color: blue;
}
タグ: