CSS/スタイルシートの基本

CSS(Cascading Style Sheets)を使って文字色を変えたり、表示位置を変えるなど、表示方法を変えことことができます。

本ページでは、CSSの使い方からボックス、フレックスボックスなどについて説明しています。

スタイルシートのCSS

色や形などの表示形式を制御する言語を、スタイルシート言語と言います。CSSは、ブラウザ上の表示形式を制御するスタイルシート言語の1つです。

Webページでは、マークアップして文書を記述するHTMLと、表示形式を定義するCSSで、役割を分けて記述するのが一般的です。

以下は、文字の色をCSSで記述した例です。

【CSSの記述例】
h1 {
  color: red;
}

p {
  color: blue;
}

上記は、HTMLのh1要素で文字色を赤色、p要素は青色で表示するように定義しています。

このファイルを、cssなどのフォルダを作成してファイル名style.cssなどで保存します。フォルダ名やファイル名は好きな名前で大丈夫です。

メモ帳で保存する場合、「ファイルの種類」で「すべてのファイル」を選んでからファイル名style.cssなどと入力して保存する必要があります。

HTMLへのCSS反映

以下は、CSSを反映させるためのHTML記述例です。

【CSSを使うHTMLの記述例】
<link rel="stylesheet" href="css/style.css">
<h1>「キャンプ入門サイト」</h1>

<p>1.キャンプで用意するもの</p>
<ul>
<li>テント</li>
<li>寝袋</li>
</ul>

<p>2.着いてすぐに行う事</p>
<ul>
<li>テント設営</li>
<li>バーベキューの用意</li>
</ul>

<p>3.後片付け</p>
<ul>
<li>バーベキューの片づけ</li>
<li>テント収容</li>
</ul>

最初の行が、利用するCSSを指定する記述です。css/style.css部分で、保存したCSSのフォルダとファイル名を指定します。

2行目のh1要素は、CSSで赤色を定義した部分になります。次のp要素も、CSSで青色を定義した部分になります。

ブラウザで表示すると、以下のように表示されます。

ブラウザの画面には、h1要素が赤、p要素が青で表示されています。

<br>がなくても改行されているのは、h1要素やp要素が最初から意味を持っているためです。h1要素は見出し、p要素は段落を示すため、それぞれ改行して上下に余白を取って表示されます。

また、ul要素は番号が付かないリストを示し、li要素は実際のリスト項目を示すため、頭に「・」を付けて改行して表示されます。

ルールセット

CSSで以下の記述があったとします。

【CSSルールセット】
h1 {
  color: red;
}

これをルールセットと呼びます。ルールセットは、以下で構成されています。

【ルールセットの構成】
項目 上記での例 説明
セレクタ h1 定義する要素を指定します。
プロパティ color 色などの定義するスタイルを指定します。
プロパティ値 red プロパティに対する値です。
宣言 color:red; プロパティ + プロパティ値です。

各ルールセットは、{}(中括弧)で囲む必要があります。ルールセットは、複数記述できます。

プロパティと値の間は、:(コロン)で区切ります。各宣言の最後は、;(セミコロン)が必要です。

1つのルールセットの中に、複数の宣言を記述できます。複数の宣言で同じプロパティがあった場合、後で記述された宣言が有効になります。

ボックス

文字の色など、簡単な指定はすぐに理解できると思いますが、作り始めてすぐわかりにくいと思う部分がボックスです。

ボックスはいわゆる箱で、CSSで箱の形や背景などを決めます。HTMLでその箱を配置していくと、CSSで定義した箱の形や背景が表示できるようになります。

2つのボックスが縦に並んでいます。上のボックスは、背景が青で文字色が白です。下のボックスは、背景が緑で文字色が黒です。

h1やp、liなどもすべてボックスです。先ほど作ったHTMLでは、以下のようにボックスが配置されています。

ブラウザの画面です。1h、p、li要素がそれぞれボックスであることを説明しています。

Webページでは、ボックスを利用して表示位置などの配置を整えます。

フレックスボックス

ボックスは、そのまま記述すると前のボックスの下に表示されることも多いのですが、左右に並べて表示させることもできます。この方法の1つに、フレックスボックスがあります。

先ほどの縦に並んだ2つのボックスが左に表示されています。フレックスボックスを利用した例が右に表示されていて、2つのボックスは横に並んでいます。

フレックスボックスを利用するためには、フレックスコンテナと呼ばれるボックスを作ります。その中に配置されたボックスは、フレックスアイテムと呼ばれます。フレックスアイテムは、デフォルトでは左から右に順番に並べて表示されます。

フレックスコンテナの中に2つのフレックスアイテムがあり、横に並んで表示されています。

フレックスボックスを利用すると、以下のように1.2.3.項の本文を左に表示して、リストを右サイドバーにすることも可能です。

ブラウザの画面で、本文が左に表示されていてリストが右に表示されています。

display:flex

フレックスボックスを使うためには、CSSでdisplayプロパティを使います。

以下は、記述例です。

【フレックスボックスのCSS記述例】
main {
  display: flex;
}

h1 {
  text-align: center;
  color: red;
}

p {
  color: blue;
}

footer {
  text-align: center;
  color: red;
}

赤字部分により、mainがフレックスコンテナになります。フレックスコンテナ内にボックスを作るとフレックスアイテムとなり、横に並べて表示されるようになります。

次は、HTMLです。

【フレックスボックスのHTML記述例】
<link rel="stylesheet" href="css/style.css">

<body>
<h1>「キャンプ入門サイト」</h1>

<main>

<div>
<p>1.キャンプで用意するもの</p>
<p>2.着いてすぐに行う事</p>
<p>3.後片付け</p>
</div>

<ul>
<li>テント</li>
<li>寝袋</li>
<li>テント設営</li>
<li>バーベキューの用意</li>
<li>バーベキューの片づけ</li>
<li>テント収容</li>
</ul>

</main>

<footer>Copyright</footer>

</body>

mainは、ページ内の主要部分を示します。また、footerはフッターで、ページの最後などで使われます。

青字のdiv要素と緑字のul要素は、赤字のmain要素内に作成されたフレックスアイテムです。このため、左から右に横並びで表示されます。

これらは、以下のように構成されています。

ブラウザの画面で、div要素もul要素もフレックスアイテムであることを説明しています。2つのフレックスアイテムは、ブラウザ画面で横に並んで表示されています。

</main>でフレックスコンテナは終了しているため、以降のfooter要素(Copyright部分)は並べて表示されず、下に表示されています。

文字の色はHTMLでも指定できますが推奨されません

文字の色は、以下のようにHTMLでも指定出来ます。

【HTMLでの文字色指定例】
<font color=red>「キャンプ入門サイト」</font><br>
<br>
<font color=blue>1.キャンプで用意するもの</font><br>
 テント<br>
 寝袋<br>
<br>
<font color=blue>2.着いてすぐに行う事</font><br>
 テント設営<br>
 バーベキューの用意<br>
<br>
<font color=blue>3.後片付け</font><br>
 バーベキューの片づけ<br>
 テント収容

colorでredと指定した以降の文字は赤、blueと指定した以降の文字は青で表示されます。</font>でタグを閉じると、赤色や青色が無効になります。

この方法は、複数の見出しや段落を同じ色にしたい場合でも、それぞれfontで指定する必要があります。これは、本格的にページを書く時に面倒です。このため、色に限らず表現方法をHTMLで指定することは推奨されていません。

サイト内で関連ページをチェック

ホームページ作成「HTMLの基本