インターネット覚え書き「ビボウログ」

インターネット覚え書き「ビボウログ」*

2010.02.04 Thursday

スポンサーサイト

Posted by スポンサードリンク

この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。

| - | | - | - |

2010.02.04 Thursday

test

Posted by img-src

test

Check

| - | 10:08 | comments(32) | trackbacks(4) |

2009.11.20 Friday

テスト二郎食べたい

Posted by img-src

あー二郎食べたい！

ヤサイマシマシニンニク！瘕瘕瘕瘕

そんなに食べられないんだけどね蘸

杻さかな橳ハンバーガー橫おにぎり瑫ハート瓿バイバイ汴グッド紈ガーン榭ビール擷ジョギング沪ドクロ瞀タコ菀桃暲雨者ハロウィン芡ダンス璉ゴルフ昞ひらめき歖涙

Check

| - | 09:35 | comments(1) | trackbacks(15) |

2009.10.09 Friday

cssのfloat解除方法

Posted by img-src

floatの解除には
.clear {
height: 0;
clear:both;
}
とかのclassをつくって


<div class="clear"></div>
で空のdivで解除していたが、

clearfixという方法がスマートらしい。

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

.clearfix {
  min-height: 1px;
}

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


floatするボックスが入っている親ボックスにclass="clearfix"であてる。

:afterは一番下に適応？されるという命令。
１）まず「.」を生成
２）clearをあてるためblock要素に
３）heightと

visibility

でみえなくする
という事らしい。

その下にある.clearfixはIE6,7用の措置。バグを逆手にとっているよう。

その下の*からはじまるのはMac IE用。
starハックというものらしい。


clearfixで検索するともっと詳しくいっぱい出ます。

Check

| - | 13:16 | comments(0) | trackbacks(9) |

2009.09.16 Wednesday

margin:0 auto; でも　text-align:center;　でもなくセンター揃え

Posted by img-src

通常、幅を指定したdivに「margin:0 auto;」を指定してやれば
ウィンドウのセンターに揃うのですが、IEの6ではセンターになりません。

「text-align:center;」にしてやれば揃うのですが、
その中に含まれるもの全てがセンターになってしまうため、
中のものそれぞれに「text-align:left;」を指定してやらなければなりません。

しかしここに「margin:0 auto;」も「text-align:center;」も使わない
センター揃えの方法が掲載されていました。

センター揃えにしたい大外のdiv(center_div)に以下を設定

#center_div {
position: absolute;   /* ウインドウの左上を基準に */
width: 800px;    /* divの幅を指定 */
left: 50%;    /*divの左端をページの真ん中へ移動 */
margin-left: -400px;    /* divの半分を右に戻す */
}

JUGEMテーマ：インターネット

Check

| - | 16:42 | comments(0) | trackbacks(4) |

2009.03.02 Monday

cssでメニューを画像にした場合、a:hoverで一瞬画像が消えるのを防ぐ

Posted by img-src

cssを使ってメニューを画像に置き換えて、カーソルが乗っかった時に違う画像へ置き換える際、

#menu1 a {    /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}

#menu1 a:hover {    /* カーソルオンマウス時 */
background-image: url(menu1_o.gif);
background-repeat: no-repeat;
}

とした場合、ブラウザや閲覧環境によっては、オンマウスした瞬間に
一瞬画像が消える（読み込みのタイムラグ？）現象がある。

上の方法では、通常時とオンマウス時で別の画像を用意して呼び出しているが、
通常時とオンマウス時の画像を一つに合体してしまい、オンマウス時に画像の
ポジションをずらすという方法で、タイムラグの発生を防ぐ。

下のケースでは、通常時とオンマウス時の画像を縦に合体した場合。

#menu1 a {    /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}

#menu1 a:hover {    /* カーソルオンマウス時 */
background-image: url(menu1.gif);     /*通常と同じ画像 */
background-position:0 -50px;   /* 左辺から0　上辺から-50ピクセル移動させる */
}

横長の合体した画像を作って横にスライドさせる方法もある。
その場合は
#menu1 a:hover {    /* カーソルオンマウス時 */
background-image: url(menu1.gif);     /*通常と同じ画像 */
background-position:-200 0;   /* 左辺から-200　上辺から0移動させる */
}

JUGEMテーマ：インターネット

Check

| - | 15:28 | comments(0) | trackbacks(28) |

前へもどる/次のページへ >>

<< April 2012 >>