「Webサイトを作る際によく聞くHTMLとCSSってどんな関係なんだろ」
こう言った疑問に答えます。
Webサイトを制作する際必要な言語はHTMLだけではありません。
別の記事でも紹介しましたがCSSという言語も必要になります。
HTMLという言語は基本的にはWebサイトの文字や画像などのコンテンツを配置するための言語であり、コンテンツの装飾を編集するのはCSSです。
コンテンツの装飾とは例えば文字の色・フォントや文字背景の色などを指します。
それらの編集はHTMLで編集することはできますが、CSSの方が手間がかからないのでCSSで編集します。
そこでこの記事では、HTMLとCSSがどのような関係にあるのかとCSSを学ぶ上で大切なポイントについて紹介したいと思います。
目次【本記事の内容】
まずはCSSとは？
CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、文章にデザインを施したいときに使う言語です。
つまり、Webサイトにどんな文字や画像を載せるかを設定するのがHTMLということに対し、文字や画像にどんな装飾を施すかを設定するのがCSSです。
装飾というのは文字の大きさだけでなく、色や配置も含まれます。
HTML文書にCSSを適用する方法は3つ!
CSSでHTML文書やXHTML文書にスタイルシートを適用するには、大きく分けて3つの方法があります。
今から表示する例はHTMLで記述した文字を赤色で示すように装飾する方法でWebサイトに表示される内容は全て同じです。
要素にstyle属性を追加して局所的に適用する
要素にstyle属性を追加して、HTMLソース中に直接スタイル指定を記述します。
style属性によるスタイル指定をする場合には、 文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head>要素内に<meta>要素を記述してスタイル言語の値にtext/cssを指定します。
多くの場合、この指定をしなくてもブラウザによって自動的に判断されますが、誤動作を避けるためにも記述したほうが良いでしょう。
なお、style属性によるスタイル指定は、部分的にスタイルを優先指定する際などには便利ですが、 HTMLソースが複雑になってスタイル管理が煩雑になりがちです。
効率の良いスタイル管理を目指す場合には、この方法はあまりおススメできません。
これをWebサイト上で見る以下のようになります。
style要素で文書単位に適用する
HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。
適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。
この方法も効率の良いスタイル管理を目指す場合には、この方法はあまりおススメできません。
これをWebサイト上で見る先ほどと同じようになります。
link要素で外部CSSファイルを呼び出して適用する
スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。
呼び出しには、HTML文書の<head>要素内に<link>要素を記述して、外部CSSファイルを指定します。
適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、<link>要素のtype属性の値にはtext/cssを指定します。
・HTMLファイル
・CSSファイル
効率の良いスタイル管理を目指す場合、この方法が最もおススメできます。
この方法を使う際に注意するべき点はファイルの参照方法です。
HTMLファイルの図の赤線部の「xxsheet.css」がhtmlファイルと下図のように同じディレクトリにあればこの記述で問題ありません。
しかし、別ファイルにある場合は書き方が変わります。
上図のようにhtmlファイルがあるディレクトリの直下にあるディレクトリ内(ここではディレクトリ名：css)に「xxsheet.css」がある場合は、下図の赤線部のように直下のディレクトリ名も含めて「css/ xxsheet.css」記述しなければ文字が赤色に変わりません。
CSSの基本文法
CSSを構成する要素はセレクタ、プロパティ、値の3つに分けられます。
それぞれがどの部分を示しており、どのように役割を果たしているか説明します。
セレクタ
上図では赤枠がセレクタにあたります。
このセレクタを記述することで、どの部分にデザインを適用させるか決めることが可能です。
セレクタにはh1やh2のようなHTMLタグや#で始めるid属性や.で始めるclsss属性があります。
id属性やclsss属性について後ほど説明します。
上図のセレクタはpというHTMLタグになります。
ちなみにpとはタグはParagraphの略で、<p>～</p>で囲まれた部分がひとつの段落であることを表します。
一般的なブラウザでは<p>～</p>の前後に1行分改行されますが、 単に改行することが目的の場合には、<p>タグではなく<br>タグを使用しましょう。
プロパティ
上図では赤枠がプロパティにあたります。
プロパティはセレクタで指定した場所の「何を変化させたいのか」決めるものです。
セレクタの後に記述される波括弧{}の中にプロパティを記述します。
例えば、プロパティで指定出来るものに文字サイズや文字の色があります。
上図のようにプロパティを記述することで、文字の色を変えることが出来るのです。
プロパティは数100種類あるので、その中から指定したいものを選んで記述します。
値
上図では赤枠が値にあたります。
値はプロパティで指定したものを、どのくらいもしくはどのように変化させるのか決めるものです。
上図のように文字の色を指定するプロパティを記述したなら、その文字の色を何色にするのかを値で設定します。
値は各プロパティによって記述する内容が異なるので、注意が必要です。
CSSでできること(具体例)
この章では、CSSで指定することが出来る具体的な例をいくつか紹介します。
紹介する例は、実際にコーディングするときによく使われるものです。
他にもCSSで指定できることは数多くありますが、代表的な例を見ることでCSSがどういうものなのかよりわかりやすくなるはずでしょう。
文字を大きさ
CSSでは文字の大きさを変えることが可能です。
上図の赤線部の記述を加えることで最初に示した例より文字が大きくなったことがわかります。
HTMLで<h1>など見出しを作るタグを使うと、その部分の見出しの文字の大きさが変わりますが、これとは別に、CSSでは指定した場所の文字サイズを変えることが出来ます。
余白を作る
CSSを使うと余白を作れます。
上図の赤枠ように「margin」や「padding」などを記述することで、余白を指定することができます。
最初に示した例より文字が真ん中に寄っていることがわかります。
文字背景の色を指定
CSSを使うと文字背景の色も指定できます。
上図の赤線部の記述を加えることで文字の背景の色が青になったことがわかります。
id属性とclass属性
CSSを記述する際にHTMLタグが同じでもそれぞれで別の装飾がしたい場合があります。
例えばh2の見出しタグを1つ目は青色の文字にし、2つ目は赤色の文字に指定したい場合のことです。
こういったときにid属性やclass属性を使います。
id属性やclass属性は、各要素に任意の名前をつけ、名前によって要素を区別することができます。
id属性とclass属性の大きな違いは、id属性が同じWebページ内でid属性の値が重複してはならないのに対し、class属性は同じWebページ内で同じclass属性の値を何度でも用いることができるという点です。
これからそれぞれの記述方法について説明します。
id属性
id属性はCSSでは、以下の図のようにセレクタの名前の先頭に”#”をつけます。
HTMLでは、以下の図のように＜＞内に「id=”要素名”」を記述します。
これ方法でも最初の例と同じように文字が赤色になっていることがわかります。
class属性
class属性はCSSでは、以下の図のようにセレクタの名前の先頭に”.”をつけます。
HTMLでは、以下の図のように＜＞内に「class=”要素名”」を記述します。
これ方法でも最初の例と同じように文字が赤色になっていることがわかります。
まとめ
CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、文章にデザインを施したいときに使う言語というのはお分かり頂けましたでしょうか。
現在のHTMLとCSSは役割分担がされていて、それにより多様なデザインが出来るようになっています。
もしあなたがこれからCSSを書いていくのなら、基本文法を覚える必要があります。
まずは基本文法を覚えて、様々な装飾のパターンを覚えていくようにしましょう。
次回は文字の余白について説明したいと思っています。
最後まで読んで頂きありがとうございました。
