CSS カスケードスタイルシートの外部化と書き方、使い方

スタイルシートはホームページのデザインのためのマークアップ言語です。CSSを使用することでhtmlソースの単純化などホームページ作成効率を上げたり、サーバーの転送量を下げることができます。

CSS外部化

CSS記述例まとめ

私がよく使っているCSSの記述例です。
ホームページのデザインの参考になればと思います（非初心者向け）

---

記述例

htmlソース内でspanタグを使用、またはhead内で宣言、外部CSSでの記述を区分せずに載せております。

文字関係
font-size:40px;
font-weight:bold;
text-align:left; text-align:center;
font-family:"cursive"; font-family:"メイリオ";
color:red; color:green; color:blue;

文字タグ別装飾例
h1{text-align:left; font-family:"Arial"; font-size:30px; color:#EEDDCC;
margin:0; padding:10px; border-top:1px solid #333; border-bottom:1px solid #333;
background:#666666;}
h2,h3,h4,h5{text-align:left; font-family:"Arial"; font-size:20px; color:#333333;
margin:0px 0px 20px 0px; padding:0;}
h6{text-align:left; font-family:"Arial"; font-size:15px; color:#333333;
margin:20px 0px 0px 0px; padding:0;}

u{display:block; text-align:center; font-family:"Arial"; font-size:12px; font-weight:700; color:#EEEEEE; text-decoration:none;
margin:0; padding:5px; border-top:1px solid #FFF;}

strong{color:#555500; border-bottom:2px dotted #B85;}
b{color:#770000; font-weight:700;}
em{color:#770000; font-weight:700; font-style:normal;}
i{color:#770000; font-weight:700; font-style:normal;}
q{color:#770000; font-weight:700;}

dfn{font-weight:700; border-bottom:2px dotted #333; font-style:normal;}
cite{color:#007700; font-weight:700; font-style:normal;}
big{font-size:15px; font-weight:700; font-style:normal;}
small{font-size:15px; color:#006666; font-weight:700; font-style:normal;}
samp{color:#663300;}
code{color:#004400;}
s{color:#111111;}

address{text-align:left; font-family:"Arial"; font-size:12px; color:#CCEECC; font-style:normal;
margin:0; padding:0px 5px 0px 5px; background:#333333;}


余白や文字間隔
padding:0px 0px 0px 0px; margin-top:0px; margin-bottom:0px;

アンカーテキスト
a:hover{border-bottom:1px dotted #000; text-decoration:none;}

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;}

a{font-family:"Arial"; color:#1111CC; font-weight:700; text-decoration:none; border-bottom:1px solid #66F;}
a:hover{color:#666600; font-weight:700;border-bottom:1px dotted #B85;}

a{display:block; float:left; width:120px;
text-align:center; font-family:"Arial"; font-size:12px; color:#446655; font-weight:700; text-decoration:none;
margin:0; padding:2px 5px 2px 5px; border-right:1px solid #999; border-bottom:0; background:#CCDDCC;}
a:hover{color:#FFAA66; font-weight:700; border-bottom:0; background:#665544;}

テーブル
table{margin:0; padding:0; border:1px solid #999;}
th{text-align:center; margin:0; padding:5px 10px 5px 10px; border:1px solid #999;}
td{text-align:left; margin:0; padding:5px 10px 5px 10px; border:1px solid #999;}

そのほかデザイン
hr{margin:5px; padding:0; border-top:0; border-bottom:3px dotted #999;}
hr{margin:25px 0px 25px 0px; border-top:0; border-bottom:3px dotted #999;}

img{border:0;}
iframe{width:210px; height:1000px; margin:0; padding:0;}

dl{margin:0;}
dt{display:block; float:left; width:210px; margin:0; background:#333333;}
dd{display:block; float:none; overflow:hidden;
text-align:left; font-family:"Arial"; font-size:15px; color:#000000;
margin:0px 0px 0px 235px; padding:25px; border-left:2px dotted #333; line-height:23px;}

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;}
p{text-align:center; font-family:"Arial"; font-size:12px; color:#665544;
margin:0; padding:2px 5px 0px 5px; border-top:1px solid #333; border-bottom:1px solid #333; background:#EEEEEE;}

bodyタグ
body{margin:0; padding:0; border:0; background:#EEFFEE;
}
body{font-family:"Arial"; margin:0; background:#FFFFFF;}

preタグ
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;}

pre{font-family:"Arial"; text-align:left;
margin:0;                  /* Contents:RUU61Y6891O1019S */
white-space:-moz-pre-wrap; /* Mozilla */
white-space:-pre-wrap;     /* Opera 4-6 */
white-space:-o-pre-wrap;   /* Opera 7 */
white-space:pre-wrap;      /* CSS3 */
word-wrap:break-word;      /* IE 5.5+ */}

---

ソースの覗き見

"Ctrl + U" でhtmlのソースを閲覧できます。
ホームページの構成がいいな！ というサイトがありましたらCtrlを押しながらUキーを押してみてはいかがでしょう。

デザインについてはCSSよりも画像の方がウエイトを占めるため、
ソースコードを覗いてもあまり役に立たちませんが、デザインを実現するためにはある程度htmlやCSSに慣れておく必要があります。

CSS外部化 TOP：トップページに戻る。

---

CSSについて

散財のすすめ : スタイルシートは簡単に作成できます。
使い方も簡単で初心者向けとなっているため、特に書籍の購入などをする必要はありません。

初めてという方でも1日あれば十分に使いこなすことが可能です。

CSSとは

CSS スタイルシートとは、ホームページの見栄えのための言語で、htmlでフォントの色やテーブルの背景色などなど……
1つ1つ個々に指定すると労力が馬鹿になりません。

こういった手間をかけずに、一括でデザインをすることが出来る補助言語となります。