articles

2010 年 3 月 31 日

CSS IEのデフォルトスタイル

CATEGORYCSS   TAG 11:48 AM

http://www.iecss.com/

なにかのエントリーで見ましたが、IEのデフォルトのスタイルがまとめられていました。
これといって役立ちそうなところはないですが、とりあえず。

2010 年 3 月 11 日

CSS3 ドロップシャドウをIEでも

CATEGORYCSS   TAG 8:35 PM

ネタ元
http://www.cssplay.co.uk/menu/css3-shadows.html

以下の記述で、IEとCSS3のブラウザでほぼ同じドロップシャドウができるそうなのですが・・・
記述がめんどくさいですね。
ただ、つかいどころがどこかであるかもなのでメモっておきました。

<style type="text/css">
.container {padding-left:10px;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:10px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.clear {clear:left;}
</style>



2010 年 3 月 4 日

CSS3 テキストの選択色を指定する。これもcss3か!

CATEGORYCSS   TAG 12:16 PM

とあるサイトで、選択したテキストの背景がサイトのデザインと
マッチしていて素晴らしいなと感じました。

ソースを見て行くと

::selection{}
::-moz-selection {}

とありました。
これで指定するんですね。

Mozilla の独自拡張は使うべきではないらしいのですが。
http://www.mozilla.gr.jp/standards/webtips0001.html#c1

2010 年 1 月 22 日

CSS3 CSSで角丸をつくる

CATEGORYCSS   TAG 12:29 PM

すごくいいサイトがありました。
こんなサイトあったんですね。
CSS3 角丸を表現する border-radius | CSS Lecture

引用させて頂きます。

    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */

2009 年 11 月 7 日

CSS liをfloatしたときの解除

CATEGORYCSS   8:48 PM

頻出するので、いいかげんにお茶を濁す方法はやめて
正式なものがないかしらと思っていたらいいの見つけました。

floatを親要素で解除するクリアフィックス | DAICHIFIVE blog

ずっともやもやしてたので助かりました。

2009 年 9 月 9 日

PHP phpファイルをcssで出力

CATEGORYCSSPHP   TAG 7:38 PM

phpファイルをcssで出力する場合のContent-typeです。

header("Content-type: text/css");

このphpでcssを記述する方法はキャッシュされないので読み込みに時間がかかります。

header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

これでキャッシュされるはずらしいのですが・・・。

2009 年 6 月 5 日

cssのborderショートハンド

CATEGORYCSS   TAG 12:06 AM

ホントに知らない事って多いんですね。

/*ボーダーの幅設定*/
border-width: 2px 3px 1px 2px;
border-style:dotted solid solid dotted;
border-color: red #999 red #0c5633;

/*こんな書き方も*/
border-right-color: #999;
border-bottom-color: red;
border-left-color: #0c5633;

2009 年 5 月 24 日

!important

CATEGORYCSS   TAG 12:20 AM

Style sheet designers can increase the weights of their declarations:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

In the example above, the first three declarations have increased weight, while the last declaration has normal weight.

A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.

http://www.w3.org/TR/REC-CSS1/#important

要するに、! importantがある属性は、後からのオーバーライドを無視します
といった内容だと。

syntaxhighlighterのCSSを変更しようと試みたときにふと気づきました。
!importantってなんじゃらほいと。
よくみるのですが、CSSをずいぶんおざなりにしていたせいでしょうか。
すっかり存じ上げませんでした。