Bootstrapがいい感じ。

No Comments

これ、使えるなと思ったので、メモ。

More

画像にbase64をかけてhtmlやCSSに埋め込む

No Comments

画像にbase64(Data URIs)をかけてHTMLやCSSに埋め込む方法って、知らなかった。。。HTTPリクエストを減らせるので、軽量化に役に立ちそうだったので、メモ。

More

CSS3アニメーションナビゲーションサンプル

No Comments

CSS3アニメーションを使ったナビゲーションのサンプルで良い感じものがあったので、メモ。

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

JavaScriptを使わずにここまでアニメーションができると、もっと面白い表現ができるかもと思ってしまう。

CSSで背景にPNG画像使ったときのIE6対応の注意点

No Comments

あるプロジェクトでIE6対応でCSSのbackgroundでPNGを使わないといけなかった時に、いろんな方法があるが、

More

IE7でのz-indexの解釈

No Comments

モルダルウィンドウをJavaScriptで作る際に、z-indexはよく使うと思う。

More

CSS3のグラデーションをクロスブラウザ対応で実装する方法

No Comments

ある案件で、CSS3で角丸、グラデーションを対応しようと思ってCSS3PIEを使っていたけど、これをセールスフォースに入れると、、適用されないらしくかなり困っていた。これでグラデーションは解決すると思った。
一応、メモ。

DEMO←ここで確認できる。

More

IE6でposition:fixedを適用するための手順

No Comments

今、やっているお仕事で、position:fixedをどうしても使わないといけなくて、いろいろと調べてみた。なので、メモ。

CSSにIE6のみに適用のために以下のプロパティを定義。

<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で余白できる・・・

No Comments

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

対処方法として・・・


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

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

IEでCSS3を実現するCSS3 PIE

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の使い方

No Comments

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

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

指定の仕方は・・

More

Older Entries