今回の概要と目標

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

今回のゴール

RERUN

新しいウインドウで表示する

CSSとは

HTML、CSS、JavaScriptの役割

CSSとは、 Cascading （ カスケーディング ） Style （ スタイル ） Sheets （ シート ） の略で、Webページの視覚的な表現を行うコンピュータ言語です。

今見ているこの CreatorQuestのサイトもそうですが、視覚的な表現はHTMLでは行わず、このCSSを使ってWebページの レイアウトや 装飾などを行います。

また CSSを使えば簡易的な アニメーションを作ることも可能です。

CSSの開発環境

CSSもHTMLと同様で テキストエディタと呼ばれる文書が書けるソフトと、 ブラウザがあれば開発できます。

テキストエディタとブラウザがあれ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 など、デザインを定義する要素を指定します。そして、その後に{ 〜 } を用いて、デザイン内容を定義するためブロックを記述し、その中に プロパティ: 値 の形式でデザインの指示を記述します。
なお、このデザインの指示のことを「 宣言」と呼び、「;（セミコロン）」で区切ることで複数の宣言を記述することができます。

ただし、最後の宣言の後ろに「;（セミコロン）」があってもエラーとはならないため、ケアレスミスを防ぐため、全ての宣言の後ろに「;（セミコロン）」を記述しておくことがおすすめです。

CSSの宣言
セレクタ（どこに） {　・・・・・・　宣言ブロックの開始
  プロパティ（何を）: 値（どうするか）;　・・・・・・　宣言
}　・・・・・・　宣言ブロックの終了

例えば、「p要素の文字の色を赤にする」ということをCSSで記述する場合は以下のようになります。

Chapter01/sample.css
p {
  color: red;
}

さらに、上記に加えて「p要素の文字の大きさを 24px にする」ということを追加する場合は以下のようになります。

Chapter01/sample.css
p {
  color: red;
  font-size: 24px;
}

書き方のルール

CSSを記述する際は、記述方法をルール化することで、ケアレスミスを発見しやすくなります。
また、ルール化することで複数人でCSSを記述する際にも見やすくなるというメリットもあります。

一般的に多い記述のルールとしては、セクレタの後ろには半角スペースを1つ開けてから「{」を記述し改行を行います。各宣言の頭に半角スペース 2つを開けてからプロパティーを記述します。プロパティーの後ろに「:（コロン）」を付けて、半角スペースをひとつ開けてから値を記述し、宣言の最後に「;（セミコロン）」を書いて改行します。
そして「}」はインデントを付けず、セレクタの頭と揃えておくと見やすくなります。

インデントの例
 :　半角スペース
↓:　改行

p {↓
  color: #333;↓
  font-size: 150%;↓
  background-color: #efefef;↓
}↓

CSSの記述場所

CSSはHTMLのタグに直接記述する Inline （ インライン ） Stylesheet （ スタイルシート ） か、head要素内に記述する Embedding （ エンベディング ） Stylesheet （ スタイルシート ） 、外部ファイルに記述する Linkng （ リンキング ） Stylesheet （ スタイルシート ） の3つの記述場所があります。

インラインスタイル、エンべディングスタイル、リンキングスタイルの特徴
Inline Stylesheet
スタイルを指定する要素にstyle 属性を指定し、その属性値としてCSSを記述する方法。
特定の要素のみのデザイン管理が容易だが、ページ全体のスタイルを定義するのには向かない。
Embedding Stylesheet
HTMLの head 要素内に style 要素を配置し、その要素内にCSSを記述する方法。
特定のページ内のデザイン管理が容易だが、サイト全体のスタイルを定義するのには向かない。
Linkng Stylesheet
CSS専用のファイル（拡張子「.css」）を作成し、link 要素を用いてHTMLに読み込む方法。
複数ページのデザイン管理が容易だが、特定の要素ごとのスタイルの管理が複雑になる。

このような特徴がありますが、一般的には一番汎用性の高いリンキングスタイルを利用して、Webサイトを制作することが多いです。

ただ、Webページの表示速度を考慮したりと特定の箇所だけスタイルを変更したいときなどに、インラインスタイルなども利用することがあります。

インラインスタイル

インラインスタイルは、HTMLのグローバル属性である、style属性を使って、その属性値に「プロパティと値」を指定して要素にスタイルを指示します。

インラインスタイルの記述方法
<要素名 style="プロパティ: 値;">

インラインスタイルを使ってみよう

テキストエディタを開いて、下記の手順に従ってHTMLファイルを作成してみましょう。

  1. テキストエディタを開く。
  2. 「Chapter01」 › 「inline」フォルダ内の「index.html」を開く。
  3. 下記を参考にp要素にスタイルを追加する。
Chapter01/inline/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>インラインスタイルの練習</title>
  </head>
  <body>
    <h1>インラインスタイルの練習</h1>
    <p style="color: red">ここの文字を赤文字にする</p>
  </body>
</html>
  1. 上書き保存
  2. 「Chapter01」> 「inline」フォルダ内の「index.html」をダブルクリック。
  3. ブラウザが開くので文字の色が赤くなっているかを確認する。
ブラウザでの表示例

RERUN

新しいウインドウで表示する

エンベディングスタイル

HTMLのhead要素内にstyle要素記述し、その中に「セレクタ {プロパティ: 値;}」を記述してスタイルを指定します。

エンベディングスタイルの記述方法
<head>
  <style>
    セレクタ {
      プロパティ: 値;
    }
  </style>
</head>

エンべディングスタイルを使ってみよう

テキストエディタを開いて、下記の手順に従ってHTMLファイルを作成してみましょう。

  1. テキストエディタを開く。
  2. 「Chapter01」 › 「embedding」フォルダ内の「index.html」を開く。
  3. 下記を参考に head 要素内に style 要素を追加しスタイルを記述する。
Chapter01/embedding/index.html
<!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>
  1. 上書き保存
  2. 「Chapter01」> 「embedding」フォルダ内の「index.html」をダブルクリック。
  3. ブラウザが開くので文字の色が赤くなっているかを確認する。
ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンキングスタイル

リンクングスタイルはCSS専用のファイルを作成しそのファイルにCSSを記述する方法です。（拡張子: 「.css」）CSSファイルを読み込むには、head要素内にlink要素を記述し、そこにhref属性で読み込むCSSファイルを指定します。

リンキングスタイルの記述方法（CSSファイル）
セレクタ {
  プロパティ: 値;
}
リンキングスタイルの記述方法（HTMLファイル）
<head>
  <link rel="stylesheet" href="CSSファイルのパス">
</head>

リンキングスタイルを使ってみよう

テキストエディタを開いて、下記の手順に従ってCSSファイルとHTMLファイルを作成してみましょう。

  1. テキストエディタを開く。
  2. 「Chapter01」 › 「linking」フォルダ内に「style.css」を作成。
  3. 下記を参考に p要素を赤文字にするCSSを記述する。
Chapter01/linkng/style.css
p {
  color: red;
}
  1. 上書き保存
  2. 「Chapter01」 › 「linking」フォルダ内の「index.html」を開く。
  3. 下記を参考に head 要素内に link 要素を追加しCSSファイルを読み込む。
Chapter01/linkng/index.html
<!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>
  1. 上書き保存
  2. 「Chapter01」 › 「linking」フォルダ内の「index.html」をダブルクリック。
  3. ブラウザが開くので文字の色が赤くなっているかを確認する。
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題

「Chapter01」 › 「quest」フォルダ内にある「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

完成イメージ

RERUN

新しいウインドウで表示する

解答例

まとめ

HTMLの基本は理解できましたか？

  • CSSはWebページの 視覚表現を行う言語
  • セレクタ{ プロパティ: 値} を使って記述する
  • CSSの記述場所は インラインスタイル、 エンベディングスタイル、 リンキングスタイルがある