スタイルシートはホームページのデザインのためのマークアップ言語です。CSSを使用することでhtmlソースの単純化などホームページ作成効率を上げたり、サーバーの転送量を下げることができます。
CSSによりホームページのデザインを行うことでhtmlソースの簡略化ができます。 CSSの記述は<head>内に記載します。 CSS（カスケードスタイルシート）とは、 ホームページのレイアウトのための言語でhtmlよりもデザインに向いています。 ホームページを作成する際にCSSを外部化することでhtmlソースの量を減らすことが可能。 外部化により、ソースが見やすくなる上、サーバーの転送量も減るというメリットがあります。 CSSを使用する場合はデザインの他、<head>内にCSSの記述を記載しましょう。 入門者や初心者にとってもやさしいマークアップ言語で、 CSSの書き方や使い方は非常に簡単ですが、htmlに対する知識がないと若干迷うかもしれません…… ある程度判る方には、html以上にとっつきやすい作りとなっています。 CSSを記述するにあたって 1.スタイルシート言語の記述 <meta http-equiv="Content-Style-Type" content="text/css" /> ※上記はXHTMLの記述です。HTML4.01などのバージョンの場合には/（スラッシュ）が不要です。 2.CSSの外部読み込みを行う場合の読み込みファイル <link rel="stylesheet" type="text/css" href="■CSSファイル■.css" /> ※上記はXHTMLの記述です。HTML4.01などのバージョンの場合には/（スラッシュ）が不要です。 3.CSSの外部化を行わず、htmlソースの<head>内に記述する場合 <style type="text/css"/> <!-- ■ここにCSSを記述します■ --/> </style/> ※内部埋め込み型の場合には、styleタグを使用します。
CSSファイルはメモ帳さえあれば簡単に作成できます。
p{font-family:"Arial"; font-size:12px; font-weight:700; text-align:left; color:#446655;}
body{background:#EEFFEE;}
img{border:0;}
a{text-decoration:none;}
上記が使用頻度の高いCSSの使い方。
文字のフォント書体を指定する方法：font-family:"Arial";
文字のフォントサイズを指定する方法：font-size:12px;
文字の太さを指定する方法：font-weight:700;
指定する数値が大きいほど太い太字となります。
文字の位置を指定する方法：text-align:left;
※leftを指定することで左寄せになります。
文字の色を指定する方法：color:#446655;
背景色を指定する方法：background:#EEFFEE;
枠線の幅を指定する方法：border:0;
※0で画像の周りに表示される枠線がなくなります。
文字の装飾を指定する方法：text-decoration:none;
※noneを指定するとアンカーテキストの下線がなくなります。
上記のようにhtmlタグを指定して装飾するほか、div idを使用する方法が代表的です。
CSSを使った文字装飾例： コピペで使える文字装飾例（spanタイプ）
以下は、私のホームページで使用している目次部分のCSSテンプレートのソースとなります。
CSSのソースコード
body{margin:0; padding:0; border:0; background:#EEFFEE;}
pre{font-family:"Arial"; text-align:left; margin:0; padding:0; border:0;
white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:pre-wrap; word-wrap:break-word;}
hr{margin:5px; padding:0; border-top:0; border-bottom:3px dotted #999;}
img{border:0;}
p{display:block; width:90%; text-align:left;
font-family:"Arial"; font-size:12px; color:#446655; font-weight:700; text-decoration:none;
margin:0; padding:0; border-bottom:1px solid #465; background:#EEFFEE;}
a{display:block; width:90%; text-align:center; font-family:"Arial"; font-size:12px; color:#446655; text-decoration:none;
margin:2px 0px 0px 0px; padding:5px 0px 5px 0px; border:1px solid #333; background:#CCDDCC;}
a:hover{color:#FFAA66; border-bottom:1px dotted #B85; background:#665544;}
CSSソースコードまとめ： 私がよく使うCSSの記述をまとめました。
CSSの外部化について
外部化を行う場合はファイルの拡張子に.cssを使います。
CSSのファイルはメモ帳さえあれば作成できます。
CSSの記述し、txt→cssと拡張子を変更すればCSSファイルに早変わり。
一見すると難しく見えるかもしれませんが、htmlで記述を行うよりもCSSを利用するほうがはるかに簡単です。
CSSの記述について
p{font-family:"Arial"; font-size:12px; color:#446655; font-weight:700;}
という記述をした場合には、<p>内の文字を一括で簡易装飾できます。
書体がArial、文字の大きさが12ピクセル、色RGBがR44,G66,B55、文字の太さが700……
RGBは00～FFで指定（0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,Fの16進法）
0Fは15で、10が16、FFが255……、0～255でRGBを指定し、数値が大きいほど色が濃くなります。
FF0000でしたら、赤256,緑0,青0なので真っ赤になります。
000000でしたら、色がないので真っ黒になります（宇宙のように光がないと真っ黒）
FFFFFFでしたら、発色全開で真っ白になります。
CSS外部化 TOP：トップページに戻る。
散財のすすめ : スタイルシートは簡単に作成できます。 使い方も簡単で初心者向けとなっているため、特に書籍の購入などをする必要はありません。 初めてという方でも1日あれば十分に使いこなすことが可能です。
CSS スタイルシートとは、ホームページの見栄えのための言語で、htmlでフォントの色やテーブルの背景色などなど…… 1つ1つ個々に指定すると労力が馬鹿になりません。 こういった手間をかけずに、一括でデザインをすることが出来る補助言語となります。