Template b ... HTMLテンプレート素材集

WEBページテンプレート テーブルテンプレート スタイルシートテンプレート apeskin FC2ブログ用テンプレート（準備中） の配布

sozai-R 素材NAVI 素材の森 素材屋ランキング 素材の森ランキング

素材の森 素材NAVI sozai-R

 

スタイルシートには、『ホームページの作成者が意図したように閲覧者に表示されない』など、お使いのブラウザ（インターネットエクスプローラー、ネットスケープなど）によって、命令文が正常に伝わらないものも一部あります。ブラウザ対応表はスタイルシート(css)学習辞典様にて詳細が記されてますので参考にしてみてください。

 

▼ スタイルシートのHELP

 

▼ タグに直接書き込む方法

span これだけを記述しても外観の変化はない。スタイルシートを使用するために使うタグ
style="●" スタイルシートの命令文 background-color:●; 背景色
font-weight:●; 文字の太さ font-color:●; 文字色

 

① 文章の一部に対して、背景：ピンク、太文字、文字色：青を指定する場合、
【例】こんなかんじ
<span style="background-color:#FFCCFF; font-weight:bold; color:#0033CC;">こんなかんじ</span>

② TABLE、DIV、Pなどのタグに対して、背景：ピンク、太文字、文字色：青を指定する場合、
【例】

こんなかんじ

<table border="0" style="background-color:#FFCCFF; font-weight:bold; color:#0033CC;">
<tr> <td>こんなかんじ</td> </tr>
</table>

 

▼ 1つのページ全体に対して指定する方法

<style type="text/css">
<!--
●●●
-->
</style>		 a、DIV、P、TABLEなどのページ内に存在するそれぞれのタグに対し、スタイルシートを一括して指示するためのタグ。HTMLページの<HEAD>と</HEAD>の間に組み込みます。
a { ● }

未訪問リンクに対しての命令

 a:hover { ● } リンクにマウスが載った時の命令
a:visited { ● }

訪問履歴のあるリンクに対する命令

 body { ● } ページの背景、ページ全体の書体などを命令
text-decoration:none; 文字の下線を消す background-color:●; 背景色
font-size:●;
 文字の大きさ color:●; 文字色

 

① ページ全体の未訪問リンクの文字色をblue、リンクにマウスが載った時の文字色をred、訪問履歴のあるリンクの文字色をpink、ページ全体の背景色をglay、リンクの下線を消す、ページ全体の文字色を＃FFFFFF（白）ページ全体の文字の大きさを12ピクセルに指定する場合。

ソース

サンプルページ

 

▼ 複数のページを1枚のスタイルシートで指定する方法（スタイルシートを外部に飛ばす）

『1つのページ全体に対して指定する方法』で使用したスタイルシートと同じ内容の命令文を複数のHTMLページで共有することができます。メモ帳などを起動し、 以下の命令文を貼り付けます。
<style type="text/css">
-->
<!--
</style>
↑この赤文字部分は貼り付ける必要はありません。

ソース

ファイルの拡張子が.cssとなるように、style.cssと名前を付けてファイルを保存します。

HTMLページにこのスタイルシートファイルを呼び出すタグを記述します。記述する場所は、<HEAD>と</HEAD>の間に記述します。

<link href="style.css" rel="stylesheet" type="text/css">

サンプルページ

(C)2006 Template b. All Rights Reserved.