ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTMLソース勉強部屋
制作:ジョイ@関西

 トップ | ≪小技集≫

スタイルシート記述


宣言は、半角セミコロン「;」で区切れば複数設置できます。
不慣れですが・・・・私の判る範囲で、便利そうなものだけを書いています。
ブラウザによっては有効でない場合がありますので、ご自分のPCで確かめてください。

基本構造
body { background-color:yellow; }
セレクタ { プロパティ:値 }→プロパティ+値=宣言( declaration
下記の1〜3のいずれの場合も HTML<head>〜</head>間の先頭に次の宣言を書きます。
<meta http-equiv="Content-Style-Type" content="text/css">
1.そのページだけ全体に有効にする場合
<head>〜</head>間に、
<style type="text/css">
<!--
body { background-color:yellow; scrollbar-base-color:#ff0000; }
.font1 { font-size:15px; line-height:150%; font-family:'HGゴシックE'; }
-->
</style>

body { background・・・・」は、本文に「<body>」と書くだけで有効になります。
.font1」はclass属性と呼び「.」から記述し、html本文中には、
例えば<div class="font1">、<td class="font1">などと「.」なしでclass指定が必要です。
2.一部分だけ利用する場合
必要なところにスタイルを指定します。例えば、
<div style="font-size:18px;line-height:150%;background-color:#ffdddd">
文字サイズは18ピクセル、行ピッチは文字サイズ18×150%=27ピクセル、<br>
文字の背景色は薄い赤色になります。
</div>

と指定する。
3.複数のページに利用する場合
別にスタイルシート(仮名:style1.css)を用意します。
htmlソースの<head>〜</head>間に、
<link href="style1.css" type="text/css" rel="stylesheet">
と追加し、スタイルシート(style1.css)には、
body { background-color:yellow; scrollbar-base-color:#ff0000; }
.font1 { font-size:15px; line-height:150%; font-family:'HGゴシックE'; }

のように書きます。複数のページに利用するとき、この方法が便利です。
スタイルシートを保存するときは拡張子「.css」を付けます。

{  } 内末尾の「;」や半角スペースはなくても良い。
リンク指定(クリック前) a:link { text-decoration:underline; color:#0000ff; }
リンク指定(クリック後) a:visited { text-decoration:underline; color:#990000; }
リンク指定1(オンマウス時) a:hover { text-decoration:none; color:#ffffff; background-color:#0000ff; }
リンク指定2(オンマウス時) a:hover { color:#ff0000; position:relative; top:1px; left:1px; }
サンプルは用意できていませんが、アンダーラインの有無、文字の色、背景色、オンマウスで動かすなど色々と変化できます。
position」以外は判りにくいですが、画像にも適用できます。
背景色指定 { background-color:yellow; }
背景色指定 { background-color:#ffff99; }
背景色の見本
背景画像指定 { background-image:url(********.jpg); }
背景画像繰り返し方向指定 { background-repeat:repeat-x; }
背景画像繰り返し方向指定 { background-repeat:repeat-y; }
背景画像繰り返さない指定 { background-repeat:no-repeat; }
背景画像固定 { background-attachment:fixed; }
背景画像表示位置指定 { background-position:top center; }
背景画像表示位置指定 { background-position:right bottom; }
背景をまとめて指定 { background:#ffffff url('*****.jpg') right bottom no-repeat fixed; }
まとめて書く場合はタグの属性のように「半角スペース」で区切ります。書き順は気にしなくても良さそうです。
/* 文字の大きさ、行ピッチ、文字の色 */
フォントサイズ指定 { font-size:15px; }
行ピッチ指定 { line-height:150%; }
行ピッチ指定 { line-height:20px; }
文字色指定 { color:blue; }
文字色指定 { color:#0000ff; }
/* 書体は、半角全角・大文字小文字・スペースなど指定どおりに記述しないと表示されないので、コピペをお勧めする
スタイルシートでは「'」「"」は使わないことになっていますが、この書体だけは使います。 */
書体指定 { font-family:'MS UI Gothic'; }
書体指定 { font-family:'MS P明朝'; }
書体指定 { font-family:'HG丸ゴシックM-PRO'; }
書体指定 { font-family:'HGゴシックE'; }
書体をまとめて指定 { font:italic bold 18px/150% 'HGゴシックE'; }
サイズと書体は必ず指定しないとダメです。また、書き順があるようなので、真似てください。
/* 境界線 solid:直線、double:二重線、inset:くぼんで見える、outset:浮き上がって見える */
境界線太さ・色指定 { border:1px solid gray; }
境界線太さ・色指定 { border:1px solid #666666; }
境界線太さ・色・辺指定 { border-left:1px solid red; }
境界線太さ・色・辺指定 { border-bottom:1px solid #ff0000; }
/* 太さは上・右・下・左の順で、半角スペースで区切る */
境界線4辺別々太さ指定 { border-style:solid; border-width:1px 8px 15px 30px; }

境界線からのマージン指定 { padding-top:30px; padding-bottom:0px; padding-left:20px; padding-right:10px; }
水平線(hr)指定 { border:1px solid red; width:300px; background-color:blue; height:6px; }
ページ全体マージン0指定 body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }
ページ全体マージン0指定 body { margin:0px; }
/* スクロールバーはもっと詳細に指定できますが、下記で充分だと思います。 */
スクロールバー色指定 body { scrollbar-base-color:#ff0000; }
スクロールバー色指定 body { scrollbar-base-color:red; }
左スクロールバー非表示 body { overflow-y: hidden; }
下スクロールバー非表示 body { overflow-x: hidden; }
/* (特殊)Windows IE5.5以上のみ */
縦書きにする { writing-mode:tb-rl; }

ページの先頭へ


 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | ≪小技集≫ | ≪サイトマップ≫

Copyright(C) 2005 ホームページを自作しよう≪JoyWave便利箱≫ All Rights Reserved.