HOME 洗車 競馬 宝くじ SHOP 掲示板 1/18/2003更新
HOME PAGE PageBottom】  BACK 写真に影を付ける
NEXT 準備中

    スタイルシートを使ってみよう!
    統一感のあるページを作る場合スタイルシートを使うと便利です。
    表や文字のデザインなどサイト固有のルールをスタイルシートに書いておくと後から作るすべてのページで使えるようになります。
    とにかく説明よりも使ってみましょう。

  背景 文字 配置 
外部スタイルシート
外部があるならもちろんHTML内部にスタイルシートを書くことも出来ますが、数ページに渡るページ間に統一感を持たせるなら外部に一つスタイルシートを作ってどのページからも同じ物を参照する方が便利だし統一もとりやすくなります。

ファイル
スタイルシートのファイル名は "スタイルシート名.css"となります。

スタイルシートの中身は、一般のテキストファイルと同じです。ファイル名の最後が "〜.txt" では無く "〜.css" に変わっているだけです。 


A:link { color: #FF00FF }
A:visit { color: #FFFF00 }

ページにスタイルシートを設定する

<html>
  <head>
   <meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
   <title>ホームページを作ろう! スタイルシートを使ってみよう!</title>
   
<link rel="stylesheet" href="../スタイルシート名.css">
 </head>


<head>〜</head> の間にスタイルシートの参照コードを入れます。
href="../スタイルシート名.css" ここは画像の指定と同じですね。


<td class="クラス名"></td>


スタイルシートで設定した class はタグの括弧の中に設定して使います。この場合設定したタグだけに効果が現れます。
タグに対して直接スタイルシートを設定するとその効果はすべての同じタグに対して現れます。

スタイルシートの中身
タグをスタイルシートでカスタマイズする
    HTMLタグ名 { 項目1 : 値1 ; 項目2 : 値2 ; 項目3 : 値3 ; 項目4 : 値4 ; ・・・ }

    *一つのタグに対して同時にいくつもの項目を設定できます。
class での設定
    スタイルシートファイル内
    class
    .クラス名 { 項目1 : 値1 ; 項目2 : 値2 ; 項目3 : 値3 ; 項目4 : 値4 ; ・・・ }

    クラス名の前にはピリオドがつきます。

    HTMLのタグ内
    <a class="クラス"></a>
    <td id="ID"></td>

項目(背景) タグ:body / table / td / div
項目 説明 値・例
background-color 背景色
background-image 背景画像 background-image { url(" 背景画像のファイル名 ") }
background-repeat 背景画像の並べ方 background-repeat { 並べ方 }
no-repeat : 1回だけ表示
repeat : 縦横に連続して表示
repeat-x : 左上の横方向のみ表示
repeat-y : 左上から縦方向のみ表示
background-position no-repeat時の画像位置 background-position { 横位置 縦位置 }
横方向 : left center right 0 〜 100%
縦方向 : top center bottom 0 〜 100%
background-attachment 背景画像の固定・スクロール fixed(背景は同じ位置に表示されスクロールしない)
scroll(通常:他の画面とあわせてスクロールする)
項目(文字) タグ:font / A:active / A:hover / A:link / A:visited / body / table / tr / td /
項目 説明 値・例
color 文字色 color { blue }, color { #afff01 }
font-size 文字の大きさ A:link { font-size: nomal }, A:link { font-size: xx-samall }
単位付の数値

smaller larger
xx-small x-small small medium large x-large xx-large
font-weight 文字の太さ lighter nomal bold bolder
100 200 300 400 500 600 700 800 900
font-style 文字スタイル { font-style: スタイル }
normal
italic
oblique
font-decoration 文字装飾 { font-decoration : 値 }
none:なし
underline:下線
overline:上線
line-through:取消線
font-family フォントの種類 { font-family : フォント名, フォント名, ・・・ }
serif
sans-serif
fantasy
monospace
letter-spacing
word-spacing
文字間隔
単語間隔
{ letter-spacing: 文字間隔}
normal
単位付数値
項目(配置) タグ:h1 〜 h6 / table / td / div / p / img /
項目 説明 値・例
text-align 横位置 h1 { text-align : left }
p { text-align : center }
div { text-align : right }
vartical-align 縦位置 { vartical-valign: top }
{ vartical-valign: center }
{ vartical-valign: bottom }
HOME PAGE PageTop】  BACK 写真に影を付ける
NEXT 準備中