css
GitHub - CSSLint/csslint: Automated linting of Cascading Stylesheetsnode.jsで動かす % sudo npm install -g csslint使い方 % csslint hoge.css % csslint --helpdefautlのruleは厳しいので % csslint --rules=display-property-grouping,ids,qualified-…
% csstidy input_filename --preserve_css=true --silent=true --template=opp
同じセレクタで、同じプロパティが設定された場合、後から設定した値で上書きされる。 hogeは青。 .red { color: red; } .blue { color: blue; } <p class="red blue">hoge</p> <p class="blue red">hoge</p> class属性の指定順は関係ない。 hogeは青。mogeは緑。hoge mogeも、moge hogeも赤。 p.hoge.moge { …
古いブラウザでも確認 Safari3 html:not(:only-child:only-child) SELECTOR { .. } Safari3 body:last-child:not(:root:root) SELECTOR { .. } Firefox2, Firefox3 html:not([lang*=""]) SELECTOR { .. } Firefox2, Firefox3 html:/**/not([lang*=""]) SELEC…
http://neal.venditto.org/articles/12/bir <html> <head> <style> body { position: relative; z-index: 1; } h1 { background: transparent url( image.jpg ) top left no-repeat; height: 40px; width: 400px; } h1 span { position: relative; z-index: -1; } </style> </head> <body> <h1><span>header</span></h1> </body></html>
<html> <head> <style> div { height: 300px; font-size: 300px; text-align: center; } div img { vertical-align: middle; } </style> <title></title> </head> <body> <div> <img src="hoge.png" width="400" height="200" /> </div> </body> </html> 基本的にIE用 他はfont-sizeで調整ww
デフォルトテーマのこれ。 body { font-size: 62.5%; /* Resets 1em to 10px */ ... } mac firefoxで、px指定の方が微妙に大きい。72%くらいがちょうど良い。 入れ子にした時の計算が面倒。 opera以外は、入れ子にした時の空要素後のサイズが違う。 <p style="font-size:1.4em">hoge1 <span style="font-size:1.4em">ho</span></p>…
マークアップリファレンス http://www.mozilla.org/contribute/writing/markup 訳：http://www.mozilla-japan.org/contribute/writing/markup.html http://www.mozilla.org/css/base/content.css /* mozilla.org Base Styles * maintained by fantasai * (cl…
textareaで入力した文字が化ける。 日本語を入力した場合のカーソールの位置が変 textarea { font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', Osaka, sans-serif; leter-spaceng: 0; } charset=utf-8で…
body { padding:10px; background: url( bg.gif ); } div.shadow { margin: 2px 0 0 2px; float: left; margin-left: 10px; } * html div.shadow { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src=shadow.png,sizingMethod=scale ); } htm…
再読み込みなし プリロードいらず。 メニューの大きさが100 x 20としてみる。 html: <html> <body> <div id="menu"> <ul> <li><a href="#" id="hoge">hoge</li> <li><a href="#" id="moge">moge</li> </ul> </div> </body> </html> css: #menu ul { margin: 0; padding: 0; overflow:hidden; list-style-type: none; } #menu ul li { margin: 0; padding: 0…
id:oppara:20070420 AlphaImageLoaderのsizingMethod crop（オブジェクトのサイズを優先させる） image（イメージのサイズを優先させる） scale（オブジェクトのサイズにイメージのサイズを合わせる） <html> <body> <div id="hoge"> <p><a href="#">hogehoge</a></p> <div class="alpha"></div> </div> <div class="moge">mogemoge</div> <div class="moge">mogemoge</div> </body> </html>
【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearす... http://bowz.info/2006/10/31/150705 .clearfix { zoom: 1; /* for IE5.5 - IE7 */ display: inline-table; /* for IE-mac */ } /* Hides from IE-mac ＼*/ .clearfix { display: …
http://www.designmeme.com/articles/csspulldownmenu/ http://blog.faro.main.jp/?eid=591449 cssの設定でかなりぶれる。。 css: #menu { text-align: left; } #menu ul, #menu li { list-style: none; margin: 0; padding: 0; } #menu ul#mainMenu li, #me…
letter-spacingプロパティを指定した要素内では、br要素を2つ以上連続して置いても1つしか認識されない。 回避：<br />にletter-spacingを設定する。 body, th, td { letter-spacing: 1px; } br { letter-spacing: 0; }
IEのフィルターを設定したブロック内のアンカーがクリックできない不具合回避。 http://blog.webneta.net/archives/2006/09/01/22/ 面倒なのでそれ用のスクリプト作成。やっつけ。 参考：http://www.alistapart.com/articles/pngopacity/ -要、browser_detec…
css #wraper { position:absolute; width:900px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-450px; border:1px solid #f00; } html <html> <body> <div id="wraper"> <p>hoge</p> </div> </body> </html>
/* safari only ?*/ html:?66irst-child セレクタ { ... } /* end */はてなはバックスラッシュ ?66は化けてるわけじゃない
html <ul> <li><a href="#">aaaa</a></li> <li><a href="#">bbbb</a></li> </ul> css ul a { /* MacIE5回避 ?*/ overflow:hidden; /**/ outline: 0 ; } ul a:active, ul a:hover, ul a:focus { color:#f00; } MacIE5 CSS Hack Overflow: auto workaround for macIE5? 未確認 a:focus { -moz-outline-style: none; }
wrapperをかましてセンタリング。 html { height:100%; } body { height:100%; text-align:center; } #wrapper { width:800px; margin:0 auto; height:100%; position: relative; } *html body #wrapper { position: absolute; } html>body #wrapper { heigh…
* { margin:0; padding:0; } html, body { height: 100%; } body{ height:100%; position: relative; } html>body { height: auto; min-height: 100%; } /* footerのbgとheightをそろえる*/ #empty { height:120px; } #footer { position: absolute; left: 0…
Phark方式 http://phark.typepad.com/phark/2003/08/accessible_imag.html h1 { height:119px; background:url("hoge.jpg") no-repeat; text-indent:-5000px; } <h1>hoge</h1>win ie5だと背景画像ごともってかれるので対応 #header { height:119px; background:url("h…
