naobe @ ウィキ
CSS
最終更新：
naobe
-
view
WEBアプリケーションに戻る
記述
タグ内
<span style="color:red;">あいうえお</span> <div style="color:red;">あいうえお</div>
ページ
<html>
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
H1 { color: red; }
-->
</style>
</head>
<body>
<h1>あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>
外部ファイル
<head> <link rel="stylesheet" type="text/css" href="xxx.css"> </head>
適用箇所の指定
ID
#elm123 { color:red; }
H1#elm124 { color:green; }
<span ID=elm123>あいうえお</span>
<h1 ID=elm124>かきくけこ</h1>
クラス
<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
P.red { color: red; }
P.green { color: green; }
-->
</style>
</head>
<body>
<p class=red>これはredクラスです。</p>
<p class=green>これはgreenクラスです。</p>
</body>
</html>
値の単位
99cm ... centimeters
99em ... font-sizeの高さを"1"とした相対指定。【例】1em : 1フォントサイズ。font-sizeにemを指定した場合は、親要素のフォントサイズに対する相対指定になる。
99ex ... 現在の英字の"x"の高さを"1"とした相対指定
99in ... inches
99mm ... millimeters
99pc ... picas
99pt ... points
99px ... pixels
99em ... font-sizeの高さを"1"とした相対指定。【例】1em : 1フォントサイズ。font-sizeにemを指定した場合は、親要素のフォントサイズに対する相対指定になる。
99ex ... 現在の英字の"x"の高さを"1"とした相対指定
99in ... inches
99mm ... millimeters
99pc ... picas
99pt ... points
99px ... pixels
スクロール
<style type="text/css">
p.infobox {
height: 5em;
overflow: auto;
border: red 1px dashed;
}
</style>
段組
中央に配置
div.body {
margin: 0 auto;
}
フォーム入力時の全角/半角モードを指定
eWEB 参照
【全角】
.txtmode1 {
ime-mode: active;
}
【半角】
.txtmode2 {
ime-mode: inactive;
}
インラインスタイルシート
<meta http-equiv="Content-Style-Type" content="text/css" />が必要
【使用例】
<p style="color: red">これは赤い文字の段落。</p>
