direction / 文字方向
.direction_a{
direction: rtl;
unicode-bidi: bidi-override;
}
- [ direction memo ]
- direction: rtl;=右から左
- direction: ltr;=左から右
- 上記はspanクラスにdirection_aを指定した場合の実際の記述方法です。
- unicode-bidi: nomal; 初期値
- unicode-bidi: embed; 文字方向を新しく組込む場合
- unicode-bidi: bidi-override; unicodeによる文字方向の設定を無効
[ css direction サンプル ]
display / 表示形式の指定
display: block; ブロック形式
display: compact; ブロック要素の左マージン内にインライン形式で表示する。
display: inline; インライン形式
*display: inline-block; ブロック要素をインライン形式で表示する。(css3予定)
display: list-item; リスト形式
display: marker; マーカー形式
display: run-in; ブロック要素をインライン形式で表示する。
display: none; なし
・marker-offsetの記述方法
li:before{
display: marker;
content: url("xxx.gif")
marker-offset: 5px;
}
- [ display memo ]
- IE5.5はrun-inの使用はできませんが、inline-blockプロパティはサポートされています。
- * メニュー関連はul・liタグを参照。
- marker-offsetはdisplay: marker; マーカー形式を指定した場合に使用可能なプロパティです。
- marker-offset=リスト項目とマーカーの間隔
- 実際の記述方法は上記をご覧ください。
[ css 一覧 direction / 文字方向 ]
float / 回り込み
floatは段組等で活用されます。
[ float(css) 記述例 ]
[ float(xhtml1.0 Transitional) 記述例 ]
- [ float memo ]
- IE6.0ではウィンドウ幅を広くしたり、画像の高さに対しテキストの量が少ない場合にfloatを使用するとテキストが消えてしまうことがあるようです。
- これはbackgroundの指定(背景色・背景画像)のある場合に起こるIE6.0のバグになります。
- また、cssのfloatにmargin・paddingを指定するとレイアウトが崩れる危険が大きくなりますのでご注意ください。margin・padding使う場合はcssのfloatではなく、それぞれの段組内のclassで指定します。
- css ( float ) による2カラム・3カラムは、float / 回り込み・段組（応用）をご覧ください。
[ css 一覧 direction / 文字方向 ]
font / フォント
color: #ffffff; 文字色
font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif; フォント
font-size: *%; 文字サイズ(% px em)
font-size-adjust: .58; サイズ調整
font-style: oblique; 斜体
font-style: italic; イタリック体
font-variant: small-caps; スモールキャップ
font-weight: normal; 文字の太さ(標準)
font-weight: bold; 文字の太さ(太字)
font: italic normal bold 80%/150% "ＭＳ Ｐゴシック"; ショートハンド
- [ font memo ]
- font-stretch(縦長・横長) は対応ブラウザが限られます。
- font-stretchの値はultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded等があります。(文字幅の狭い順)
- * 一応font 実例に載せてあります。
[ css font サンプル ]
[ css 一覧 direction / 文字方向 ]
img / 画像関連
border: 0px;
text-align: left;
text-align: right;
- [ img memo ]
- 簡単に右寄せ・左寄せをするにはには align が使えますが、理由がない限り css でまとめた方が良いです。
- 右寄せ・左寄せのcss はfloat: right;やfloat: left;を使用し、imgを先に本文を後に記述します。
- cssが使えない場合の記述
- <img src="../css.gif" width="10" height="10" alt="css xhtml seo" title="css xhtml seo" align="left" border="0" />
