【CSS入門】 まずはHTMLにCSSを読み込ませよう
CSS (Cascading Style Sheets) は、HTMLなどの見た目を整えるために用いる言語です。
まずはCSSを作成して、HTMLに読み込ませましょう。
読み込み方の種類
CSSの読み込み方は2つあります。
- CSSファイルを作成して、HTML側から読み込む
- HTMLファイルに直接書く
オススメは、CSSファイルを読み込む方法です。理由は、
- 他のHTMLファイルでも使い回せる
- HTMLファイルが肥大化するのを防げる
- CSSが書かれている場所を統一できる -> 管理しやすい
という理由です。しかし、HTMLに直接書くこともなくはないので、ここでは両方紹介します。
HTMLから読み込む方法
CSSファイルを作成
まずはcssファイルを作り、とりあえず適当に書いてみます。今回は、main.cssというファイル名で作成します。
/* pタグの文字色を変える */
p {
color: red;
}
とりあえず、pタグのなにかの色が変わるらしいということは分かるかと思います。
HTMLから読み込み
次に、このファイルをHTMLで読み込みます。
読み込みは、<link rel="stylesheet" href="CSSがあるURL">で読み込みます。今回はindex.htmlを、cssがあるフォルダと同じフォルダに作成して読み込ませてみましょう。
読み込みを書く場所は、headの子要素か、bodyの最後の方の子要素になる位置のどちらかが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- CSSの読み込み -->
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<p>sample text</p>
</body>
</html>
もしHTMLの構造がまだ把握できていない場合、先にHTMLをある程度書けるようになることを推奨します。
作成したら、HTMLファイルをブラウザで表示してみましょう。
See the Pen css sample by Totori (@souki202) on CodePen.
上のように、文字が赤くなっていればうまく動作しています!
HTMLに埋め込む方法
この場合、HTML側でstyleタグを利用します。
linkでの読み込みと同様に、要素を書く場所はheadの子要素か、bodyの最後の方の子要素になる位置のどちらかが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Document</title>
<!-- CSSを定義 -->
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>sample text</p>
</body>
</html>
作成したら、HTMLファイルをブラウザで表示してみましょう。
See the Pen css sample by Totori (@souki202) on CodePen.
上のように、文字が赤くなっていればうまく動作しています!
まとめ
CSSはHTMLなどの見た目を整えるために利用します。HTMLだけでは単に文字と画像が並んでいるだけのものしか作成できませんが、CSSと合わせることで美しいサイトを作成できます。
次からはCSSの基本的な構造を見ていきましょう!
