CSSの役割・書き方を解説
- ［更新日］2021/08/24
- ［公開日］2014/03/13
- 2024 view
目次
CSSの役割・書き方を解説
WEBサイトを作る上で、CSSはデザイン・見せ方をコントロールする役割を担っています。
リカイゼンでは、サイトコーディング実績を多数持つ会社の中から、ご要望に合う会社を厳選して無料でご紹介します。
お電話でのご相談は
03-6427-5422
WEBサイトの構築において、CSSはHTMLとセットで扱われます。WordPressなどのCMSを使っている人はあまり触る機会がない部分ではありますが、CSSの知識があるとWEBサイト制作を外注する際にも有利です。
CSSとは、Cascading Style Sheetsの略で、スタイルシートとも呼ばれます。WEBページのなかで使われる文字の色・大きさ・フォントやレイアウトの余白部分の指定など、デザイン面の見栄えを良くするために使われています。
WordPressなどのCMSを使っている人はあまり触る機会がない部分ではありますが、CSSの知識があるとWEBサイト制作を外注する際にも有利です。
本記事ではCSSについて理解を深めていきましょう。
企画段階からのご相談も受付中！気軽に相談できるプロをご紹介いたします。
受付時間：平日10:00～18:30
1. CSSとは
なんとなく難しいイメージがあるCSSですが、HTMLの基本知識がある人ならば比較的簡単に理解できます。
まずはCSSの概要やHTMLとの違いについて解説します。
CSSとは
WEBサイトを制作する際は、一般的にHTMLとCSSはセットで使います。WEBサイトのデザインにCSSがよく使用される理由としては、以下の2つがあげられます。
使い勝手のよさがCSSのメリットといえるでしょう。
HTMLとCSSの違い
HTMLがWEBサイトの骨組みとするならば、CSSはWEBサイトの装飾です。
HTMLで基本的なWEBサイトの構成要素を表現し、レイアウトや文字色、見出しの色、背景などのデザイン面をCSSで表現します。
● HTMLだけで記述した場合
<h2>これは見出しです</h2>
● CSSも使って記述した場合（見出しの色を赤にする）
<h2 style="color: red";>これは見出しです</h2>
HTMLだけで記述すると、文字装飾やレイアウトといったデザインは何もつきません。テキストファイルをそのまま表示したような、平坦で簡素なWEBページになってしまいます。
検索エンジンにコンテンツの中身を伝える、という意味では問題ありませんが、ユーザー、つまり人間から見ると面白みに欠けるページに見えるでしょう。
よって多くのWEBサイトではCSSを使ってデザイン部分の指定を行います。「見出しは青背景に白文字、文字サイズも大きくする」「強調したいテキストは赤」のように、HTMLの要素にCSSでデザインを加え、ユーザー目線でも魅力のあるWEBサイトを構築します。
なおHTMLタグを使って文字色や背景などの装飾も可能です。
1990年代の頃からWEBサイトを制作していた人なら、HTMLタグでWEBデザインをした経験があるのではないでしょうか？
HTMLタグを使った装飾は、以下のようにして記述します。
● fontタグで文字色を変える場合
<font color="red">これは例文です</font>
とはいえ、現在はHTMLタグを使ってのデザインはほとんどされていません。
というのもHTML5以降、上記のfontタグやflameタグなど、それまでのWEBデザインに使用されていたHTMLタグの多くが廃止となったためです。
HTMLタグで指定した装飾は、現在も表示自体はされていますが、いつ無効になるかわかりません。
またHTMLタグは要素ごとにスタイル指定をしていく方法になるため、後からの修正も個々で行う必要があります。全ページに一括でデザインを適用させることもできないため、管理も非常に煩雑。使用するメリットがほとんどありません。
よってHTMLでの装飾・デザインは避け、基本的にCSSを利用するようにしましょう。
CSSを構成している要素
CSSは「セレクタ」「プロパティ」「値」の3要素で構成されています。（例）見出しの色を赤にする場合
h2{color: red;}
- セレクタ：例での「h2」。どの要素にスタイルを適用するか指定する部分
- プロパティ：例での「color」。スタイルの種類を指定する部分
- 値：例での「red」。スタイルの内容を指定する部分
なおセレクタといっても「この話題のh2とあの話題のh2で別々の装飾にしたい」といった場合もあるでしょう。その場合は「h2.sample{color: red; ｝」のようにクラス名（.sampleの部分）をつけるとデザインを分けられます。セレクタの指定方法は多数あるため詳細は割愛しますが、興味のある方は調べてみてください。
さて、ここで気になるのがプロパティの種類、つまりどのような装飾・デザインをCSSで実現できるのかかと思います。CSSで指定できるプロパティも数多くあるため、ここではよく使用するものをいくつか紹介します。
- color：文字色を指定する。
- background-color：背景色を指定する。
- font-size：フォントのサイズを指定する。
- width：ボックスなどの要素の幅を指定する。
- height：要素の高さを指定する。
- margin：要素のマージン（外側の余白）を指定をする。
- padding：要素のパディング（内側の余白）の指定をする。
- text-align：左寄せ、右寄せなど行のそろえ位置を指定する。
なお文字色や背景色などのカラーの値にはカラーコードなども使えます。CSSで使える色の指定方法は以下の4つです。
| 色キーワード | red、blueなどの特定の色を表すキーワード |
|---|---|
| 16進数カラーコード | #000000などの16進数を使ったカラーコード |
| RGB | rgba(255, 255, 255, 1)などのRGB表記。過度も指定できる |
| HSL | hsla(360, 100%, 100%, 1)などのHSL表記。透過度も指定できる |
またサイズや位置の指定にも以下の4つが使えます。
| px | 画素数で指定。他の要素に左右されない絶対値指定ができる |
|---|---|
| % | 親要素に対する%。相対指定ができる |
| em | 1em=100%。%と同じく親要素に対する相対指定ができる |
| rem | htmlセレクタ（ルート要素）に対する相対指定ができる |
CSSを含むサイトコーディングのご相談は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。
お電話でのご相談は
03-6427-5422
受付時間：平日10:00～18:30
2. CSSの書き方
CSSの書き方は3つあります。
- headタグに書き込む
- インラインCSSで書く
- 外部ファイルとして書く
headタグに書き込む
| CSS記述場所 | headタグ内 |
|---|---|
| CSS適用範囲 | 記述されたWEBページ全体 |
1つ目は、HTML内の<head>〜</head>の間に書く方法です。
headタグとは、metaタグやtitleタグなどページ情報が記述されてある部分で、多くはHTML上部に配置されています。
headタグ内に書き込む場合、styleタグを使って以下のように記述します。
<head>
<style>
セレクタ1{
プロパティ1:値1;
プロパティ2:値2;
…}
セレクタ1{
プロパティ1:値1;
プロパティ2:値2;
…}
・
・
</style>
</head>
例えば「h2は赤、h3はオレンジ」で指定したいなら以下のようになります。
<head>
<meta charset="utf-8">
<title>リカイゼン</title>
<style>
h2 {color: red; }
h3 {color: orange; }
</style>
</head>
headタグ内ならどこに書いてもよいのですが、例のようにtitleタグなども一緒に記述される部分のため、</head>の直前に入れると後から見てもわかりやすくなるでしょう。head内でCSSを設定すると、そのページ全体にスタイルが適用されます。よって独立したデザインの1ページを作成したいときに有効な方法です。
ただし、この方法では複数ページの一括指定はできません。同じデザインのページを複数作成したい場合は、後述する「外部ファイルとして書く」方法をおすすめします。
インラインCSSで書く
| CSS記述場所 | 各HTMLタグ内 |
|---|---|
| CSS適用範囲 | タグで指定した箇所 |
2つ目はインラインCSSで書く方法です。
HTML内のデザイン指定したい部分に「<セレクタ style=" プロパティr: 値 ">」の形で記述します。
<h2 style=" color: red ">赤色の見出し2になります</h2>
<h3 style=" color: orange ">オレンジの見出し3になります</h3>
この方法の特徴は、適用範囲が各タグのみという点です。上記の例でいえば、見出しの色が赤に変わるのは<h2 style…>〜</h2>で囲われた部分だけであり、他のh2にはスタイルが適用されません。
またheadタグ内で同じセレクタのスタイルを指定していても、インラインの記述が優先されます。よって部分的に文字の色やサイズ、デザインを変えたいときに使える方法です。
ただし、全セレクタに一括でデザインを指定できず、修正したいときも手間がかかります。使うケースは少ないでしょう。
外部ファイルとして書く
| CSS記述場所 | HTMLとは別ファイルを作成する |
|---|---|
| CSS適用範囲 | 複数ページ |
3つ目は外部CSSとして書く方法です。
CSSをHTML内に書きこむのではなく、”style.css”のように別のCSSファイルを作成します。
CSSファイルの書き方は、headタグ内に記述する方法と基本的には同じです。
セレクタ1{
プロパティ1:値1;
プロパティ2:値2;
…}
宣言やstyleタグは必要ありません。またファイルの作成もテキストファイルで記述したものを拡張子「css」で保存するだけです。
ファイル名：rekaizen_style.css
h2 {color: red; }
h3 {color: orange; }
なお外部ファイルをHTMLで読み込みたい場合は、headタグ内にlinkタグで以下のように記述します（下記はHTMLとCSSファイルが同じディレクトリに入っている前提）。
<head>
<meta charset="utf-8">
<title>リカイゼン</title>
<link rel=“stylesheet” href=“rekaizen_style.css”>
</style>
</head>
なお、linkタグは、次のような意味があります。● rel：ページとhrefで記述したURLのファイルとの関係性を指定
● href：ファイルの場所
つまり「このページに適用するスタイルシートは、rekaizen_style.cssというファイルに書いてあります」という意味になるわけです。
外部ファイルを使用する方法を使えば、linkタグを一行追加するだけでサイト内の複数ページに同一デザインを適用させられます。
デザインの変更や修正をしたい場合もCSSファイルの更新だけで済み、管理もしやすいことから、3つのなかで最もポピュラーな方法といえるでしょう。
また外部ファイルでデザインを読み込んでも、インラインCSSを使えば個別のデザイン変更も可能です。というのも、CSSは同じスタイル指定があった場合、基本的には以下の原則にそって優先順位を決定するためです。
● 下に書かれたほうを優先する
● インラインで書かれたものを最優先する
ここで「styleタグでhead内に記述する方法と外部ファイルの読み込みはどっちが優先？」「外部ファイルを複数読み込む場合は？」と思われるかもしれませんが、その場合も下に書いた方（</head>に近い方）が優先されます。
ブラウザは上から下に読むので、後から書いたものに上書きされると考えるとわかりやすいでしょう。
CSSを含むサイトコーディングのご相談は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。
お電話でのご相談は
03-6427-5422
受付時間：平日10:00～18:30
3. CSSを含めたWEBサイト制作の外注ポイント
企業サイトの場合、制作を外注するほうが多いでしょう。CSSを含めてWEBサイトの制作を依頼する際のポイントを紹介します。
CSSを知っておくメリット
CSSの基本知識があると、サイトデザインを修正したい場合に、CSSのみの更新でよいのか、HTMLもあわせて修正が必要かなどが理解でき、指示がしやすくなります。
先に書いてきたようにCSSの記述場所は3つあります。
修正・管理のしやすさの上でメリットが大きい外部ファイルを作成する方法が一般的ではありますが、一応CSSの記述場所も確認しておくほうがよいでしょう。WEBサイト運営がスタートしてから自社でデザインを修正したくなった場合に役立ちます。
またWEBサイトの制作において、CSSだけの外注はあまり多くありません。CSSの適用にはHTMLの記述が不可欠なため、基本的にはHTMLとCSSはセットでの依頼になります。
HTMLの基本知識だけでなく、CSSについても知っておいたほうが、打ち合わせなどもスムーズに進むでしょう。
CSSではできないこと
最近のWEBサイトはアニメーションなどを付加しているものが多くなっていますが、CSSでは動的なデザインには対応できないので注意してください。
● スクロールに応じてアニメーションをつけたい
● ボタンを押すと色やサイズが変わるようにしたい
上記のようなデザインを使用したい場合はJavaScriptを利用します。言い換えると、人気の動的なサイトを作りたいならHTML＋CSSだけでは難しく、JavaScriptもプラスする必要があるわけですね。
WEBサイトの制作を外注する際は、依頼者側にこのようなサイト構造の知識があると外注先選びでの失敗が避けやすくなります。
CSSでもJavaScriptでも、担当者自らがサイト構築できるほどの知識を持つ必要はありません。しかし「こういう場合はCSSだけでは足りないな」という知識があるだけで、JavaScriptに知見のある制作会社を探す必要性が理解でき、また実績を見るときの視点も変わります。
ちょっとしたことですが、外注先探しや選定において大切になるポイントです。
CSSを含むサイトコーディングのご相談は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。
お電話でのご相談は
03-6427-5422
受付時間：平日10:00～18:30
コーディングの依頼先探しなら、
リカイゼンにおまかせください！
相談するだけ！プロがあなたにぴったりの会社をご紹介いたします！
コーディングの依頼先探しでこんなお悩みはありませんか？
- 会社の選び方がわからない
- 何社も問い合わせるのが面倒くさい
- そもそも依頼方法がわからない
- 予算内で対応できる会社を見つけたい
発注サポート経験豊富な専任スタッフが
あなたのご要望をお聞きし、最適な会社をご紹介いたします！
ご相談から会社のご紹介まで全て無料でご利用いただけます。
お気軽にご相談ください！
コーディングの
依頼先探しなら
リカイゼンにおまかせください！
相談するだけ！プロがあなたにぴったりの会社を無料でご紹介いたします！
まずはご質問・ご相談なども歓迎!
お気軽にご連絡ください。
