タグ

CSSとtipsに関するsomatのブックマーク (7)

  • 高さ100%のボックスを作る方法【CSS】 - Programming Magic

    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%ということなので、

    somat
    somat 2010/11/26
  • ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門

    HTMLCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示する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

    ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門
  • IE の getAttribute / setAttribute: Days on the Moon

    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

  • IEのバグで『文字が消える』

    前々から、IE系のブラウザで当ブログを閲覧すると文字が消える現象 が起こっていてAttentionでその注意を促してはいたんですが、原因事態は『どーせIEのCSSのバグ!!』だと分かっていた けど面倒くさいので、直しはやらなかったのを今回修正REMIND MEMO IEは当にバグが多い。  次期バージョンでは、はたしてどれくらい直っているのだろうか ググッたら、背景色を指定したブロック要素内にフロート配置した要素があるとき、ブロック要素内の文字列が消える。が出てきたので、これを参考にすると例示 <div style="background:aqua;"> <div>A</div> <div style="float:right; width:3em; background:blue;">B</div> <div style="clear:right;">C</div> <

    somat
    somat 2006/05/30
  • テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌

    Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、1個1個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。

  • AngkorWonders

    how to start a clothing company is a question that all budding entrepreneurs face. There is no simple answer as this is something that can take years to perfect and implement. The biggest determining factor on how much you should charge for your line of clothes will be the manufacturing cost. If your manufacturing costs are very high then your potential consumers will be unable to afford your prod

    somat
    somat 2006/03/14
  • ブログでCSSによる段組レイアウトが難しい理由

    CSSで2カラムなどの段組レイアウトをやろうとすると、ブログではページ(表示モード)によって左右の段(カラム)の高さが変わるため、なかなか思ったようなレイアウトができません。 たとえば以下のような「典型的」な(しかし実は難しい)レイアウトを実現したいとします。 cfdn_06 hananeko 上のふたつは、サイドバーと記事の領域を「ボーダー」や色で分割し、しかもその境界線がページの最下部まで続くレイアウトの例です。 tableを使えば簡単なこのレイアウトは、CSSでやろうとすると、たいていつまずきます。すわなち、 記事とサイドバーの色分け、あるいはボーダーが最下部まで続かない 段組をfloatでやるにせよ、positionでやるにせよ、背景やボーダーを設定するのはブロックレベル要素(div)なので、divの内容が終わったところで背景色やボーダーが途切れるのは当然です。 All About

  • 1