スタイルシートにはまり中
最近、サイトの作成でスタイルシートというやつにハマッてしまいました（笑）
前々からスタイルシートもJAVAスクリプトも、ほんの少しだけ利用していたのですが、サイト開設から１年以上たち、ページ（htmlファイル）も多くなってきたので、そろそろサイトの構成を見直そうと思ったとき、スタイルシートの便利さを知ってしまいました♪
どれぐらい便利かの比較として、実際のサイトのコードにある bodyタグ の中身で比較してみます。
まずは今までの tableタグ を組合わせて作っていたソースは・・・
**********
<body>
<table width="750" cellspacing="0" cellpadding="0" border="0" align="center" valign="top">
<tr><td colspan="3" align="left" valign="top"><br>
<img src="./fig/space.bmp" width="30" height="1">
<a href="http://www.ilovegtr.com/"><img src="./fig/title.gif" width="315" height="53" border="0" alt="I LOVE GT-R トップページへ"></a>
<img src="./fig/space.bmp" width="35" height="1">
<span class="s9 ce"><strong>日産GT-<span class="r">R</span>・スカイラインを中心に、カーライフ全般の情報サイト</strong></span><br><br>
<img src="./fig/line.gif" width="100%" height="3"><br><br>
</td></tr>
<tr height="1"><td width="140" align="left" valign="top"></td>
<td width="10" rowspan="2"></td>
<td width="600" align="left" valign="top" rowspan="2">
<table width="600" cellspacing="0" cellpadding="0" border="0">
<tr height="20">
<td background="./fig/bg32.bmp"><h1><font color="#cccccc">About BN<span class="r">R</span>32</font></h1></td>
</tr>
<tr bgcolor="#000000">
<td align="left" valign="top"><br>
<p>ケンとメリーのスカイライン・・・通称『ケンメリ』から16年の沈黙を得て、・・・
【 メイン部 】
</td>
</tr>
</table>
<br><img src="./fig/line.gif" width="100%" height="3"><br>
<address><div class="address">
Copyright (C) 2007-2009 MD<span class="r">R</span>32 All Rights Reserved.
</div></address>
<br>
</td></tr>
<tr><td align="center" valign="top">
【 左メニュー部 】
</iframe>
</td></tr>
</table>
</body>
**********
bodyタグ の直下に tableタグ がありますね（笑）
私みたいな初心者が頑張って少し凝ったサイトを作ろうとしたとき、tableタグで大きさをキッチリ固定する方が見た目の崩れも無く最初のうちは楽ですが、ページを拡張していきメニューやら広告やらを追加したり、左メニューの記述より前にメインの記述を持ってくるとSEO対策になる。なんて事をやっているうちにどんどんtableが複雑になり、table の中に table があってまたその中に…なんて事になってしまいます（汗）
しまいには、終わりの </table>タグ が一個足りなくて表示が変になり、どこが足りないのかを探したり。。。
次に、スタイルシートを用いた場合です。
**********
<body>
<div id="head">
<a href="http://www.ilovegtr.com/">I LOVE GT-R</a>
<p><strong>日産GT-<span class="r">R</span>・スカイラインを中心に、カーライフ全般の情報サイト</strong></p>
</div>
<div id="main">
<div id="right">
<h1 class="bnr32">BN<span class="r">R</span>32とは</h1>
<div id="contents">
<p>ケンとメリーのスカイライン・・・通称『ケンメリ』から16年の沈黙を得て、・・・
【 メイン部 】
</div>
<address>
Copyright (C) 2007-2009 MD<span class="r">R</span>32 All Rights Reserved.
</address>
<br>
</div>
<div id="menu">
【 左メニュー部 】
</div>
</div>
</body>
**********
非常に簡潔になっていて、「タイトル」「メイン」「メニュー」の部分が一目でわかるようになったと思います。
そして肝心のスタイルシートの内容は以下の通りです。
（tableタグ を鬼のように利用していたときも使っていた背景やら <p>タグ やらの定義部分は除きます）
**********
/***** ヘッダー *****/
#head{
width: 730px;
height: 55px;
margin: 15px 0px 0px 20px;
padding: 0px;
text-align: left;
overflow: hidden;
background-color: #000000;
background-image: url(./fig/title.gif);
background-repeat: no-repeat;
}
#head a{
width: 315px;
height: 53px;
display: block;
text-indent: -1000px;
}
#head p{
text-align: right;
font-size: 9pt;
color: #eeeeee;
margin: -12px 0px 0px 320px;
}
/***** メイン *****/
#main{
position: relative;
width: 750px;
background-color: #000000;
margin: 10px auto;
padding: 0px;
text-align: left;
background-image: url(./fig/line.gif);
background-repeat: repeat-x;
background-position: top;
}
/***** 左：メニュー *****/
#menu{
width: 140px;
margin: 20px 10px 0px 0px;
background-color: #000000;
float: left;
}
/***** 右：コンテンツ *****/
#right{
width: 600px;
margin: 20px 0px 0px -150px;
background-color: #000000;
float: right;
}
/***** コンテンツ *****/
#contents{
width: 600px;
margine: 0px;
padding: 0px 10px;
background-color: #000000;
}
/***** その他 *****/
img{ border:0px; }
h1{
font-size: 13pt;
color: #eeeeee;
text-indent: 5px;
background-color: #444444;
border-color: #aaaaaa;
border-style: solid;
border-width: 0px 0px 0px 10px;
}
address{
font-size: 11pt;
color: #666666;
font-style: italic;
margin: 5px 0px;
padding: 5px 0px 0px 0px;
background-image: url(./fig/line.gif);
background-repeat: repeat-x;
background-position: top;
}
/***** クラス *****/
.return {font-size: 9pt; text-align: right; }
**********
意外とスタイルシートも量があり、ページの先頭でスタイルシートを読み込む事を考えれば、ファイルサイズ的にはあまり変わらないとは思います。
ですが、スタイルシートを用いた htmlファイル の方が、超スーパースペシャルグレートハイパーギザ格段に読みやすくなっている事が分かると思います。
『読みやすい』 と言う事は、修正や追記などの編集がしやすいと言う事につながり、tableの段数を数えるなどと言う余計な気をつかわず、コンテンツ作成に集中する事ができます。
そしてさらに、もう一つの大きなポイントとして、スタイルシートだけ変更すれば、それが全ページに反映されると言う事です。
これは本当にすばらしい!!
tableで作っていた頃は、メインコンテンツの画面幅を広げようと思ったら、全てのファイルに書いてある <table width="600" を <table width="750" とかに書き換える必要があります。
サイトマップを見ていただけると分かるとおり、現在は30近いページ（htmlファイル）があり、非常に時間と労力が掛かりました。
それがスタイルシートなら、たった1ファイルの1行 width: 600px; を width: 750px; にするだけで、前ページに反映されます♪
これからホームページを作成される方は、ただでさえHTMLタグを覚えるので大変でしょうが、スタイルシートも一緒に作ることをおススメします♪
後からですと本当に大変ですから（汗）
あ、最後になっちゃいましたが、もちろんテキストエディタでシコシコ作る人用です。ホームページビルダーとかは関係ないですね（笑）
最後までお読みいただきありがとうございます。
読みましたの合図に、応援クリックよろしくお願いします m(_ _)m
※上記のランキングバナーをクリックすると、別ウィンドウでランキングページが開きます。その後、このウィンドウに戻っていただくと 【今日のラッキーGT-R】 の画像に変わってます♪毎日1クリックしていただけると、とっても嬉しいです!!
I LOVE GT-R
前々からスタイルシートもJAVAスクリプトも、ほんの少しだけ利用していたのですが、サイト開設から１年以上たち、ページ（htmlファイル）も多くなってきたので、そろそろサイトの構成を見直そうと思ったとき、スタイルシートの便利さを知ってしまいました♪
どれぐらい便利かの比較として、実際のサイトのコードにある bodyタグ の中身で比較してみます。
まずは今までの tableタグ を組合わせて作っていたソースは・・・
**********
<body>
<table width="750" cellspacing="0" cellpadding="0" border="0" align="center" valign="top">
<tr><td colspan="3" align="left" valign="top"><br>
<img src="./fig/space.bmp" width="30" height="1">
<a href="http://www.ilovegtr.com/"><img src="./fig/title.gif" width="315" height="53" border="0" alt="I LOVE GT-R トップページへ"></a>
<img src="./fig/space.bmp" width="35" height="1">
<span class="s9 ce"><strong>日産GT-<span class="r">R</span>・スカイラインを中心に、カーライフ全般の情報サイト</strong></span><br><br>
<img src="./fig/line.gif" width="100%" height="3"><br><br>
</td></tr>
<tr height="1"><td width="140" align="left" valign="top"></td>
<td width="10" rowspan="2"></td>
<td width="600" align="left" valign="top" rowspan="2">
<table width="600" cellspacing="0" cellpadding="0" border="0">
<tr height="20">
<td background="./fig/bg32.bmp"><h1><font color="#cccccc">About BN<span class="r">R</span>32</font></h1></td>
</tr>
<tr bgcolor="#000000">
<td align="left" valign="top"><br>
<p>ケンとメリーのスカイライン・・・通称『ケンメリ』から16年の沈黙を得て、・・・
【 メイン部 】
</td>
</tr>
</table>
<br><img src="./fig/line.gif" width="100%" height="3"><br>
<address><div class="address">
Copyright (C) 2007-2009 MD<span class="r">R</span>32 All Rights Reserved.
</div></address>
<br>
</td></tr>
<tr><td align="center" valign="top">
【 左メニュー部 】
</iframe>
</td></tr>
</table>
</body>
**********
bodyタグ の直下に tableタグ がありますね（笑）
私みたいな初心者が頑張って少し凝ったサイトを作ろうとしたとき、tableタグで大きさをキッチリ固定する方が見た目の崩れも無く最初のうちは楽ですが、ページを拡張していきメニューやら広告やらを追加したり、左メニューの記述より前にメインの記述を持ってくるとSEO対策になる。なんて事をやっているうちにどんどんtableが複雑になり、table の中に table があってまたその中に…なんて事になってしまいます（汗）
しまいには、終わりの </table>タグ が一個足りなくて表示が変になり、どこが足りないのかを探したり。。。
次に、スタイルシートを用いた場合です。
**********
<body>
<div id="head">
<a href="http://www.ilovegtr.com/">I LOVE GT-R</a>
<p><strong>日産GT-<span class="r">R</span>・スカイラインを中心に、カーライフ全般の情報サイト</strong></p>
</div>
<div id="main">
<div id="right">
<h1 class="bnr32">BN<span class="r">R</span>32とは</h1>
<div id="contents">
<p>ケンとメリーのスカイライン・・・通称『ケンメリ』から16年の沈黙を得て、・・・
【 メイン部 】
</div>
<address>
Copyright (C) 2007-2009 MD<span class="r">R</span>32 All Rights Reserved.
</address>
<br>
</div>
<div id="menu">
【 左メニュー部 】
</div>
</div>
</body>
**********
非常に簡潔になっていて、「タイトル」「メイン」「メニュー」の部分が一目でわかるようになったと思います。
そして肝心のスタイルシートの内容は以下の通りです。
（tableタグ を鬼のように利用していたときも使っていた背景やら <p>タグ やらの定義部分は除きます）
**********
/***** ヘッダー *****/
#head{
width: 730px;
height: 55px;
margin: 15px 0px 0px 20px;
padding: 0px;
text-align: left;
overflow: hidden;
background-color: #000000;
background-image: url(./fig/title.gif);
background-repeat: no-repeat;
}
#head a{
width: 315px;
height: 53px;
display: block;
text-indent: -1000px;
}
#head p{
text-align: right;
font-size: 9pt;
color: #eeeeee;
margin: -12px 0px 0px 320px;
}
/***** メイン *****/
#main{
position: relative;
width: 750px;
background-color: #000000;
margin: 10px auto;
padding: 0px;
text-align: left;
background-image: url(./fig/line.gif);
background-repeat: repeat-x;
background-position: top;
}
/***** 左：メニュー *****/
#menu{
width: 140px;
margin: 20px 10px 0px 0px;
background-color: #000000;
float: left;
}
/***** 右：コンテンツ *****/
#right{
width: 600px;
margin: 20px 0px 0px -150px;
background-color: #000000;
float: right;
}
/***** コンテンツ *****/
#contents{
width: 600px;
margine: 0px;
padding: 0px 10px;
background-color: #000000;
}
/***** その他 *****/
img{ border:0px; }
h1{
font-size: 13pt;
color: #eeeeee;
text-indent: 5px;
background-color: #444444;
border-color: #aaaaaa;
border-style: solid;
border-width: 0px 0px 0px 10px;
}
address{
font-size: 11pt;
color: #666666;
font-style: italic;
margin: 5px 0px;
padding: 5px 0px 0px 0px;
background-image: url(./fig/line.gif);
background-repeat: repeat-x;
background-position: top;
}
/***** クラス *****/
.return {font-size: 9pt; text-align: right; }
**********
意外とスタイルシートも量があり、ページの先頭でスタイルシートを読み込む事を考えれば、ファイルサイズ的にはあまり変わらないとは思います。
ですが、スタイルシートを用いた htmlファイル の方が、超スーパースペシャルグレートハイパーギザ格段に読みやすくなっている事が分かると思います。
『読みやすい』 と言う事は、修正や追記などの編集がしやすいと言う事につながり、tableの段数を数えるなどと言う余計な気をつかわず、コンテンツ作成に集中する事ができます。
そしてさらに、もう一つの大きなポイントとして、スタイルシートだけ変更すれば、それが全ページに反映されると言う事です。
これは本当にすばらしい!!
tableで作っていた頃は、メインコンテンツの画面幅を広げようと思ったら、全てのファイルに書いてある <table width="600" を <table width="750" とかに書き換える必要があります。
サイトマップを見ていただけると分かるとおり、現在は30近いページ（htmlファイル）があり、非常に時間と労力が掛かりました。
それがスタイルシートなら、たった1ファイルの1行 width: 600px; を width: 750px; にするだけで、前ページに反映されます♪
これからホームページを作成される方は、ただでさえHTMLタグを覚えるので大変でしょうが、スタイルシートも一緒に作ることをおススメします♪
後からですと本当に大変ですから（汗）
あ、最後になっちゃいましたが、もちろんテキストエディタでシコシコ作る人用です。ホームページビルダーとかは関係ないですね（笑）
スポンサーサイト
読みましたの合図に、応援クリックよろしくお願いします m(_ _)m
※上記のランキングバナーをクリックすると、別ウィンドウでランキングページが開きます。その後、このウィンドウに戻っていただくと 【今日のラッキーGT-R】 の画像に変わってます♪毎日1クリックしていただけると、とっても嬉しいです!!
I LOVE GT-R
