apartment-p Web 施錠 | 模様替と会話 | 温故知新 | 玄関 | すみれ荘 | うずしお荘 | よいまち荘 | 桜川荘 | ふたば荘 | 音羽荘 | お部屋一覧 | 探し物 | 部屋を作る | 活動履歴

CSSリファレンス - カスケードスタイルシートのコマンド便覧。

カスケードスタイルシートのコマンド便覧。

セレクタ (指定方法)

クラス指定

グローバル属性のスタイルシートの効果を局所的に制約できる。

 <style type="text/css">
     div {color: black;}
     h1{color: green; font-size: 24px;}
     div.midashi01  {color: red;}
     h1.midashi01 {color: blue; font-size: 24px;}
 </style>

 HTML本文では

 <div>ここは黒。</div>
 <h1>ここは緑。</h1>

 <div class="midashi01">ここが赤。</div>
 <h1 class="midashi01">ここは青。</h1>

 <div class="midashi01">ここも赤になる。</div>

 のような記述で属性を適用する。

ID指定

ページ内でユニークな要素にはクラスではなくIDが推奨される。

 <style type="text/css">
     div {color: black;}
     h1{color: green; font-size: 24px;}
     div#spot01  {color: red;}
     h1#spot02 {color: blue; font-size: 24px;}
     #spot03 {color: yellow;}
 </style>

 HTML本文では

 <div>ここは黒。</div>
 <h1>ここは緑。</h1>

 <div ID="spot01">ここが赤。</div>
 <h1 ID="spot02">ここは青。</h1>

 <div ID="spot03">ここは黄色。</div>

 のような記述で属性を適用する。

疑似クラス ナンバリング指定

ページ上の登場順に数えた番号で指定する。

 <style type="text/css">
     div#spot01 span:nth-of-type(3) { color:red; }
 </style>

 HTML本文では
 <div ID="spot01">
 <span>ここの色。</span>
 <span>ここの色。</span>
 <span>ここの色。</span> ←ここだけ赤になる。
 <span>ここの色。</span>
 <span>ここの色。</span>
 <div>

 のような記述で属性を適用する。

スタイルシートの使い方。

書式

 セレクタ{プロパティ:値} のように記述します。

 例 div {color: red;}

  ↑ divセレクタに対してスタイルシートを定義し、colorプロパティ値をredにする。

グローバル属性

ページ全体に対するスタイルシートを指定を一括して行う事ができる。 記述する場所はHTML上のどこでも、何ケ所でも可能(headである必要はない)

 <style type="text/css">
     div  {color: red;}
     h1 {color: blue; font-size: 24px;}
 </style>

 HTML本文では

 <div>ここが赤。</div>
 <h1>ここは青。</h1>

ローカル属性

スタイルシートをページの局所的に使う事もできる。

 <div style="color: red;">ここの中は赤い文字</div>

別ファイル読み込み

 <style type="text/css"><!--@import url(style-file.css);--></style>

 <link rel="stylesheet" href="style-file.css" type="text/css">

この例ではファイル名「style-file.css」ですが実際のファイル名は任意です。


div {color: black;}

h1{color: green; font-size: 24px;}

div.midashi01 {color: red;}

h1.midashi01 {color: blue; font-size: 24px;}


のように、グローバルCSSの中身を直接記述します。

リンク要素の擬似クラス

a{color: blue;}

a[href]{color: blue;}

プロパティー一覧

color: 値;色

色を指定します。色は色の名前でも色コードでも書けます。

margin: 値;マージン

ボーダーの外側の余白幅を指定します。

padding: 値;パディング

ボーダーの内側の余白幅を指定します。

border: width値 style値 color値; ボーダー

罫線のスタイルを指定できます。

ボーダースタイル(style)の値、none(線無し)、dotted(点線)、dashed(粗い点線)、solid(実線)、double(二重線)、groove(谷線)、ridge(山線)、inset(内線)、outset(外線)、inherit(継承)

position: 値; ポジション

要素のポジショニングの方法を指定します。

上端、左端、下端、右端からの距離を 10px のような単位付きの数値や 50% のようなパーセント指定、または auto(規定値:自動)、inherit(継承)のいずれかで指定します。通常、position: と組み合わせて使用します。

背景の固定

float: float; フロート

画像などの表示位置を left(左端)、right(右端)、none(規定値:指定しない)、inherit(継承)のいずれかで指定します。<img> タグの align属性に相当します。right または left を指定すると、テキストがその周りを回り込むように表示されるようになります。回り込みを解除するには clear: を用います。

clear: clear; クリア

float: によるテキストの回り込みを none(規定値:何もしない)、left(左側の回りこみ解除)、right(右側の回りこみを解除)、both(両側の回りこみを解除)のいずれかで指定します。<br> タグの clear 属性に相当します。

width: length値/height: length値; ウイズ/ヘイト

横幅、高さ、最小の横幅、最小の高さ、最大の横幅、最大の高さを 100px のような単位付き数値、50% のようなパーセント形式、inherit(継承)のいずれかで指定します。auto(規定値:自動)も指定可能です。

vertical-align: 値; バーティカルアリジン

縦方向の配置を、baseline(ベースラインあわせ)、middle(中央あわせ)、top(上端あわせ)、bottom(下端あわせ)、inherit(継承)。

overflow: overflow値/overflow-x: overflow値/overflow-y: overflow値; オーバーフロー

領域をはみ出した要素の扱いを、visible(規定値:表示する)、hidden(隠す)、scroll(スクロールバーで表示する)、auto(自動)、inherit(継承)のいずれかで指定します。Netscape ではブロック型要素に対してのみ有効なようです。overflow-x や overflow-y は、overflow の指定を横方向、縦方向のみに適用します。

background: color image repeat attachment position; バックグラウンド

color, image, repeat, attachment, position を一度に指定します。順序は自由で、省略も可能です。body の他、div や table などに対しても用いることができます。

attachmentウィンドウのスクロールを動かした時の背景の動作を scroll(規定値:一緒にスクロールする)、fixed(スクロールしない)、inherit(継承)のいずれかで指定します。

position背景の横方向の位置を left(左端)、center(中央)、right(右端)または 50% のような割合で指定し、縦方向の位置を top(上端)、center(中央)、bottom(下端)または 50% のような割合で指定します。fixed と共に指定することにより、背景画像の表示位置を指定することができます。下記の例では、背景画像を中央にひとつだけ表示します。

 background-position: right bottom; → 右下
 background-position: center center; → 中央
  
 background-position: left; → 左の中央
 background-position: bottom; → 下の中央
 background-position: center; → 中央

repeat(縦横繰返し)、repeat-x(横繰返し)、repeat-y(横繰返し)、no-repeat(繰返し無し)

font: style値 weight値 size値 / height値 family値; フォント

テキストのスタイルを指定します。

style normal(規定値:通常), italic(イタリック), のいずれかを指定します。CSS2 からは inherit(上位のスタイルを継承)が加わりました。

italic と oblique はどちらも斜体フォントになりますが、CSS1 の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。IE3.0 や Netscape 4.0 では oblique をサポートしていません。IE4.0 は未確認ですが、IE5.0 では oblique もサポートしています。

weight フォントの太さを normal(規定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。IE4.0 や Netscape 4.0 では通常と太字の 2種類しかサポートしていないので、normal(通常)と bold(太字)以外を使用することは少なそうです。

size フォントの大きさを指定します。絶対指定として xx-small, x-small, small, medium(規定値), large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。

周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。

画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。

height テキストの高さを 1.5em, 150% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。IE3.0 ではテーブルを使用したページで line-height を使用すると、ページのレイアウトが無茶苦茶に崩れてしまうというバグがあるようです。使用する場合は、IE3.0 を見捨てる覚悟で使用することになります。

family フォントを指定します。カンマ(,)で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲みます。CSS1 では serif, sans-serif, cursive, fantasy, monospace が定義されています。CSS2 では inherit(継承)がサポートされています。

Windows だと、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝" あたりが一般的です。P がつくのはプロポーショナルフォントです。Macintosh では "Osaka"、"細明朝体"、"平成角ゴシック" などのフォントがあります。現状での他用は禁物です。

indent テキストの最初の 1行のインデント(字下げ)を 1em のような単位付きの数値、10% のようなパーセント、inherit(継承)のいずれかで指定します。下記の例では、すべての段落(<p>〜</p>)の先頭を 1文字分字下げします。

align テキストの配置を left(規定値:左寄せ)、right(右寄せ)、center(センタリング)、justify(両端揃え)、inherit(継承)のいずれかで指定します。ブロック要素に対して有効です。justify は、IE5.0 や Netscape 6 から対応しています。IE の場合は、text-align のみだと、空白調整による両端揃え、text-justify とくみ合わせると文字間調整による両端そろえを実現するようです。CSS2 ではテーブルにおけるセルの各要素を指定文字で揃える(数値を小数点の位置でそろえるなど)機能もサポートされましたが、大半のブラウザではまだサポートされていないようです。

decoration テキストの装飾を none(何もなし)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅)、inherit(継承)で指定します。複数指定も可能です。下記の例では、A要素に対して none を指定することで、下線の無いリンクテキストを実現しています。 (IE6のバグで適用されない場合:text-decoration:underline ! important;)

letter-spacing: space値; レタースペーシング

各文字間のスペースを normal(規定値)、2px などの長さ、inherit(継承)のいずれかで指定します。

word-spacing: space値; ワードスペーシング

各ワード間のスペースを normal(規定値)、10px などの長さ、inherit(継承)のいずれかで指定します。

white-space: space値; ハイトスペース

要素の中の空白がどのように扱われるかを normal(規定値:通常)、pre(自動改行しない、空白そのまま)、nowrap(自動改行しない、空白はつめる)、inherit(継承)のいずれかで指定します。

cursor: cursor値; カーソル

この要素にマウスを乗せたときのマウスカーソルの形状を auto(規定値:自動)、crosshair(十字印)、default(通常のもの)、pointer(ポインタ)、move(移動用)、e-resize(右リサイズ)、ne-resize(右上リサイズ)、nw-resize(左上リサイズ)、n-resize(上リサイズ)、se-resize(右下リサイズ)、sw-resize(左下リサイズ)、s-resize(下リサイズ)、w-resize(左リサイズ)、text(テキスト選択)、wait(待ち)、help(ヘルプ)、inherit (継承)、または URL指定のいずれかで指定します。

word-break; ワードブレイク

表示されるブロックの幅にあわせた文字の折り返し方法を指定(注:IE独自、Firefoxも採用)

overflow; オーバーフロー

ページ上で表示上だけのフレームを擬似的につくり、レイアウトの崩れを防止(注:MacIEなど古いブラウザでは動作不能になる)

vertical-align バーティカルアリジン

divやテーブルなどの箱要素の中を上、下揃えにできます

visibility: hidden; ビジビリティー

ソース上にある要素を、任意にページ上から隠蔽したり、隠蔽解除したりできます

display ディスプレイ (消す、ボックス要素にする、インライン要素にする)

ソース上にある要素を、任意にページ上から消したり、表示したり、ボックス要素にしたり、インライン要素にしたりできます。

 ソース上にある<br>を無効にするには

 <div>をインライン要素にするには

 <span>をボックス要素にするには

-moz-border-radius 角丸

あらゆる要素の表示から角をとって丸くします。(NN6以上、mozilla1.x以上)
 -moz-border-radius:14px;(単位はpxの他%など色々使える)
 background:#0000FF;-moz-border-radius:20%;margin: 10px;color:#FFFFFF;width:200px; サンプル

border-spacing ボーダースペーシング

tableのセルとセルの間の隙間を指定する。

border-collapse ボーダーコラプス

tableのセルの隙間をなくす。

list-style-type リストスタイルタイプ

liのスタイルをコントロールする。

リストの「・」を消すコード

 li {
 margin-left:0px;
 list-style-type: none;
 }

属性セレクタ

特定要素を指定してスタイルをつける。

 div [href="today.html"] {
 display:none;
 }

 input[type="text"] {
 border: 1px solid red;
 }

 color: red;
}

 color: blue;
}

 div.sumple:nth-of-type(2){
 color: blue;
}

 div.sumple:nth-last-of-type(1){
 color:red;
}

Webフォント

端末にインストールされてないフォントを表示する。
 @font-face{font-family:"Mosamosa";src:url("Mosamosa-v1.1.ttf");}
 *{font-family:"Mosamosa";line-height:160%;font-size:12pt;}

CSS実験室