CSS
Lightbox、Thickboxなどの背景の半透明の膜みたいなやつを自作する。 IE6以外はposition: fixedを使うことでできる。 まず、HTMLは以下のような感じ。 <body> <div id="container"> ... <div class="skin"></div> </div> </body> CSSは、とりあえずIE6以外用に、以下のような感じ。 #container { position: relative; height:…
Firefoxのバージョン3.6（Win、Macとも）。こんな感じのHTMLがあったとする。 <p class="cap">firefoxで、text-transform:capitalizeでcapitalizeされない箇所があるけど何で？（firefoxのバージョンは3.6）。</p> <ul class="cap"> <li>firefox</li> </ul> CSSはこんな感じ。 .cap { text-transform: capitali…
ブロック要素にスクロールバーが出る場合、 その内部領域がどうなるのか、ブラウザごとにまとめ。 HTMLの例は以下のような感じ： <div class="outline"> <table> ..... </table> </div> CSSは以下のような感じ： .outline { width: 500px; height: 300px; overflow: auto; } .outline table { width: 10…
昔、何かで読んで、詳細は忘れましたが、 何となく、単位はつけないでおいたほうがよさそう、 というくらいの認識だったので、 ちょっと調べてみようかと。 こちらによくまとめられた記事がありました： line-height の値には単位なしが良いとされる理由 備…
こんなものがあったとは...。 inputタグなどの入力ボックスに対して、 全角/半角の入力を制御する、IEの独自拡張のCSSプロパティ。 例えば、 ime-mode: inactive; とすると、英数字入力モードとなって、 全角が入力できなくなる。 名前が示す通り、IMEを制御…
こちらに情報が： Windows版IEで印刷プレビューするとページ数が無限に増えていく現象: WEBプログラミング NOW! 決め手となったのは、 印刷用のcssで、 height: 277mm; と記述したことによる。 今回はA4に印刷することを目的にしたページだったので、 mmとい…
条件： コンテンツがブラウザウィンドウの高さからあふれる場合は、 footer要素がコンテンツの下につく。 コンテンツがブラウザウィンドウの高さにおさまる場合は、 footer要素がウィンドウの下部につく。 html: body直下のタグの構造は以下のような感じ。 <div id="container"> <div id="conatiner_inner"></div></div>…
併用すると、ページ内リンクを使ったページのコンテンツ表示が、id属性の及ぶ範囲しか表示されなくなる。 position:absolute の指定があるタグは助かる？ 例えば、 <div class="wrapper clearfix"> <div class="block_left"> <p id="item01">...</p> </div> <div class="block_right"> ... </div> </div> というhtmlソースで、 cssの段組み部分は、 .bloc…
ol > li { ... } *html ol > li { ... } というパターン
min-height:100%で、ウィンドウ高さいっぱいのレイアウトにする場合、親要素にheight:100%、 その子要素にmin-height:100%、というセットにする。 孫要素のmin-height:100%は効かない。 子要素にmin-height:100%とheight:100%の両方指定も無理。 IE6は、子要…
IE6： 内容がブラウザの高さを超えれば、それを高さと解釈。 内容がブラウザの高さより短ければ、ブラウザウィンドウの枠を高さと解釈。 Firefox： 常にブラウザウィンドウの枠が高さ。
