m2

css

MozBoxSizing style property | webkitBoxSizing style property

vender prefix の付いた CSS プロパティを JavaScript から設定する方法をど忘れしてたのでメモ。 Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties. In Internet Explorer…

子ウィンドウに親ウィンドウの CSS を継承させる

普通に考えればこんな感じ。 // 子ウィンドウを作成 var w=window.open('about:blank','hoge','width=800,height=600,location=yes'); var d=w.document; d.write('<html><head><title>'+document.title+' の子ウィンドウ<\/title><\/head>'); d.write('<body>'); /* (略) */ d.write('</body></head></html>…

style 要素を動的に生成する

普通に考えればこんな感じ。 var style=document.createElement('style'); style.setAttribute('type', 'text\/css'); style.innerHTML='…'; document.getElementsByTagName('head')[0].appendChild(style); が、IE6 では style 要素の innerHTML プロパティ…

伸縮するメニュー

css

元ネタ javascriptで伸縮するメニューができる http://loconet.web2.jp/blog/archives/2007/03/javascript.html 似たようなことが CSS だけでできそうだと思って書いてみました(アニメーションはしません)。 .menu { width: 500px; } .menu th { width: auto…

毎度 IE6 でハマる

<div style="background-color:white;"> <p style="color:red">これが消えちゃう</p> <p style="width:100px;float:left;">aaa</p> <p style="clear:both">bbb</p> </div> こういうのって検索キーワードが難しい。最小限の再現コードはできてるのにそれを正確に表現しようとすると「背景色を指定した要素の中に…floatがあって…clearが必要で…」なんてことになる。こうなると「とにかく見て!知ってる…

ウィンドウ幅を狭めても本文が読みやすい2カラムリキッドレイアウト(続・リキッドレイアウトとソリッドレイアウト)

前置き 前回は webページのレイアウトをする際に 単純なリキッド(横幅可変な)レイアウトだと、ディスプレイが大きい場合、横に広がりすぎて読みにくい。 ソリッド(横幅固定の)レイアウトだとウィンドウ幅を狭めた時に横スクロールが必要になり読みにくい。 …

CSSルールを一覧表示するブックマークレット

を作った。 javascript:(function(){var d=document;var s=d.styleSheets;if(s.length==0){alert("StyleSheet Not Found.");return}var ht='';for(var i=0;ihref:'+(s[i].href||'ページ内')+'(media:'+(s[i].media.mediaText||(s[i].media.item)?'':s[i].med…