稼げる副職ナビ

XHTML記述でサイト作成、スタイルシートの記述方法を紹介。

スタイルシートの使い方1

 まずは「index.html」をブラウザで確認します。

 一番上に書いてある「タイトル」というところと、その下の 「ここにサイトの紹介文を記入 」というところにデザインを入れてみます。

 「style.css」を開きます。(CSSファイルはダブルクリックするだけで、ノートパッドで 起動します)

 「style.css」にこのように記述してください。

.toptitle{
border:3px solid;
border-color:#8B4513;
background-color:#006400;
width:100%;
}
.tabletop{
background-color:#EEE8AA;
border:3px solid;
border-color:#8B4513;
width:100%;
height:50px;
}

 このように記述します。打ち終えたら必ず上書き保存してください。

 「.toptitle」や「.tabletop」は、デザインの名前(クラス名という)です。
 このクラス名は、名前の頭に「.」を入れるのが決まりになっていますが、その後ろは 半角英数字なら自分の好きな名前に出来ます。

 border:3px solid;は、「枠線の太さ3がピクセルで実線」という意味です。
 数字を大きくすれば線も太くなります。1ピクセルがどのくらいなのかは 後でご自分で試してください。

 border-color:#8B4513;は「枠線の色は茶色」という意味です。サイトを作る際、 色を指定するときは「#8B4513」などの「カラーコード」というもので示していきます。
 カラーコード表は後々のページで紹介していきます。

 background-color:#006400;は「背景は濃い緑色」という意味です。

 width:100%;は「横幅は100%の広さ」という意味です。ちなみに「%」 表示以外に「px」でも指定できます。

 height:50px;は「高さは50ピクセルで」という意味です。こちらも「%」 で指定する事が出来ます。

 スタイルシートの記述の仕方はこんな感じです。しかしこれだけ書いても 「index.html」の方にはまだ反映されていません。
 次のページでスタイルシートの反映のさせ方を書いていきます。


「スタイルシートの使い方2」へ


Copyright © 2011 稼げる副職ナビ. All Rights Reserved
ルミガンでパッチリまつげに
inserted by FC2 system