カスケーディングスタイルシートリファレンス・ ブラウザの種類による対応状況などもプロパティごとに掲載!

CSS −スタイルシートリファレンス− ブラウザの種類による対応状況などもプロパティごとに掲載!

スタイルシートの基礎 CSS
バナーはダウンロード
してお使い下さい。

■  テキスト

color   »» 文字色を指定する
text-decoration   »» 文字を装飾する
text-transform   »» 大文字・小文字に置換する
line-height   »» 行の高さを設定する
text-align   »» 行揃えを指定する
vertical-align   »» 文字の垂直位置を指定する
text-justify   »» 文字の均等割付を指定する
letter-spacing   »» 文字間隔を指定する
word-spacing   »» 単語間隔を指定する
text-indent   »» 1行目にインデントを設定する
white-space   »» 空白や改行をそのまま表示する
white-space   »» 改行しないで表示する
line-break   »» 禁則処理を適用する
word-break   »» 単語内での改行処理を指定する
writing-mode   »» 縦書きで表示する
text-underline-position   »» 縦書きの下線(傍線)位置を指定する
ruby-align / ruby-position   »» ルビの配置を指定する
layout-grid-〜   »» 文字をグリッドにおさめる
layout-grid:   »» グリッドを一括して指定する

■ layout-grid-〜  文字をグリッドに収める

layout-grid-mode:キーワード
layout-grid-type:キーワード
layout-grid-line:
layout-grid-char:

・キーワード
・サイズを表す数値+単位
・数値+%
layout-grid-mode グリッドに合わせる方向を指定します。
both 行方向・文字方向両方のグリッドにあわせる。
none グリッドを無効にする。
line 行方向のみグリッドに合わせる。
char 文字方向のみグリッドに合わせる。
layout-grid-type グリッドに合わせる方法を指定します。
loose 全角文字や半角カナを、layout-grid-charで指定された グリッドの幅に合わせて間をあけて配置する。(デフォルト)
fixed 全ての文字をグリッドの中心に配置する。
strict 全角文字や半角カナのみをグリッドの中心に配置する。
layout-grid-line
layout-grid-char
layout-grid-lineは行送り(行間)、 layout-grid-charは字送りの幅(文字間)を指定します。 layout-grid-lineやlayout-grid-charを有効にするには、 layout-grid-modeでlineかbothが指定されている必要があります。
none グリッドを設定しない(デフォルト)
auto 要素中で最大のフォントサイズをグリッドのサイズに設定する。
サイズを表す数値+単位 数値に単位をつけてグリッドのサイズを設定する。単位については下表参照。
数値+% 親要素のボックス領域のサイズに対する割合で設定する。

縦横のグリッド(マス目)を想定し、その中に文字を当てはめるよう指定します。 フォントの種類やサイズによってはグリッドから多少ずれることもあります。

  スタイルシートにおける単位
em その要素のfont-sizeの値を1とする
ex その要素のx-height(小文字のxの高さ)を1とする
px コンピュータ画面の1ピクセルを1とする
% 属性によって異なるが、多くの場合は親要素の1部分を基準とした割合
in インチ(1pt=2.54cm)
cm センチメートル
mm ミリメートル
pt ポイント(1pt=1/72in)
pc パイカ(1pc=12pt)

layout-grid-mode IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
none × × × ×
both × × × ×
line × × × ×
char × × × ×
layout-grid-type IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
loose × × × ×
fixed × × × ×
strict × × × ×
layout-grid-line IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
auto × × × ×
サイズ × × × ×
パーセント × × × ×
layout-grid-char IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
auto × × × ×
サイズ × × × ×
パーセント × × × ×
 *Macintosh版IE5は非対応。

LINK

 

◆ このページのTOPへ ◆







Copyright © 2004 − ykr414. All Rights Reserved.