検索結果: 大阪 ホームページ制作 Signature! - STUDY STYLE -

タグ「css」 の検索結果（1/1）

2009年12月14日

透明度(opacity)をCSSで編集　IE8対応版

以前投稿した透明度(opacity)をCSSで編集　IE8対応版

selector {
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

タグ:

Permalink | Category : CSS | Trackbacks [72]

2009年11月 2日

段落の両端をそろえるCSS　text-justify


段落の両端を揃えるCSS指定。

P要素の両端を揃える場合は

p｛
text-align: justify;
text-justify: inter-ideograph;
}

をCSSで指定。
text-align: justify;　がfirefox、safari用の指定
text-justify: inter-ideograph;　がIEの独自拡張の指定。種類は


auto
    ブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
distribute
    単語間隔と文字間隔を調整して均等割付します。
distribute-all-lines
    単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
inter-cluster
    アジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
inter-ideograph
    日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
inter-word
    単語間隔のみを調整して均等割付します。
kashida
    アラビア文字のテキストの均等割り付けを意図しています。
newspaper
    単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。


という感じです。

タグ:

Permalink | Category : CSS | Trackbacks [69]

2009年10月31日

clearfix　クリアフィックス　使い方


すぐ忘れるので備忘。

クリアフィックス
.clearfix

外側のBOX
と
内包する右側、左側にFLOATさせて並べたBOXがあった場合、FLOATを解除するために

「外側のBOX」にクラス.clearfixを付与。

CSSコードは

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

firefox、safari　(clear：both)
IE7　(高さ指定で画像表示のバグを利用)
IE6　(高さ指定で画像表示のバグを利用、min-heightサポートなし)

の順に指定されている。


タグ:

Permalink | Category : CSS | Trackbacks [68]

2009年8月 1日

透明度(opacity)をCSSで編集　IE、Firefox、Safari、Opera

画像や文字に透明度を指定する場合

ブラウザによって指定方法が違う。透明度を50に設定。

(firefox2以前？)
-moz-opacity:0.5;

(Firefox3.0、Safari、Opera)
opacity:0.5;

(IE)
filter:alpha(opacity=50);

マウスオーバーで50％、透明にする↓

a:hover img{
-moz-opacity:0.5;
opacity:0.5;
filter:alpha(opacity=50);
}

タグ:

Permalink | Category : CSS | Trackbacks [0]