CSS | Branberyheag!! Lab

<pre>html,body{
    width :100%;
    height:100%;
    overflow:auto;
    margin:0;
    padding:0;
}
div#samp{
    position: fixed!important;
    position: absolute;
}
</pre>

div#samp｛｝は、position:fixed;を適用させたい部分に適用する。html,bodyに定義してあるプロパティで「overflow:auto;」となっているが
適宜調整が必要になってくる。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTMLファイルで上記の宣言文を忘れずにする。
互換モードでは、使えないので注意が必要。

Javascriptで対応しようと思ったけど、うまくいかなかった。
スクロールするたびにJSのEVENTが反応して、きれいではなかった。

元ネタ

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
http://d.hatena.ne.jp/cyokodog/20081204/PositionFixed03

IE6でli要素内のaタグにdisplay:blockで余白できる・・・

11/17

isaoCSS memo No Comments

IE6にて、li要素内でaタグにdisplay:block;を付けると余白ができちゃう。

対処方法として・・・


div ul li{display:block; zoom:1;}

「zoom:1;」を入れることで余白がなくなる。
※IE独自機能

IEでCSS3を実現するCSS3 PIE

08/30

isaoCSS css3 No Comments

IE6~8でCSS3を適用するライブラリ、CSS3PIEというのがあるようだ。
※どこかで見たと思うんだけど、完全に無視してたので、改めて調べてみた。

どんなプロパティに対応するかというと・・・

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
border-radiusbox-shadowborder-imagemultiple background imageslinear-gradient as background image

に対応するみたい。

記述する方法も簡単。

</pre>
</div>
<div><span style="color: #333333; font-family: Helvetica, Verdana, sans-serif; line-height: 18px;">
<pre style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #eeeeee; display: block; padding-top: 10px; padding-right: 12px; padding-bottom: 10px; padding-left: 12px; background-position: initial initial; background-repeat: initial initial; border: 1px solid #cccccc;"><code>behavior: url(PIE.htc);</code></pre>
</span></div>

あとは、パスを通すだけ。
そんなに難しくないので、どこかで試してみたい。

サーバの仕様によっては、.htaccsecを用意して「AddType text/x-component .htc」を記述しないといけないみたい。

CSS3PIE
http://css3pie.com/

WebFontの使い方

06/10

isaoCSS webfont No Comments

そのうち使ってみたいのがWebFontだ。

fontのライセンス次第だけど、サーバにアップロードして、CSSで指定すれば好みのフォントで表示できる。将来、画像で加工して見出しを作る行為自体がなくなるかもしれない。

指定の仕方は・・

タグ

カテゴリー