CSSを使ってみよう

スタイルシートとは

※新規ウインドウで開きます PDF印刷Eメール

スタイルシート(Cascading Style Sheet：CSS)とは、HTML で作ったページの見栄えをもっとよくするための技術です。

今までは文字の色を変えたい時は<font color="">で囲み、大きさを変えたい時は<font size="">で囲んで設定してきました。
例えばサイトの模様替えをする時、これを修正したいとなると、１つ１つのファイルを見直し書き直す必要があります。

しかし、あらかじめスタイルシートで色の設定をしておけば、スタイルシート１つを修正するだけで一気に模様替えする事が可能です。

 

他にも画像の細かい位置設定や余白の設定など、HTMLでページを作るよりもさらに凝ったデザインに出来ます。

HTMLに慣れてきたら、スタイルシート(以下CSS)を使ったページ作りに挑戦してみましょう。


CSSを使う準備

CSSを使うには、使用するCSSファイルを作成し、HTMLファイルから呼び出す必要があります。
CSSファイルの作成

メモ帳などで、拡張子「.css」のファイルを作成します。
ファイル名は半角英数で入力して下さい。
内容は最初はどんなものでもかまいません。

例：style.css
HTMLファイルの設定 <head>〜</head>内の何処でもいいので、
<link rel="stylesheet" href＝"ファイル名.css" type="text/css">
と入力します。
href＝"〜"はリンク設定をする時の<a href＝"〜">や画像の<img src＝"〜">と同じく、HTMLファイルから見たCSSファイルの位置を入力します。
 

CSSの記述方法

※新規ウインドウで開きます PDF印刷Eメール

CSSの記述方法

CSSの記述は以下のような形になります。

p{color:#ff0000}

  • pの部分はスタイルを適用させたい対象「セレクタ」
  • colorの部分は適用させたいスタイルの属性「プロパティ」
  • #ff0000の部分は適用させたいスタイルの「値」

をそれぞれ入力します。
プロパティと値の間は:(コロン)で区切り、スタイルの内容を{ }で囲みます。

スタイルの適用方法

CSSを記述しHTMLに適用する方法は、

  • 同一の要素全てに同じスタイルを適用する
  • 部分的にスタイルを適用する

の２種類があります。
変化例 CSSの表記 HTMLの表記

全ページの

全ての段落(p要素)を

赤色にする。

 p{color:#ff0000}

<p>全ページの</p>

<p>全ての段落(p要素)を</p>

<p>赤色にする。</p>

一部の段落だけ

赤色

にする。

 .red{color:#ff0000}

<p>一部の段落だけ</p>

<p class="red">赤色</p>

<p>にする。</p>
部分的にスタイルを適用する時は「クラス」を使います。
CSSファイル上で先頭に「.(ピリオド)」を付けた形でクラス名を決め、
HTMLファイル上のスタイルを適用したい箇所からclass="〜"でクラス名を呼び出します。
例ではp要素でスタイルを呼び出していますが、
<h2 class="red">、<strong class="red">のように他の要素でも使うことが出来ます。

スタイル適用の応用

一つのセレクタに複数のスタイルを適用したり、
複数のセレクタに同じスタイルを適用することも出来ます。
変化例 CSSの表記 HTMLの表記
段落の
文字色を白くし、
背景色を赤くする。		 p{color:#ffffff; background-color:#ff0000;}

<p>段落の<br />
文字色を白くし、<br />
背景色を赤くする。</p>
複数のスタイルを適用する時は、スタイルを「;(セミコロン)」で区切ります。
スタイルが一つだけの時や、最後に記述したスタイルには不要ですが、
記述忘れを防ぐ為に常に記述するくせをつけておきましょう。
変化例 CSSの表記 HTMLの表記
太字と
見出し６
の文字色を青くする。		 strong,h6{color:#0000ff;}

<p><strong>太字</strong>と
<h6>見出し６</h6>
の文字色を青くする。

</p>
複数のセレクタに同一のスタイルを適用する時は、セレクタを「,(カンマ)」で区切り記述します。
変化例 CSSの表記 HTMLの表記

見出し４の中の
強調文字だけ
緑色にする

 h4 em{color:#ff339966;} <h4>見出し４の中の<br />
<em>強調文字</em>だけ<br />
緑色にする</h4>
要素の中の特定の要素にだけスタイルを適用する時は、
セレクタを半角スペースで区切って記述します。
   

スタイル関連のHTML

※新規ウインドウで開きます PDF印刷Eメール

スタイル適用の際に使用するHTMLタグ
段落や画像をグループとしてひとまとめにしたり、単語など特定の範囲を指定しておくとより凝ったスタイルの適用が可能となります。
使用タグ 意味合い 書き方の例 CSSで「背景色緑」を指定した変化例
<div> 特定の範囲をひとつのグループとしてひとまとめにする。
囲まれた範囲はブロックレベル要素となり、
段落と同じように前後が改行される。

<div>

<h4>見出し４</h4>
<p>段落１</p>
<p>段落２</p>

</div>

見出し４

段落１

段落２
<span> 特定の範囲をひとつのグループとしてひとまとめにする。
囲まれた範囲はインライン要素となり、
前後は改行されない。		 <h4>見出し<span>４</span></h4>
<p>段落<span>１</span></p>
<p>段落<span>２</span></p>

見出し４

段落１

段落２
   

CSS上でのサイズ指定

※新規ウインドウで開きます PDF印刷Eメール

CSSでサイズを指定する時は数値と単位を記述します。

単位には相対単位と絶対単位とがあり、
相対単位は閲覧者のOSやブラウザの設定・環境に応じて可変し、
絶対単位はOSやブラウザの設定・環境の影響を受けない単位です。

主に利用されているのは相対単位です。
用途に合わせて使い分けましょう。


相対指定
単位 説明
px ピクセル。画面の解像度によって表示サイズが異なります。
em エム。使用しているフォントの高さを基準にします。
ex エックスハイト。使用しているフォントの英小文字「x」の高さを基準にします。
% パーセント。設定する対象によって基準が異なります。

絶対指定
単位 説明
mm ミリメートル。
cm センチメートル。
in インチ。１インチは約2.54cm。
pt ポイント。１ポイントは1/72インチ。
pc パイカ。１パイカは12ポイント。