今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。
もくじ
CSSとはWebページの見た目を整える言語
HTMLで作成したWebページのスタイルを整えるため、CSS(Cascading Style Sheets)という言語を利用します。
■人に例えたイメージ
具体的には「この見出しは背景をグレーで」「テキストを中央揃えで」「文字色は白で」などHTMLで定義した内容をどんな見た目に表示させるかをCSSで設定していきます。
CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
■CSSを適用していない場合のH1タグ。見た目が装飾されていない。
■CSSを適用した場合のH1タグ。見た目が装飾されている。
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> </head> <body> <h1 style="background-color:#085baf;color:#fff;text-align:center;font-size:50px;">CSSの書き方</h1> </body> </html> |
CSSの3つの書き方
CSSの書き方ですが、大きく3つの方式があります。
CSSの3つの書き方
- 【インラインスタイルシート方式】HTMLタグに直接CSSを書き込む形式
- 【内部スタイルシート】headタグにまとめてCSSを書き込む形式
- 【外部スタイルシート】外部ファイルにCSSをまとめて書き込む形式
それでは、順番に説明していきます。
【書き方1】インラインスタイルシートでのCSSの書き方
インラインスタイルシートは、HTMLタグに直接CSSを書き込むやり方です。 <h1 style="color:red;">のように、タグに直接CSSを書き込みます。
インラインスタイルシート形式でのCSSの書き方
- 【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
- 【例】 <h1 style="color:red;">赤色の見出し</h1>
後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。
■使用例
1 |
<h1 style="color:red;">はじめてのCSS</h1> |
■表示例
■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。
■使用例 文字色が白色で背景がライトブルーで枠線がスカイブルー
1 |
<h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1> |
■表示例
インラインスタイルシート形式の場合、以下の特徴があります。
インラインスタイルシート形式の特徴
- 各タグにそれぞれ個別に設定できる
- 「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる
【書き方2】内部スタイルシートでのCSSの書き方
内部スタイルシート形式の基本
内部スタイルシートは、headタグにまとめてCSSを書き込む形式です。<head>タグの中に下記のようにスタイルを記述します。
(※)セレクタとはスタイルを適用する対象のことです。たとえば、h1やpなどのhtmlタグなどが相当します。少し難しくなりますが、セレクタの詳細については「知っておきたいCSS セレクタの優先順位・詳細度・継承」を合わせてご参照ください。
(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。
(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート
複数のプロパティの設定をする場合、インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。
■内部スタイルシートでのCSS設定例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> h1{ color:white; background-color:lightblue; border:4px solid skyblue; } </style> </head> <body> <h1>はじめてのCSS</h1> </body> </html> |
■表示例
複数のセレクタに対してスタイルを設定
複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。
■設定例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> h1{ color:red; } h2{ color:orange } </style> </head> <body> <h1>はじめてのCSS</h1> <h2>CSSの書き方</h2> </body> </html> |
■表示例
h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。
内部スタイル形式は、下記のような特徴があります。
内部スタイルシート形式の特徴
- 1枚のWebページ全体にスタイルを適用できる
- 複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない)
id属性とclass属性を使ってセレクタに指定する方法
htmlの各タグにはid属性やclass属性というものが設定できます。内部スタイルシートや後述の外部スタイルシートでは、セレクタにid名やclass名を指定もできるので、あわせて覚えておきましょう。
■記述例 (内部スタイルシート形式で記述)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> #top-h{ background: red; } .blue-text{ color:blue; } </style> </head> <body> <h1 id="top-h">はじめてのCSS</h1> <p class="blue-text">この文章は青文字になっています</p> <h2 class="blue-text">この見出しも青文字になっています</h2> </body> </html> |
■表示例
例 htmlタグにid名やclass名を設定
<p class="blue-text">この文章は青色になります</p>
HTMLのタグを書く際に<HTML要素名 id="任意のid名">、あるいは、<HTML要素名 class="任意のclass名">と記述します。CSS側でidやclassをセレクタとして指定する際は、id名を「 #id名 」、class名を「 .class名 」で指定します。
●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承」
id名はHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。
idやclassを設定することでCSSでレイアウト装飾する際に「このid名がついているタグは背景を赤色にする」、あるいは「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。
【書き方3】外部スタイルシートでのCSSの書き方
最後に3つ目の書き方は、外部に作ったCSSファイルを参照する方式です。
まず、任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。次に、HTMLファイル側では作成したCSSファイルを参照する設定をします。

外部スタイルシートの読み込み設定
【手順1】CSSファイルにcssを記述する
まずは、「style.css」などのように拡張子をcssにしたcssファイルを作成します。cssファイルの中身には内部スタイルシート形式と同様にcssを記述します。
■外部CSSファイル(style.css)
1 2 3 4 |
@charset "UTF-8"; h1{ color:red; } |
書き方としては下記の通りです。
セレクタ1{
プロパティ1:値;
プロパティ2:値;
...
}
セレクタ2{
...
}
●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承」
(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。
【手順2】htmlファイルでCSSファイルを参照する設定をする
■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">
■HTMLファイルの例 cssフォルダにあるstyle.cssを参照
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>はじめてのCSS</h1> </body> </html> |
格納場所の指定方式は画像の格納場所の指定方法と同じです。(相対パスの参考:画像の格納場所の指定方法 | HTMLの基本とタグの一覧)
■表示例
外部スタイルシートの場合は、下記のような特徴があります。
外部スタイルシート形式の特徴
- 複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)
3つの方式の特徴まとめ
CSSの3つの書き方の特徴のまとめです。
方式 | メリット | デメリット |
---|---|---|
インラインスタイルシート | 各タグにそれぞれ個別に設定できる | タグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い |
内部スタイルシート | 1枚のWebページ全体にスタイルを適用できる | 複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない) |
外部スタイルシート(CSS)ファイル参照 | 各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む) | 慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。 |
なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。
競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。
詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。
主なCSSプロパティ
実際によく使うCSSの設定項目や設定値の例を下記に挙げます。詳しくはそれぞれのリンクで説明していますのであわせてご参考ください。
カテゴリ | プロパティ | 意味 |
---|---|---|
文字に関するスタイル | font-size | 文字の大きさ(フォントサイズ) |
color | 文字の色 | |
font-weight | 文字の太さ | |
font-family | 文字の字体 | |
text-decoration | テキストの装飾 | |
枠線に関するスタイル https://webst8.com/blog/css-border/ |
border | 枠線 |
border-(※各辺) | 枠線の各辺 (上top/下bottom/右right/左left) |
|
border-radius | 枠の丸さ | |
背景に関するスタイル https://webst8.com/blog/css-background/ |
background-color | 背景の色 |
background-image | 背景の画像 | |
background-repeat | 背景の画像の繰り返し | |
background-position | 背景画像の表示開始位置 | |
background-attachment | 背景画像の固定・移動 | |
background-size | 背景画像のサイズ | |
background | 背景全般 | |
横幅と高さに関するスタイル | width | 横幅 |
height | 高さ | |
余白に関するスタイル https://webst8.com/blog/css-padding/ https://webst8.com/blog/css-margin/ |
margin | 外部余白 |
margin-(※各辺) | 外部余白の各辺 (上top/下bottom/右right/左left) |
|
padding | 内部余白 | |
padding-(※各辺) | 内部余白の各辺 (上top/下bottom/右right/左left) |
|
ボックスサイズの算出方法を指定 | box-sizing | 枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるかどうか |
テキストに関するスタイル | text-align | 水平方向の位置 |
line-height | 行の高さ | |
表示に関するスタイル | display | 表示 |
位置に関するスタイル https://webst8.com/blog/css-position/ |
position | 位置 |
top | 上からの位置 | |
bottom | 下からの位置 | |
left | 左からの位置 | |
right | 右からの位置 | |
z-index | 重なりの順序指定 | |
横並び(浮動)に関するスタイル https://webst8.com/blog/css-float/ |
float | 横並び(浮動) |
clear | 横並び(浮動)の解除 | |
影に関するスタイル | box-shadow | ボックスの影 |
text-shadow | テキストの影 |
まとめ
まとめです。今回は、今回は、初心者の方を対象にCSSの基本的な書き方・ルールについて説明しました。
■人に例えたイメージ
CSSには「インラインスタイルシート形式」「内部スタイルシート形式」「外部スタイルシート形式」の3つ方式があります。
CSSの3つの書き方
- 【インラインスタイルシート方式】HTMLタグに直接CSSを書き込む形式
- 【内部スタイルシート】headタグにまとめてCSSを書き込む形式
- 【外部スタイルシート】外部ファイルにCSSをまとめて書き込む形式
なお、CSSを使った装飾の仕方全般については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。