contents

パンくずリスト

HOME > HPの作り方 >> カスタマイズ

メッセージエリア


カスタマイズ
いよいよココで色をつけていきます。
どのようなサイトがいいかと考えましたが(やっぱ一番好きなのはフレームページなのですが)
後々応用の利く 【box】 を使ったサイトを作っていきます。
配置するのによく使われるのは 【Table】 なのですが
あえて、ココでは 【box】 を使って作っていきます。

手順としては
  1. 背景や文字を決める
  2. ページのサイズを決める
  3. それぞれの段落(<p>〜</p>の部分)に名前をつけて設定する
  4. 表示位置を決める
  5. ページ内で指定したスタイルシートを外し、外部スタイルシートを作りリンクを貼る
と、こんな感じでやっていきますね。
ちょ〜っとややこしいかもしれませんが、頑張って下さいね。


背景や文字を決める

背景は黒。文字の色は白。文字のサイズは13px。文字の種類はMS UI Gothic。
これがこのページのベースとなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">

 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 13px;
  font-family: MS UI Gothic;
  }
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->

  <title>サイト名</title>
 </head>
 <body>
 <p>My Site</p>
 <p>TOP DIARY BBS Gallery LINK</p>
 <p>
 ココに文字を書きます<br>
 今はまだ白い背景に黒い文字で順番に表示されているだけですが<br>
 次の項目の【カスタマイズ】でスタイルシートと組み合わせてカスタマイズしていきます。<br>
 スタイルシートではbodyタグに記述される
 ・フォントの種類<br>
 ・フォントの色<br>
 ・フォントのサイズ<br>
 ・背景色<br>
 ・文字の行間<br>
 ・スクロールバー<br>
 ・リンク文字の色<br>
 などの指定をしています<br>
 <br>
 動作環境<br>
 Windows XP Internet Explorer<br>
</p>
 <p>カウンターとかあったらココに入れる</p>
 </body>
</html>

タグをコピー(テキストエリア内左クリックで【すべて選択】)

と、こんな感じでスタイルシートを記述してみましょう。
タグ練習場1を開いておいて、コピペして確認しながら見ていきましょうね。
タグ練習場1 ←コチラ

どうですか?黒背景に白い文字で表示されましたか?
まだ一段階目ですからね。
文字の間隔とか、行間とか、色々気になる部分もあると思いますが、とりあえず置いといて…
続いてページのサイズを決めてみますね。
ページTOP
ひとつ前のページに戻る

ページサイズを決める

横幅1000px。高さ600px。こんなもんでどうでしょうか?(笑)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">

 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  }

 /*ココからサイトサイズ設定用です*/
 #sitesize{
  margin: 0 auto;
  padding: 0 0px;
  width: 1000px;
  height: 600px;
  background-color: #666666;
  border: 1px solid #666666;
  }
 /*ココまでがサイトサイズ設定用です*/
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->

  <title>サイト名</title>
 </head>
 <body>
 <!--↓IDセレクタを使ってサイトのサイズ設定します-->
 <div id="sitesize">
 <!--↑IDセレクタを使ってサイトのサイズ設定します-->
 <p>My Site</p>
 <p>TOP DIARY BBS Gallery LINK</p>
 <p>
 ココに文字を書きます<br>
 今はまだ白い背景に黒い文字で順番に表示されているだけですが<br>
 次の項目の【カスタマイズ】でスタイルシートと組み合わせてカスタマイズしていきます。<br>
 スタイルシートではbodyタグに記述される
 ・フォントの種類<br>
 ・フォントの色<br>
 ・フォントのサイズ<br>
 ・背景色<br>
 ・文字の行間<br>
 ・スクロールバー<br>
 ・リンク文字の色<br>
 などの指定をしています<br>
 <br>
 動作環境<br>
 Windows XP Internet Explorer<br>
 </p>
 <p>カウンターとかあったらココに入れる</p>
 <!--↓ココでサイトのサイズ設定を閉じます-->
 </div>
 <!--↑ココでサイトのサイズ設定を閉じます-->
 </body>
</html>

タグをコピー(テキストエリア内左クリックで【すべて選択】)

と、こんな感じでスタイルシートを記述してみました。
IDセレクタを使って、bodyタグ内でページのサイズを設定しています。
わかりやすいように色をつけていますが、
#sitesizeの所のbackground-colorとborderのsolidを#000000≠ノ変更すると、背景は黒一色になります。

ページTOP
ひとつ前のページに戻る

範囲に名前をつける

ここでは<p>を使って段落として範囲を設定していますが、<div>や<span>でもかまいません。
とりあえず<p>のままでスタイルシートを使って名前をつけて設定をしていきます。
【My Site】=sitename
【TOP DIARY BBS Gallery LINK】=menu
【テキストの入っているところ】=contents
【その他(カウンターとか…のところ)】=bottom
という風にスタイルシートに記述します。
まずは【My Site】=sitename のところだけやってみましょう。
背景は白。文字の色は赤。文字のサイズは20pxで太字に。文字の種類はMS P明朝。
文字の表示位置は真ん中で。高さもつけてみましょう。
高さの指定をした場合、文字を中央に表示させるためにはpaddingの設定も必要です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  }

 /*ココからサイトサイズ設定用です*/
 #sitesize{
   margin: 0 auto;
   padding: 0 0px;
   width: 1000px;
   height: 600px;
   background-color: #666666;
   border: 1px solid #666666;
  }
 /*ココまでがサイトサイズ設定用です*/

 /*ココからsitename設定用です*/
 .sitename{
   background-color: #ffffff;
   color: red;
   font-size: 20px;
   font-weight: bolder;
   font-family: MS P明朝;
   text-align: center;
   height: 60px;
   padding: 20,0,0,20;
  }
 /*ココまでがsitename設定用です*/
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->
  <title>サイト名</title>
 </head>
 <body>
 <!--↓IDセレクタを使ってサイトのサイズ設定します-->
 <div id="sitesize">
 <!--↑IDセレクタを使ってサイトのサイズ設定します-->

 <!--↓クラスセレクタを使ってサイトのサイズ設定します-->
 <p class="sitename">My Site</p>
 <!--↑クラスセレクタを使ってサイトのサイズ設定します-->
 <p>TOP DIARY BBS Gallery LINK</p>
 <p>
 ココに文字を書きます<br>
 今はまだ白い背景に黒い文字で順番に表示されているだけですが<br>
 次の項目の【カスタマイズ】でスタイルシートと組み合わせてカスタマイズしていきます。<br>
 スタイルシートではbodyタグに記述される
 ・フォントの種類<br>
 ・フォントの色<br>
 ・フォントのサイズ<br>
 ・背景色<br>
 ・文字の行間<br>
 ・スクロールバー<br>
 ・リンク文字の色<br>
 などの指定をしています<br>
 <br>
 動作環境<br>
 Windows XP Internet Explorer<br>
 </p>
 <p>カウンターとかあったらココに入れる</p>
 <!--↓ココでサイトのサイズ設定を閉じます-->
 </div>
 <!--↑ココでサイトのサイズ設定を閉じます-->
 </body>
</html>

タグをコピー(テキストエリア内左クリックで【すべて選択】)

どうですか?どこが変わっていってるかわかりますか?
ココではクラスセレクタを使って、My siteの所のサイズを設定しています。
このようにクラスセレクタを使うことにより、そこだけを別の表示に変えることができるんですね。
同じ要領で、他の<p>のところも設定してみましょう。

ページTOP
ひとつ前のページに戻る

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  }

 /*ココからサイトサイズ設定用です*/
 #sitesize{
   margin: 0 auto;
   padding: 0 0px;
   width: 1000px;
   height: 600px;
   background-color: #666666;
   border: 1px solid #666666;
  }
 /*ココまでがサイトサイズ設定用です*/

 /*ココからsitename設定用です*/
 .sitename{
   background-color: #ffffff;
   color: red;
   font-size: 20px;
   font-weight: bolder;
   font-family: MS P明朝;
   text-align: center;
   height: 60px;
   padding: 20,0,0,20;
  }
 /*ココまでがsitename設定用です*/

 /*ココからmenu設定用です*/
 .menu{
   background: #cc0000;
   width: 210px;
   margin: 10;
   padding: 10;
  }
 /*ココまでがmenu設定用です*/

 /*ココからcontents設定用です*/
 .contents{
   background: #cccccc;
   color: #000000;
   width: 800px;
   margin: 10;
   padding: 10;
  }
 /*ココまでがcontents設定用です*/

 /*ココからbottom設定用です*/
 .bottom{
   color: #cccccc;
   margin: auto,0;
  }
 /*ココまでがbottom設定用です*/
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->
  <title>サイト名</title>
 </head>
 <body>
 <!--↓IDセレクタを使ってサイトのサイズ設定します-->
 <div id="sitesize">
 <!--↑IDセレクタを使ってサイトのサイズ設定します-->

 <!--↓クラスセレクタを使ってサイト名の設定します-->
 <p class="sitename">My Site</p>
 <!--↑クラスセレクタを使ってサイト名の設定します-->

 <!--↓IDセレクタを使ってメニューの設定します-->
 <p class="menu">TOP DIARY BBS Gallery LINK</p>
 <!--↑IDセレクタを使ってメニューの設定します-->

 <!--↓IDセレクタを使ってコンテンツの設定します-->
 <p class="contents">
 <!--↑IDセレクタを使ってコンテンツの設定します-->
 ココに文字を書きます<br>
 今はまだ白い背景に黒い文字で順番に表示されているだけですが<br>
 次の項目の【カスタマイズ】でスタイルシートと組み合わせてカスタマイズしていきます。<br>
 スタイルシートではbodyタグに記述される
 ・フォントの種類<br>
 ・フォントの色<br>
 ・フォントのサイズ<br>
 ・背景色<br>
 ・文字の行間<br>
 ・スクロールバー<br>
 ・リンク文字の色<br>
 などの指定をしています<br>
 <br>
 動作環境<br>
 Windows XP Internet Explorer<br>
 </p>

 <!--↓IDセレクタを使ってボトムの設定します-->
 <p class="bottom">カウンターとかあったらココに入れる</p>
 <!--↑IDセレクタを使ってボトムの設定します-->

 <!--↓ココでサイトのサイズ設定を閉じます-->
 </div>
 <!--↑ココでサイトのサイズ設定を閉じます-->
 </body>
</html>

タグをコピー(テキストエリア内左クリックで【すべて選択】)


さて、どうでしょう。大まかな名前付けと設定ができましたね。
次は、設定した部分の表示位置を決めていきましょう。
これもスタイルシートを使って指定していくので、前項目までで作ってきたものに手を加えていきます。

ページTOP
ひとつ前のページに戻る

表示位置を決める

今までの記述で出来たものを練習場1にコピペして開いてみてくださいね。
色分けをしているので、それぞれが独立した一つのかたまりになっているのがわかりますね。
では、これらの表示位置を決めていきましょう。
【サイトサイズ】 の部分を画面の中央に表示
【My Site】はそのままで
【メニュー】 の部分を縦並びで左サイドに表示
【コンテンツ】 の部分をサイトサイズに合う大きさに変更し、中のテキストも少し手直し
【その他】 の部分は一番下の左端に
という具合になるようスタイルシートに追記します。
ここでの大きなポイントは、<body>〜</body>のタグは一切触らない、ということです。
スタイルシートのみの変更で、サイト内の表示をガラリと変えてしまうということです。
この方法を使うことにより、サイトを手直ししたり、リニューアル(プチリニュ程度)するときに
非常に簡単に出来てしまうわけです。
さらには、最後の項目でお話しする【外部スタイルシートを作りリンクを貼る】事により
他に作った統一性のあるコンテンツの表示も、簡単に一括で変更できてしまうというわけです。
初めのうちはわかりにくいかもしれませんが、触っていくうちにどれだけ便利かよくわかると思いますよ。
では、さっそくスタイルシートに追記していきましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  text-align: center; /*sitesizeの表示を中央にするための記述*/
  margin-top: 60px; /*上下の位置はmargin-topを使用して上からの距離で設定*/
  }

 /*ココからサイトサイズ設定用です*/
 #sitesize{
   margin: 0 auto;
   padding: 0 0px;
   width: 1000px;
   height: 600px;
   background-color: #666666;
   border: 1px solid #666666;
   text-align: left; /*bodyでテキストがセンタリング設定になっているので左に設定*/
  }
 /*ココまでがサイトサイズ設定用です*/

 /*ココからsitename設定用です*/
 .sitename{
   background-color: #ffffff;
   color: red;
   font-size: 20px;
   font-weight: bolder;
   font-family: MS P明朝;
   text-align: center;
   height: 60px;
   padding: 20,0,0,20;
  }
 /*ココまでがsitename設定用です*/

 /*ココからmenu設定用です*/
 .menu{
   float: left; /*左に表示されるよう回り込み設定*/
   background: #cc0000;
   margin: 10;
   padding: 10,50,10,20; /*枠内の余白を設定設定*/
   width: 80px; /*縦に表示されるよう横幅を小さく変更設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 80px; /*行間を80pxにし縦長になるように設定*/
  }
 /*ココまでがmenu設定用です*/

 /*ココからcontents設定用です*/
 .contents{
   background: #cccccc;
   color: #000000;
   width: 100%;
   margin: 30; /*メニューと高さをあわすために30に変更*/
   padding: 10;
   height: 420px; /*サイトサイズに合わすために高さを420pxに設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 20px; /*行間を20pxに設定*/
  }
 /*ココまでがcontents設定用です*/

 /*ココからbottom設定用です*/
 .bottom{
   color: #cccccc;
   margin: auto,0;
   text-align: right; /*テキストを右端に表示するように設定*/
  }
 /*ココまでがbottom設定用です*/
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->
  <title>サイト名</title>
 </head>
 <body>
 <!--↓IDセレクタを使ってサイトのサイズ設定します-->
 <div id="sitesize">
 <!--↑IDセレクタを使ってサイトのサイズ設定します-->

 <!--↓クラスセレクタを使ってサイト名の設定します-->
 <p class="sitename">My Site</p>
 <!--↑クラスセレクタを使ってサイト名の設定します-->

 <!--↓IDセレクタを使ってメニューの設定します-->
 <p class="menu">TOP DIARY BBS Gallery LINK</p>
 <!--↑IDセレクタを使ってメニューの設定します-->

 <!--↓IDセレクタを使ってコンテンツの設定します-->
 <p class="contents">
 <!--↑IDセレクタを使ってコンテンツの設定します-->
 ココに文字を書きます<br>
 今はまだ白い背景に黒い文字で順番に表示されているだけですが<br>
 次の項目の【カスタマイズ】でスタイルシートと組み合わせてカスタマイズしていきます。<br>
 スタイルシートではbodyタグに記述される
 ・フォントの種類<br>
 ・フォントの色<br>
 ・フォントのサイズ<br>
 ・背景色<br>
 ・文字の行間<br>
 ・スクロールバー<br>
 ・リンク文字の色<br>
 などの指定をしています<br>
 <br>
 動作環境<br>
 Windows XP Internet Explorer<br>
 </p>

 <!--↓IDセレクタを使ってボトムの設定します-->
 <p class="bottom">カウンターとかあったらココに入れる</p>
 <!--↑IDセレクタを使ってボトムの設定します-->

 <!--↓ココでサイトのサイズ設定を閉じます-->
 </div>
 <!--↑ココでサイトのサイズ設定を閉じます-->
 </body>
</html>

タグをコピー(テキストエリア内左クリックで【すべて選択】)


どうでしょう。随分と表示が変わりましたね。
まだまだこの他にも、リンクの指定をしたりスクロールバーの指定をしたりと
触れる場所はたくさんあります。
又、細かい所はスタイルシートの勉強をしなくてはいけません。
HTMLタグでもスタイルシートでもそうですが、本当に沢山の用語や決まりがあります。
それらを全て覚えこむのは無理な話です。
操り方を覚え、必要なタグを書籍やこのサイトのような所から引用し貼り付ける。
その繰り返しで、サイトの作り方を身につけていきましょう。
ページTOP
ひとつ前のページに戻る

外部スタイルシートを作りリンクを貼る

では最後に、スタイルシートを外部スタイルシートにし、リンクを貼って読み込ませます。
ここまで紹介してきたのは<head>〜</head>内で指定する埋め込みスタイルシートでしたが
ここでスタイルファイルを作ってみます。
ここは簡単ですからね^^

まずは上で作ったファイルからスタイルシートの記述部分を切り取ります。
切り取ったものを少し手直しして○○.css≠ニいう名前をつけて保存します。
この○○.css≠ニいうファイルがスタイルファイルです。

 <!--ココからスタイルシートの記述です-->
 <style type="text/css">
 <!--
 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  text-align: center; /*sitesizeの表示を中央にするための記述*/
  margin-top: 60px; /*上下の位置はmargin-topを使用して上からの距離で設定*/
  {

 /*ココからサイトサイズ設定用です*/
 #sitesize{
   margin: 0 auto;
   padding: 0 0px;
   width: 1000px;
   height: 600px;
   background-color: #666666;
   border: 1px solid #666666;
   text-align: left; /*bodyでテキストがセンタリング設定になっているので左に設定*/
  }
 /*ココまでがサイトサイズ設定用です*/

 /*ココからsitename設定用です*/
 .sitename{
   background-color: #ffffff;
   color: red;
   font-size: 20px;
   font-weight: bolder;
   font-family: MS P明朝;
   text-align: center;
   height: 60px;
   padding: 20,0,0,20;
  }
 /*ココまでがsitename設定用です*/

 /*ココからmenu設定用です*/
 .menu{
   float: left; /*左に表示されるよう回り込み設定*/
   background: #cc0000;
   margin: 10;
   padding: 10,50,10,20; /*枠内の余白を設定設定*/
   width: 80px; /*縦に表示されるよう横幅を小さく変更設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 80px; /*行間を80pxにし縦長になるように設定*/
  }
 /*ココまでがmenu設定用です*/

 /*ココからcontents設定用です*/
 .contents{
   background: #cccccc;
   color: #000000;
   width: 100%;
   margin: 30; /*メニューと高さをあわすために30に変更*/
   padding: 10;
   height: 420px; /*サイトサイズに合わすために高さを420pxに設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 20px; /*行間を20pxに設定*/
  }
 /*ココまでがcontents設定用です*/

 /*ココからbottom設定用です*/
 .bottom{
   color: #cccccc;
   margin: auto,0;
   text-align: right; /*テキストを右端に表示するように設定*/
  }
 /*ココまでがbottom設定用です*/
 -->
 </style>
 <!--ココまでがスタイルシートの記述です-->

タグをコピー(テキストエリア内左クリックで【すべて選択】)


これが切り取った部分ですね。
では、ココから
<!--ココからスタイルシートの記述です-->
<style type="text/css">
<!--
の部分と(上から3行)
-->
</style>
<!--ココまでがスタイルシートの記述です-->
の部分(下から3行)を消してしまいましょう。
<!-- 〜 -->の部分はコメントタグと言って、実際には表示されないコメントを記述するためのタグです。
ただし外部スタイルシートに記述する場合は必要ありません。

外部スタイルシートで表示されないコメントを記述するためには
/* 〜 */ というタグを使います。(余談^^)

はい、それでは切り取ったファイルを名前をつけて保存します。
とりあえずsample.css≠ニでも名前をつけておいて下さい。
保存する場所ですが、index.html≠ニ同じ階層でもかまいませんし
同じ階層にフォルダを作りその中に保存してもかまいません。
リンクを指定するときにキチンと指定されていればいいのですからどこでもいいです。
とりあえず、今回はわかりやすいように同じ階層に保存します。

 body{
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  font-family: MS UI Gothic;
  text-align: center; /*sitesizeの表示を中央にするための記述*/
  margin-top: 60px; /*上下の位置はmargin-topを使用して上からの距離で設定*/
  {

 /*ココからサイトサイズ設定用です*/
 #sitesize{
   margin: 0 auto;
   padding: 0 0px;
   width: 1000px;
   height: 600px;
   background-color: #666666;
   border: 1px solid #666666;
   text-align: left; /*bodyでテキストがセンタリング設定になっているので左に設定*/
  }
 /*ココまでがサイトサイズ設定用です*/

 /*ココからsitename設定用です*/
 .sitename{
   background-color: #ffffff;
   color: red;
   font-size: 20px;
   font-weight: bolder;
   font-family: MS P明朝;
   text-align: center;
   height: 60px;
   padding: 20,0,0,20;
  }
 /*ココまでがsitename設定用です*/

 /*ココからmenu設定用です*/
 .menu{
   float: left; /*左に表示されるよう回り込み設定*/
   background: #cc0000;
   margin: 10;
   padding: 10,50,10,20; /*枠内の余白を設定設定*/
   width: 80px; /*縦に表示されるよう横幅を小さく変更設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 80px; /*行間を80pxにし縦長になるように設定*/
  }
 /*ココまでがmenu設定用です*/

 /*ココからcontents設定用です*/
 .contents{
   background: #cccccc;
   color: #000000;
   width: 100%;
   margin: 30; /*メニューと高さをあわすために30に変更*/
   padding: 10;
   height: 420px; /*サイトサイズに合わすために高さを420pxに設定*/
   font-size: 14px; /*文字の大きさを14pxに設定*/
   line-height: 20px; /*行間を20pxに設定*/
  }
 /*ココまでがcontents設定用です*/

 /*ココからbottom設定用です*/
 .bottom{
   color: #cccccc;
   margin: auto,0;
   text-align: right; /*テキストを右端に表示するように設定*/
  }
 /*ココまでがbottom設定用です*/

タグをコピー(テキストエリア内左クリックで【すべて選択】)


↑というsample.css<tァイルが出来上がりました。
そして、スタイルシートを切り取って残った部分をindex.html≠ニして同じ階層に保存するのですが
一行だけ付け加えなくてはいけないタグがあります。
<head>〜</head>の間に
<link rel="STYLESHEET" type="text/css" href="sample.css">
と記述して下さい。
階層が変わったり、スタイルファイルの名前が変わったりする場合は
href="sample.css"の部分を変えて下さい。
以上です! おつかれさまでした^^
このファイルはサーバーにアップしなくてもローカル保存でブラウザで確認できますからね^^
ちゃんと表示されるかどうか確認してみてください。
また、興味があったり時間があったりした時は
自分で色んなところを弄ってみてください。結構楽しいです^^

あ〜ホント、お疲れさま〜♪

次のページではブラウザでの確認です。
よっぽどでない限り、Internet Explorerだけで充分だと思いますが…


ページTOP
ひとつ前のページに戻る
アウトライン作成 ブラウザでチェック