今回の概要と目標
CSS入門講座1回目は、CSSの基本を学習し、CSSの記述方法や記述場所を理解しましょう。
最終的には、下記のようにHTMLの文字色を変更できるようになることが今回の目標です。
RERUN
CSSとは

CSSとは、
今見ているこの CreatorQuestのサイトもそうですが、視覚的な表現はHTMLでは行わず、このCSSを使ってWebページの レイアウトや 装飾などを行います。
また CSSを使えば簡易的な アニメーションを作ることも可能です。
CSSの開発環境
CSSもHTMLと同様で テキストエディタと呼ばれる文書が書けるソフトと、 ブラウザがあれば開発できます。

テキストエディタ
CSSもHTMLと同様で、Windowsに最初から入っている「 メモ帳」や、Macに最初から入ってる「 テキストエディット」でも開発は可能です。
ただ、やはりCSSを作るのに特化したソフトでは無いので、HTMLと同様でコードを書くのに特化しているテキストエディタを利用することがおすすめです。
最近ではマイクロソフト社開発している「 Visual Studio Code」がおすすめです。
- Visual Studio Codeオススメ
- マイクロソフト社が開発している非常に便利な無料のテキストエディタ。
拡張機能も豊富で、非常に高機能。
VSCodeと略されることが多い。
Visual Studio Codeダウロードページ
他にもさまざまテキストエディタがあるので、お好みのものをインストールしてください。
ブラウザ
ブラウザは、ホームページを閲覧する為のソフトです。
Windowsであれば最初から「Edge」、Macであれば「Safari」というブラウザが最初からインストールされています。
これらだけでも十分ですが、他にもよく使われているブラウザがあるので紹介します。
- Google Chromeオススメ
- Google社が出しているブラウザ。
ブラウザとしては後発組だが、機能を拡張できたりセキュリティも高く、業界では使っている人が多い
Googleのダウンロードページ
- Firefox
- Mozira社が出しているブラウザ。
機能を拡張できたり業界では使っている人が多いブラウザ
Firefoxのダウンロードページ
CSSの宣言方法
CSSでは
セレクタ(どこに)、
プロパティ(何を)、
値(どうするか)で、デザインを定義していきます。
セレクタには p
やh1
など、デザインを定義する要素を指定します。そして、その後に{
〜 }
を用いて、デザイン内容を定義するためブロックを記述し、その中に プロパティ: 値
の形式でデザインの指示を記述します。
なお、このデザインの指示のことを「
宣言」と呼び、「;(セミコロン)」で区切ることで複数の宣言を記述することができます。
ただし、最後の宣言の後ろに「;(セミコロン)」があってもエラーとはならないため、ケアレスミスを防ぐため、全ての宣言の後ろに「;(セミコロン)」を記述しておくことがおすすめです。
セレクタ { ・・・・・・ 宣言ブロックの開始
プロパティ : 値 ; ・・・・・・ 宣言
} ・・・・・・ 宣言ブロックの終了
例えば、「p
要素の文字の色を赤にする」ということをCSSで記述する場合は以下のようになります。
p {
color: red;
}
さらに、上記に加えて「p
要素の文字の大きさを 24px
にする」ということを追加する場合は以下のようになります。
p {
color: red;
font-size: 24px;
}
書き方のルール
CSSを記述する際は、記述方法をルール化することで、ケアレスミスを発見しやすくなります。
また、ルール化することで複数人でCSSを記述する際にも見やすくなるというメリットもあります。
一般的に多い記述のルールとしては、セクレタの後ろには半角スペースを1つ開けてから「{」を記述し改行を行います。各宣言の頭に半角スペース 2つを開けてからプロパティーを記述します。プロパティーの後ろに「:(コロン)」を付けて、半角スペースをひとつ開けてから値を記述し、宣言の最後に「;(セミコロン)」を書いて改行します。
そして「}」はインデントを付けず、セレクタの頭と揃えておくと見やすくなります。
: 半角スペース
↓: 改行
p {↓
color: #333;↓
font-size: 150%;↓
background-color: #efefef;↓
}↓
CSSの記述場所
CSSはHTMLのタグに直接記述する
- Inline Stylesheet
- スタイルを指定する要素に
style
属性を指定し、その属性値としてCSSを記述する方法。
特定の要素のみのデザイン管理が容易だが、ページ全体のスタイルを定義するのには向かない。
- Embedding Stylesheet
- HTMLの
head
要素内にstyle
要素を配置し、その要素内にCSSを記述する方法。
特定のページ内のデザイン管理が容易だが、サイト全体のスタイルを定義するのには向かない。
- Linkng Stylesheet
- CSS専用のファイル(拡張子「.css」)を作成し、
link
要素を用いてHTMLに読み込む方法。
複数ページのデザイン管理が容易だが、特定の要素ごとのスタイルの管理が複雑になる。
このような特徴がありますが、一般的には一番汎用性の高いリンキングスタイルを利用して、Webサイトを制作することが多いです。
ただ、Webページの表示速度を考慮したりと特定の箇所だけスタイルを変更したいときなどに、インラインスタイルなども利用することがあります。
インラインスタイル
インラインスタイルは、HTMLのグローバル属性である、style
属性を使って、その属性値に「プロパティと値」を指定して要素にスタイルを指示します。
<要素名 style="プロパティ: 値;">
インラインスタイルを使ってみよう
テキストエディタを開いて、下記の手順に従ってHTMLファイルを作成してみましょう。
- テキストエディタを開く。
- 「Chapter01」 › 「inline」フォルダ内の「index.html」を開く。
- 下記を参考にp要素にスタイルを追加する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインスタイルの練習</title>
</head>
<body>
<h1>インラインスタイルの練習</h1>
<p style="color: red">ここの文字を赤文字にする</p>
</body>
</html>
- 上書き保存
- 「Chapter01」> 「inline」フォルダ内の「index.html」をダブルクリック。
- ブラウザが開くので文字の色が赤くなっているかを確認する。
RERUN
エンベディングスタイル
HTMLのhead
要素内にstyle
要素記述し、その中に「セレクタ {プロパティ: 値;}」を記述してスタイルを指定します。
<head>
<style>
セレクタ {
プロパティ: 値;
}
</style>
</head>
エンべディングスタイルを使ってみよう
テキストエディタを開いて、下記の手順に従ってHTMLファイルを作成してみましょう。
- テキストエディタを開く。
- 「Chapter01」 › 「embedding」フォルダ内の「index.html」を開く。
- 下記を参考に
head
要素内にstyle
要素を追加しスタイルを記述する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エンベディングスタイルの練習</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>エンベディングスタイルの練習</h1>
<p>ここの文字を赤文字にする</p>
</body>
</html>
- 上書き保存
- 「Chapter01」> 「embedding」フォルダ内の「index.html」をダブルクリック。
- ブラウザが開くので文字の色が赤くなっているかを確認する。
RERUN
リンキングスタイル
リンクングスタイルはCSS専用のファイルを作成しそのファイルにCSSを記述する方法です。(拡張子: 「.css」)CSSファイルを読み込むには、head
要素内にlink
要素を記述し、そこにhref
属性で読み込むCSSファイルを指定します。
セレクタ {
プロパティ: 値;
}
<head>
<link rel="stylesheet" href="CSSファイルのパス">
</head>
リンキングスタイルを使ってみよう
テキストエディタを開いて、下記の手順に従ってCSSファイルとHTMLファイルを作成してみましょう。
- テキストエディタを開く。
- 「Chapter01」 › 「linking」フォルダ内に「style.css」を作成。
- 下記を参考に p要素を赤文字にするCSSを記述する。
p {
color: red;
}
- 上書き保存
- 「Chapter01」 › 「linking」フォルダ内の「index.html」を開く。
- 下記を参考に
head
要素内にlink
要素を追加しCSSファイルを読み込む。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンキングスタイルの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>リンキングスタイルの練習</h1>
<p>ここの文字を赤文字にする</p>
</body>
</html>
- 上書き保存
- 「Chapter01」 › 「linking」フォルダ内の「index.html」をダブルクリック。
- ブラウザが開くので文字の色が赤くなっているかを確認する。
RERUN
練習問題
「Chapter01」 › 「quest」フォルダ内にある「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
RERUN
まとめ
HTMLの基本は理解できましたか?
- CSSはWebページの 視覚表現を行う言語
- セレクタ{ プロパティ: 値} を使って記述する
- CSSの記述場所は インラインスタイル、 エンベディングスタイル、 リンキングスタイルがある