■Cascading Style Sheets
CSS = Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
■基本的記述
セレクタ { プロパティ : 値 ; }
記述例:
p{
color:blue;
font-size:16px;
}
/* コメント */
■配置
top
bottom
left
right
■余白
margin
padding
1つの値を指定 margin: [上下左右];
2つの値を指定 margin: [上下] [左右];
3つの値を指定 margin: [上] [左右] [下];
4つの値を指定 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を記述する場所
1.HTMLのタグに直接記述する
記述例:<p style="margin:10px;">テキスト</p>
2.<HEAD>内に記述する
<HEAD>
<STYLE TYPE="text/css">
p{ margin:10px; }
</STYLE>
</HEAD>
3.外部CSSファイルとして読み込む
ヘッダーでリンク先のスタイルシートを指定
<HEAD>
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
※スタイルが適用される優先順位は、1→2→3です。(1が最優先)
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 の使用禁止
<textarea style="ime-mode: active;"></textarea>