2010年02月06日 スタイルシート(CSS)儂(わし)的解釈によるメモ [長年日記]
_ スタイルシート(CSS)儂(わし)的解釈によるメモ
例によって自分勝手な解釈、用語でメモメモっと...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <title>CSS sample</title> <style TYPE="text/css"> <!--
ヘッダー部で定義する場合は<style>タグと<!--で開始。
/*
* コメントも書けるよ
*/
H3, H4 {
color: red;
background: yellow
}
タグ(<h3><h4>)に対するスタイルの指定。
P.green {
color: green;
}
タグ(<p>)に指定するクラス(class="green")に対するスタイルの指定。
ちなみに、タグ中に指定するクラスは class="hoge foo bar" のように複数指定が可能(2011.12.15 追記)。
また、
P.green span{
color: green;
}
とした場合は、「class="green"を指定した<p>タグの内部の<span>タグ」に対するスタイル指定となる(2011.12.15 追記)。
*.red {
color: red;
}
クラス(class="red")に対するスタイルの指定。
#blue {
color: blue;
}
ID(id="blue")に対するスタイルの指定。
/* hover : マウスが乗った時
* link : リンク
* visited : クリック済のリンク
* active : クリックされた時
* focus : TABキーで選択された時
*/
:hover {
color: blue;
}
疑似クラス(hover)に対するスタイルの指定(2011.12.15 追記)。
*.iro_shitei {
color: red;
}
文字色の指定。
*.back_iro_shitei {
background: #FF0000; /* #RRGGBB */
}
文字の背景色の指定。
*.soto_yohaku {
/* margin: 3em; 下記の4つをまとめて指定する場合 */
margin-top: 3em; /* 3文字の余白 */
margin-bottom: 3em; /* 3文字の余白 */
margin-right: 3em; /* 3文字の余白 */
margin-left: 3em; /* 3文字の余白 */
border: 1px solid gray;
}
マージンの指定。指定したタグの外側の余白幅。
*.uchi_yohaku {
/* padding: 3em; 下記の4つをまとめて指定する場合 */
padding-top: 3em; /* 3文字の余白 */
padding-bottom: 3em; /* 3文字の余白 */
padding-right: 3em; /* 3文字の余白 */
padding-left: 3em; /* 3文字の余白 */
border: 1px solid gray;
}
パディングの指定。指定したタグの内側の余白幅。
*.waku {
/* border: 1px solid gray; 下記の4つをまとめて指定する場合 */
border-top: 1px none red;
border-bottom: 3px dotted green;
border-right: 5px dashed blue;
border-left: 7px double black;
}
枠線の指定。
*.hide {
/* block, inline, list-item, none */
display: none;
}
表示方法の指定
- block : ブロック要素として表示
- inline : インライン要素として表示
- list-item : リストの要素として表示
- none : 表示しない(領域も無くなる)
*.basyo_static {
position: static; /* 既定の場所 */
border: 1px solid gray;
}
表示位置の指定。デフォルトの位置。
*.basyo_abs {
position: absolute; top: 2em; left: 4em;
border: 1px solid gray;
}
指定したタグの親要素の左上を原点とする表示位置の指定。
*.basyo_rel {
position: relative; top: 2em; left: 4em;
border: 1px solid gray;
}
デフォルトの表示位置を原点とする位置指定。
*.basyo_fix {
position: fixed; top: 2em; left: 4em;
border: 1px solid gray;
opacity: 0.5; /* for Firefox */
filter: alpha(opacity=50); /* for Internet Explorer */
color: black;
background-color: pink;
}
ブラウザの左上を原点とする表示位置の指定。スクロールの影響を受けない。IE6以前ダメ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
上記のように、htmlファイルの先頭で <!DOCTYPE ...> 宣言していれば、IE7以降ではOK。
あと、ついでに opacity, filter を使って透明度を指定(背景が透けて見える)。
*.gazou_basyo {
float: right; /* left, right, none */
width: 120px;
height: 90px;
}
右または左に回り込む位置指定。
*.invis {
/* visible, hidden, inherit */
visibility: hidden;
}
表示、非表示の指定。表示領域は保持される。
*.indent {
text-indent: 1em;
border: 1px solid gray;
}
字下げの指定。
*.text_basyo {
text-align: center; /* left, right, center, inherit */
border: 1px solid gray;
}
センタリング等の指定。
*.text_kazari {
text-decoration: line-through; /* none, underline, overline, line-through, blink, inherit */
border: 1px solid gray;
}
文字列飾りの指定。
*.table_cell {
empty-cells: show; /* show, hide, inherit */
}
テーブルの空セルに対する枠表示の指定。
*.ime_on {
ime-mode: active; /* auto, active, inactive, disabled */
}
かな漢字変換の指定
--> </style>
-->, </style>で閉じる。
<link rel="stylesheet" type="text/css" href="csssample.css">
外部ファイル(csssample.css)にスタイルシートをまとめる事もできる。
</head>
<body> <h1>CSS sample</h1> <hr /> <h2>指定の仕方(その1)</h2> タグに「style=」パラメータを指定して行う。 <blockquote> 一部だけ<span style="color:red;">赤文字</span>にしてみる。 </blockquote>
タグに直接スタイルを指定することもできる。
<hr /> <h2>指定の仕方(その2)</h2> ヘッダー部分でタグのスタイルをまとめて指定する。 <blockquote> 一部だけ<h3>色を変えて</h3>みる。 </blockquote>
<hr /> <h2>指定の仕方(その3)</h2> ヘッダー部分でタグに対応するクラスのスタイルをまとめて指定する。 <blockquote> <p class="green"> 段落全体の色を変えてみる。 </p> </blockquote>
<hr /> <h2>指定の仕方(その4)</h2> ヘッダー部分でクラスのスタイルをまとめて指定する。 <blockquote> 一部だけ<span class="red">色を変えて</span>みる。 </blockquote>
<hr /> <h2>指定の仕方(その5)</h2> ヘッダー部分でIDのスタイルをまとめて指定する。 <blockquote> 一部だけ<span id="blue">色を変えて</span>みる。 </blockquote>
<hr /> <h2>指定の仕方(その6)</h2> 外部ファイルでスタイルをまとめて指定する。 <blockquote> 一部だけ<span class="blue_yellow">色を変えて</span>みる。 </blockquote>
<hr /> <h2>色の指定 color: (既出ですが)</h2> <blockquote> 一部だけ<span class="iro_shitei">色を変えて</span>みる。 </blockquote>
<hr /> <h2>背景色の指定 background: (既出ですが)</h2> <blockquote> 一部だけ<span class="back_iro_shitei">色を変えて</span>みる。 </blockquote>
<hr /> <h2>マージンの指定 margin(-top,-bottom,-right,-left):</h2> <blockquote class="soto_yohaku"> マージンは外側の余白。 </blockquote>
<hr /> <h2>パディングの指定 padding(-top,-bottom,-right,-left):</h2> <blockquote class="uchi_yohaku"> パディングは内側の余白。 </blockquote>
<hr /> <h2>枠の指定 border(-top,-bottom,-right,-left):</h2> <blockquote class="waku"> ワクワクする枠...。 </blockquote>
<hr /> <h2>表示の仕方を指定 display:</h2> <blockquote> 括弧の中は(<span class="hide">見えたら</span>)ダメ。 </blockquote>
<hr /> <h2>場所の指定 position: (static)</h2> <blockquote> 場所の指定 <span class="basyo_static">static(既定の場所)</span> </blockquote>
<hr /> <h2>場所の指定 position: (absolute)</h2> <blockquote> 場所の指定 <span class="basyo_abs">absolute(親要素の左上を原点とする)</span> </blockquote>
<hr /> <h2>場所の指定 position: (relative)</h2> <blockquote> 場所の指定 <span class="basyo_rel">relative(規定の場所からの相対位置)</span> </blockquote>
<hr /> <h2>場所の指定 position: (fixed IEダメ)</h2> <blockquote> 場所の指定 <span class="basyo_fix">fixed(スクロールせずに絶対位置に固定。IEではダメ)</span> </blockquote>
<hr /> <h2>レイアウト指定 float:</h2> <img src="http://myh.no-ip.org/~m-ito/lib100/lib100_1.jpg" class="gazou_basyo" /> 画像の説明がいろいろと入るわけですが、面倒なので適当な文章を入力してます。 <br style="clear: both;"> ここ以降は回り込みが解除されているはず。
<hr /> <h2>表示の仕方を指定 visibility:</h2> <blockquote> 括弧の中は(<span class="invis">見えたら</span>)ダメ。 </blockquote>
<hr /> <h2>字下げ text-indent:</h2> <blockquote class="indent"> 字下げで表示。 </blockquote>
<hr /> <h2>文字の表示位置 text-align:</h2> <blockquote class="text_basyo"> センタリングしてみました。 </blockquote>
<hr /> <h2>文字の飾り text-decoration:</h2> <blockquote> <span class="text_kazari">打ち消し線。</span> </blockquote>
<hr /> <h2>テーブルの枠を常に表示 empty-cells: (IEダメ?)</h2> <table border="1" class="table_cell"> <tr><th>header1</th><th></th><th>header3</th></tr> <tr><td></td><td>data12</td><td></td></tr> <tr><td>data21</td><td></td><td>data23</td></tr> </table>
<hr /> <h2>日本語変換 ime-mode: (IE限定)</h2> <blockquote> <input type="text" class="ime_on" /> </blockquote> </body> </html>
[ツッコミを入れる]