表紙に戻る

W3C (World Wide Web Consortium) という団体によって1996年に提唱されたホームページのスタイルを制御するための規格です。スタイルシートとも呼ばれています。スタイルシートには､スタイル(レイアウト､デザインなど見栄えに関連するもの)だけをまとめて記述します。スタイルシートを利用すると、雑誌などに見られるような凝ったデザインをホームページ上で実現することができます。

スタイルシート（ＣＳＳ）の設定

この位置にドキュメントタイプを入れる（最上部）
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
この中でスタイルの指定　　　　　指定事にコメントを入れるには/*〜*/で囲む
-->
</style>
</head>

*<META http-equiv="Content-Style-Type" content="text/css">
HTMLでＣＳＳ（スタイルシート）を利用する際は、指定しておきます。

上記のスタイルタイプはページ全体に反映されてしまいます。

個々にスタイルタイプを反映することも出来ます。

（例えば<TD>であれば）
<TD style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;"></TD>

ドキュメントタイプと表示モード
標準準拠モード　と　互換モードの２種類の設定があります
これは、ドキュメントタイプによって表示に違いがあり、表示モードが切り替わるようになっています
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
通常なら、このドキュメントの記述で良いと思います

使用する単位と色の指定

絶対単位 in インチ（１インチ＝2.54cm）
cm センチメートル
mm ミリメートル
pt ポイント（）
pc パイか（）
相対単位 px ディスプレイの１ピクセルを１とした単位
em 対象となる要素で使用されている文字の値を１とした単位
ex 対象となる要素の小文字の大きさを１とした単位
　色の指定　；　カラーパレット参照（１６進数表示）
　その他；１０進数/rgb（0,200,125）　％表示/rgb(0,80%,50%)　があります

サンプル・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

<TABLE border="1">
<TBODY>
<TR>
<TD>テキスト内容</TD>
</TR>
</TBODY>
</TABLE>

上記のテーブルを表示しない場合： border="0"　テーブルＨＴＭＬ参照

上記の<TABLE>横幅：300　枠幅：1　として内側<TD>のスタイルを黒の線で入れる場合

<TABLE border="1" width="300">
<TBODY>
<TR>
<TD style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;"></TD>
</TR>
</TBODY>
</TABLE>　　　　となります



全体の文字、リンク文字を指定する

　　　color:　文字の色　　「カラーコード」　または　「色名」で指定します

リンクされた文字色を指定する　　全て blue 表示していますが、変更してください
<style type="text/css">
<!--
a:link　　 　{color:blue}　/*未訪問の色を指定します*/
a:visited　 {color:blue}　/*訪問済みの指定*/
a:hover　　 {color:blue}　/*マウスを重ねたときの指定*/
a:active 　 {color:blue}　/*クリックされたときの文字の色の指定*/
-->
</style>
指定事にコメントを入れるには/*〜*/で囲みます（編集する時にわかりやすくなります）

部分的に文字色を指定する場合　　class属性を設定します　

異なる文字の色指定する場合　文字指定の種類（h、p、・・・）など
こちらでも、class属性　を設定します
見出しh1,h2,・・・、段落Ｐ、・・・などで指定された文字を一度に指定することが出来ます

サンプル・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

<STYLE>
<!--
a{text-decoration: none;}
A:HOVER{border-bottom: solid 1 blue;background-color : #ddddff;}
-->
</STYLE>
a=下線をなくし、A=マウスが上に来ると色が変わります　　#ddddff　はカラー色です

文字の大きさを変える

　　　font-size:　文字の大きさを指定する

こちらでも、class属性　を設定します
見出しh1,h2,・・・、段落Ｐ、・・・などで指定された文字を一度に指定することが出来ます
文字のサイズの単位
数値 数値に単位を付けて文字のサイズを指定します
数値（％） 新要素の文字に対して％で指定します
xx-small 最も小さい文字で指定します
x-small 小さい文字で指定します
small やや小さい文字で指定します
medium ブラウザで設定されている標準サイズです（デフォルト）
large やや大きいサイズで指定します
x-large 大きい文字で指定します
xx-large 最も大きい文字で指定します
larger 新要素の文字に対して１段階大きく表示します
amaller 新要素の文字に対して１段階小さく表示します

文字（ＦＯＮＴ）の種類を指定する

　　　font-family:　文字の種類を指定する

こちらでも、class属性　を設定します
見出しh1,h2,・・・、段落Ｐ、・・・などで指定された文字を一度に指定することが出来ます
フォントの種類
フォント名 フォント名（絶対）を指定します
serif 明朝系のフォントで表示します
sans-serif ゴシック系のフォントで表示します
cursive 筆記体や行書体のフォントで表示します
fantasy 装飾がメインとなっているフォントで表示します
monospace 等幅フォントで表示します
＊フォント名の指定では、パソコンにそのフォントがインストールされている必要があります
＊インストールされていない環境では、フォント名を指定しても表示されません、また、表示されたとしても環境内でのフォントになってしまいます

文字列を太字で表示する

　　　font-weight:　文字の太さを指定する

こちらでも、class属性　を設定します
見出しh1,h2,・・・、段落Ｐ、・・・などで指定された文字を一度に指定することが出来ます
文字の太さ
数値 100（細）〜900（太）までの数値で指定します
bold 太字で表示します（数値；７００/自動的）
bolder １段階太く表示します
lighter １段階細く表示します
normal 標準の太さで表示します（数値；４００/自動的）
＊９段階で数値指定できますが、すべてのフォントに適応されるわけではありません
＊和文フォントでは、bold、normal　の２種類で表示されます

文字列を斜体で表示する

　　　font-style:　文字斜体を指定する

文字のスタイル
oblique 文字を斜体にして表示します
normal 文字を通常の状態で表示します（デフォルト；基準）


文字を大文字小文字を変換する

　　　text-transform:　変換方法の指定

文字のスタイル
capitalize 各単語の１文字目を大文字で表示します
uppercase すべての文字を大文字にします
lowercase すべての文字を小文字にします
none 文字を通常の状態で表示します（デフォルト；基準）

文字の複数指定を一度に行う

　　　font:　文字の指定

文字のスタイル、太さ、フォント、などの設定が出来ます
各属性を省略したときは、それぞれのデフォルト（基準値）となります
色の指定などの追加により、さらに指定が出来ます

背景色の指定をする

　　　background-color:　色コードの指定

ページ全体、文字列の背景、文字列一部の背景色を指定することが出来ます

　background-color:transparent　背景色を透明にします

背景に画像を表示する

　　　background-image:url(　背景画像ファイル名　）

ページ全体、文字列の背景、文字列一部の背景色を指定することが出来ます

　background-image:none　背景画像を表示しません

背景画像の並べ方を指定する

　　　background-repeat:　並べ方の指定

no-repeat 画像をひとつだけ、繰り返さずに表示します
repeat-x 横方向に繰り返して表示します
repeat-y 縦方向に繰り返して表示します
repeat 横方向、縦方向に繰り返し表示します

背景画像の表示位置を指定する

　　　background-position:　背景画像の表示位置指定

数値 左上からの距離を指定します
数値％ ページ全体の幅、高さに対する割合を％で指定します
top 上端にそろえます
bottom 下端にそろえます
center 中央にそろえます
left 左端にそろえます
right 右端にそろえます

背景画像を固定する

　　　background-attachment:　背景画像の表示動作指定

fixed 背景画像を固定して表示します
scroll 画面のスクロールにあわせて移動します


画像の効果を指定する（パラメータ）

　　filter:progid:DXImageTransform.Microsoft.BasicImage(パラメータ)

パラメータ
grayscale= グレースケールで表示 表示する：１　表示しない：０
invert= 色の反転表示 表示する：１　表示しない：０
xrey= 白黒反転表示 表示する：１　表示しない：０
opacity= 不透明度指定表示 透明　0.0　〜　1.0　不透明
mirror= 左右を反転して表示 表示する：１　表示しない：０
rotation= 回転表示 ０：回転なし　１：９０度　２：１８０度　３：２７０度

copyright (C) 2009 popfam.jp. all rights reserved.