CSS

■Cascading Style Sheets

CSS = Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

■CSS名前付けの定番

http://www.tagindex.com/stylesheet/basic/naming.html

■記述

■基本的記述

セレクタ { プロパティ : 値 ; }

記述例：

color:blue;

font-size:16px;

}

/* コメント */

■配置

top

bottom

left

right

■余白

margin

padding

１つの値を指定 margin: [上下左右];

２つの値を指定 margin: [上下] [左右];

３つの値を指定 margin: [上] [左右] [下];

４つの値を指定 margin: [上] [右] [下] [左];

■線

border: solid 1px #e0e0e0;

border-bottom: dotted 1px #e0e0e0;

■文字の間隔

letter-spacing

■折り返しなし

white-space: nowrap;

■リストのマーク画像が文字とずれる時

background:url("img/y_blue.gif") no-repeat 0px 2px;

no-repeat x方向マージン y方向マージンで調整するといいよ。

■フォントサイズ

/* ---------------------

* FONTSIZE MODEL *

* ---------------------

* 63% -> 10pxに相当

* 70% -> 11pxに相当

* 75% -> 12pxに相当

* 82% -> 13pxに相当

* 88% -> 14pxに相当

* 94% -> 15pxに相当

* 100% -> 16pxに相当

* 107% -> 17pxに相当

* 113% -> 18pxに相当

* 119% -> 19pxに相当

* 125% -> 20pxに相当

* --------------------- */

■CSSを記述する場所

１．HTMLのタグに直接記述する

記述例：<p style="margin:10px;">テキスト</p>

２．<HEAD>内に記述する

<HEAD>

p{ margin:10px; }

</STYLE>

</HEAD>

３．外部CSSファイルとして読み込む

ヘッダーでリンク先のスタイルシートを指定

<HEAD>

</HEAD>

※スタイルが適用される優先順位は、１→２→３です。（１が最優先）

Tips

スクロールバーのカスタマイズ

<STYLE TYPE="text/css"><!--

HTML,BODY {

scrollbar-base-color : 色;

scrollbar-face-color : 色;

scrollbar-track-color : 色;

scrollbar-arrow-color : 色;

scrollbar-3dlight-color : 色;

scrollbar-highlight-color : 色;

scrollbar-shadow-color : 色;

scrollbar-darkshadow-color : 色;

-->

</STYLE>

線・枠のカスタマイズ（hr、table、td）

●●●

{border-style:solid;

border-color:#c0c0c0;

border-width:1 0 0 0;}

各タグで、直接記述の場合

Style=" border-style:double ; border-color:#7db8ff; border-width:4;"

Style=\" border-style:solid ; border-color:#7aade0; border-width:1;\"

フォームのカスタマイズ（Form）

○コマンドボタン、テキストエリア、コンボボックス

input,textarea, select{

border-style:solid; border-width:1;

border-color:$tborder_color;

background-color : #ffffff; color : $text;}

フォーム入力時、日本語入力の制御

日本語入力機能（IME）をオンにしたり、オフにしたりするには、スタイルシートの ime-mode を用います。

active =フォーカス移動時にオン

inactive =フォーカス移動時にオフ

disabled =IME の使用禁止

Page updated

Google Sites

Report abuse