CSS 基礎 1 - 環境構築/準備

目的

CSS の利用方法を解説します。

環境構築

CSS とは

そもそも、CSS (Cascading Style Sheets) は HTML の装飾に利用されます。

詳細は Mozilla が作成する CSS の基本を御覧ください。

準備

HTML ファイルは index.html とします。

index.html 内の <head> 要素内に <link href="style.css" rel="stylesheet"> を追加してください。 (もしかしたら最初からあるかも)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 略 -->
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <!-- 略 -->
  </body>
</html>

続いて、CSS ファイルを style.css として作成します。場所は index.html と同じにするのが楽です。

1
2
3
./
├index.html
└style.css

これですぐに CSS が利用できます。

動作確認

では、CSS がしっかりと動作するか見てみましょう。

まずは、この HTML 要素の色を変えてみましょう。

1
<p>りんご</p>

style.css を以下のようにしてください。

1
2
3
p {
  color: red;
}

これで、文字の色が赤色に変化することがわかると思います。この時点で色が変更していない場合は、環境構築がうまくいっていない可能性があるので、やり直してみてください。

指定方法

基本指定

先ほど、サラッと紹介しましたが、CSS は以下の方法で指定します。

1
2
3
要素 {
  変更: 内容;
}

要素は、p や body、全体を指定する :root などがあります。

ID, Class 指定

また、<p id="apple" class="fruits">りんご</p> このような ID は #apple。Class は .fruits のように指定できます。

また、<p style="color: blue">青色<p> のように直接指定することも可能です。

複数指定する場合は , で区切ります。

1
2
3
4
5
p,
#apple,
.fruits {
  background-color: blue;
}

子要素指定

連続して指定すると、子要素だけに CSS を適応できます。

1
2
3
p a {
  color: yellow;
}

1
2
3
4
5
6
7
<!-- <a> 要素が <p> 要素の中にあるときだけ黄色になる -->
<p><a>黄色</a></p>

<!-- <a> 要素が <p> 要素の中にないときは黄色にならない -->
<p>黄色じゃない</p>
<a>黄色じゃない</a>
<h1><a>黄色じゃない</a></h1>