HTMLとCSSを分けよう
（※既にHTMLとCSSを分けている方は、本章を読む必要はありません）
10年以上前に作成したWebサイトで、HTMLの中にスタイル（色やサイズ等）を記述していて、そのままになっているという方！ 是非この機会にCSSを分けましょう。
現在はCSS（スタイルシート）を分けて記述するのが常識ですので、スマホ対応のためにも、今後のサイト保守のためにも必須のことです。多少面倒でも頑張っておこなってください！
CSSは全く難しくない！
従来の方法でHTMLを作成してきた人は、CSSって難しそう・・と思うようですが、全く難しくはありません。むしろ今までHTMLの中に記述してきた邪魔くさい要素（色とか、ボーダーとかマージンとかサイズとか・・）を分離してまとめて書けるのですから、こんなにスッキリ爽やかなことはなく、絶対気に入ることでしょう！
CSSが生まれた基本理念は、Webサイトのコンテンツとデザインを分離するということです。コンテンツ（文章、画像など）はHTMLに、デザイン（画面レイアウトや色など）はCSSに記述することで、それぞれの独立性を保ち、保守管理や、様々な変化への対応が格段にしやすくなります。
例えば、ページ数が100ページあったとしても、CSSの色指定を一か所変えるだけで、全てのページの色を変えることができるのです。
しかも、特に新しい技術が必要なわけではなく、殆どは、今までHTMLに書いていたスタイルに関する定義を、別のファイル（CSSファイル）に移動するだけですから、全く難しくはありません。
HTML内に記述していたスタイルを外部CSSへ
今までHTMLにその都度「font-size=16px background-color:black」などと記述していたスタイル（レイアウト、デザインに関する要素）は、すべてCSS（スタイルシート）のファイルに移動します。HTMLに記述するのは「コンテンツ」だけです！ コンテンツとは、メニュや本文等のテキスト、画像・動画、リンク先アドレスです。各々のサイズやマージンなどはCSSで記述です。
CSSファイルは「○○.css」というファイル名になり、HTMLのhead部分にリンクを記述します。
（例）<link rel="stylesheet" type="text/css" href="css/sp-style.css" media="all" />
CSSの記述方法
CSSでは、「どの部分にどのスタイルを適用するか」を記述しますが、「どの部分」にあたるのは、タグ、ID、クラス、の３種類の指定の仕方があります。
タグ指定
HTMLのタグ単位にスタイルを指定します。例えばh2（見出し２）のスタイルを指定する場合には、
h2{
font-size:140%;
color:blue;
margin:20px;
}
と記述することで、全てのh2が140%のフォントサイズの青色で、マージン20pxと指定できます。
ID指定（#マーク）
タグ単位以外の部分を指定する場合は、任意の範囲に「ID」または「クラス」を指定します。
IDは主にWebサイトの構成（ヘッダー、メニュー、メイン、フッター等のように）を定義する際に使用し、HTMLでdivタグで挟んで領域を指定します。例えば、左メニュのスタイルを指定する場合は、HTML上で、divタグで任意の名前をつけて挟み（<div ID="leftmenu">のように）、CSSで次のように#マークをつけて記述します。
＃leftmenu{
width:200px;
background-color:white;
border:1px solid;
}
これで、左メニュは横幅200px、背景色は白、ボーダー1pxと指定できます。
IDは、同じ名前は１か所にしか使えません。同じスタイルをあちこちで使いたい場合には、IDではなく「クラス」で指定します。
クラス指定（.マーク）
IDのように一か所だけで使うスタイルではなく、あちこちで同じスタイルを使いたい場合には「クラス」で指定します。ID同様、HTMLでdivタグで挟んで領域指定することもできますしが、divでは改行が伴うため、改行したくない場合にはspanタグで挟んで範囲指定します。例えば、文章中の一部を赤文字にしたい場合は、その部分をspanタグで任意の名前をつけて挟み（<span class="akamoji">のように）、CSSで次のように.マークをつけて記述します。
.akamoji{
color:red;
}
クラス指定は、異なる場所で何度でも使うことができます。
上記の組合せ
上記の、タグ、ID、クラスを単独で指定するだけでなく、それらを組合わせてより細かい指定をすることもできます。スペースで区切り、続けて記載します。例えば、左メニュのリンクは緑色で下線をつける場合には、CSSで次のように記述します。
＃leftmenu a{
color:green;
text-decoration: underline;
}
一括指定
複数の要素に、一括して同じスタイルを指定することもできます。カンマで区切って指定します。たとえばh1もh2もh3も同じマージンを指定したい場合には、次のように記述します。
h1,h2,h3{
margin:10px;
}※CSSは、同じ要素のスタイルを何度も記述した場合、下に記述したものが有効になります。（上書きされる）
スマホ対応簡単解説 ＜目次＞
