スタイルシートを使ってデザインしてみよう
スタイルシートはCSS（Cascading Style Sheet）といって、HTMLにスタイル（デザイン要素）を加えることが出来ます。拡張子は「.css」になります。
スタイルシートを使うメリットとして
- HTML文書からデザイン要素が排除されるので、正しい文書構造になる。
- ソースが簡略化され、ページが軽くなる。
- スタイルシートを書き換えるだけで全ページに反映されるので更新がスムーズ。
といった感じで いいことだらけです
MENU  ホームページ作成のススメ｜HTMLを書いてみよう｜スタイルシートを使ってデザイン |
|
では実際に先ほどのHTML文書にスタイルシートを適用してデザイン要素を加えてみましょう。
スタイルシートはHTML文書の<head></head>内に記述します。
<style type="text/css"><!--
--></style>
<!-- -->というタグはコメントアウトといって、ソース内のメモ書きのようなものです。
スタイルシートをメモ書き扱いにしてるのは、スタイルシート未使用のブラウザで、 この部分がそのまま表示されてしまうことを防ぐためです。
|
<style type="text/css">
<!--
body{
font-size:10pt;
color:#666666;
background-color:#ffffff;
margin-left:10%;
}
h1{
font-size:11pt;
color:#996600;
border-left:4px solid #663300;
border-bottom:1px solid #663300;
padding:5px;
width:400px;
}
p{
padding:5px;
border:2px dotted #cc9933;
width:250px;
height:100px;
margin-left:20px; }
ul{ list-style-type:none;
margin-left:0px;
line-height:1.5pm;
}
li{
width:130px;
padding:3px;
border-bottom:1px dashed #cccccc;
}
--></style>
|
左のようにHTML内の<head></head>内に記述します。
するとこのように反映されます。
→スタイルシートを適用したファイル
スタイルシートは
要素名 { 属性：値； }
のように記述します。
簡単に例えて言うと
見出し１｛
文字の大きさ：１１ポイント；
文字の色：茶色；
左の枠の色：１ピクセル ただの線 茶色；
余白：５ピクセル；
横幅：４００ピクセル；
｝
といった感じになります。
スタイルシートでは、段落に枠を付けたり背景色を変えたり、枠の一本一本のスタイルや色、太さなどを細かく指定することが出来ます。
色々試してみてくださいね！
スタイルシートのリファレンスや解説などの詳しいサイトを紹介します。
|
|
|
▲ページTOPへ