Webページを作る際に、高さ100%のボックスを表示させたいというのはよくある。 しかし、これが簡単そうに思えて実は意外と難しかったりする。 高さ100%で表示されるかと思ったらスクロールバーが出たり、ブラウザによって表示が違ったりと苦労することがある。 IEの互換モードでは、bodyのmarginを0にする点にだけ注意すれば、高さ100%にしたい要素にstyle = "height:100%;"を付けるだけで簡単に高さ100%の要素を作ることができる。 <div style = "height: 100%;"> これを高さ100%にします。 </div> 高さ100%のボックス[互換モード] しかし、標準モードではただ単にstyle = "height:100%;"を付けただけでは高さ100%にはならない。 高さ100%というのは親要素に対して100%ということなので、
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML/XHTML(以下、HTML)とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素(今回はimg要素)はoverLayer内に配置します。 ▼サンプル01(HTML部分) <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基本的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。 この (手抜き) 実装が原因で、getAttribute
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く