CSS(Cascading Style Sheets)とは
Webページのスタイルを指定するための言語です。
スタイルとは、例えば
- 文字の大きさ
- 文字の色
- 背景色
などがあります。
CSSの指定方法
3種類あります。
- 要素に直接指定する
- headタグ内にstyle要素を追加して指定する
- css用ファイルで指定する。
1.CSS指定(要素に直接指定する)
<p style="font-size: 20px; font-weight: bold;">あいうえお</p>
上記は、フォントサイズを20pxに、フォントを太字に指定しています。
CSSは、以下のようにプロパティと値で構成されます。
style="プロパティ名: 値;"
プロパティ（property）とは適用するスタイルの種類のことです。
2.CSS指定(headタグ内にstyle要素を追加して指定する)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- ここから -->
<style>
h1 {
font-size: 100px;
}
</style>
<!-- ここまで -->
</head>
<body>
<h1>あいうえお</h1>
</body>
</html>
上記は、h1タグに対してフォントサイズを100pxに指定しています。
この場合のCSSの書き方は、以下のようになります。
セレクタ {
プロパティ名: 値;
プロパティ名: 値;
}
セレクタとは、どの要素にという指定をするものです。
後ほど解説します。
3. CSS指定(css用ファイルで指定する)
pタグの背景色を赤に指定する例
headタグ内にのlinkタグで外部作成CSSファイルのリンク先を指定します。
以下のようにheadタグ内に記述します。
<link rel="stylesheet" href="cssファイル名" />
セレクタ
- 基本セレクター
- 要素型セレクター
- クラスセレクター
- ID セレクター
- グループ化
- セレクターリスト
- 疑似
- 子孫結合子
- 子結合子
MDNの紹介
CSSのプロパティなどについて詳細を確認したい場合、MDNを見るとよいと思います。
VSCodeで標準のリファレンスとして搭載されていますのです活用しましょう。
（ブラウザ別の対応なども記載されていますね。）
演習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- ↓↓↓ ここから -->
<link rel="stylesheet" href="style.css" />
<!-- ↑↑↑ ここまで -->
</head>
<body>
<div class="hira">
<h2>あいうえお</h2>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
<div class="alpha">
<h2>aiueo</h2>
<p>kakikukeko</p>
<p>sasisuseso</p>
</div>
<div class="number">
<h3>1,2,3,4,5,6,7,8,9,0</h3>
<p>10,20,30,40,50,60,70,80,90,100</p>
<p>100,200,300,400,500,600,700,800,900,1000</p>
</div>
</body>
</html>
上記HTMLにCSSを指定し、下記表示に近づけるように実装してみてください。
※h2タグのフォントはＭＳ Ｐゴシックを指定します。
以下のように指定しました。
style.css
.hira {
background-color: red;
text-align: left;
}
.alpha {
background-color: gray;
text-align: right;
}
.number {
background-color: skyblue;
text-align: center;
}
h2 {
font-style: oblique;
font-family: "ＭＳ Ｐゴシック";
}