min-width、min-height、max-width、max-heightをIE6でも実装する方法

「min-width」「min-height」「max-width」「max-height」をIE6でも実装する方法

CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えないので知らない人もいると思うですが、これがけっこう使えるんですよね。

サイト全体の横幅をpx指定せずに、%やaoutなどを使ってブラウザのサイズに合わせて可変するようなサイトを見かけるんですが、この時にmin-widthとかを指定しておくとブラウザのサイズが小さくなっても表示が変にならないようになるんですよ。

まぁーそんなわけでIE6でも実装出来る方法を解説しておきます。

…ここからが続き

プロパティの意味

プロパティ意味
max-width幅の最大値を指定する
min-width幅の最小値を指定する
max-height高さの最大値を指定する
min-height高さの最小値を指定する

JavaScriptで実装する方法

これが一番簡単で楽な方法だと思います。たぶん実際使っているみなさんのほとんどがJavaScriptを使っていると思いますよ。

  • minmax.jsをダウンロード
    (ページ一番下にあるVersion 1.0: module, test page.からダウンロード)

ダウンロード後下記ソースをhead内に記述。(この時jsへのパスは任意のものして下さい。)

<script type="text/javascript" src="minmax.js"></script>

demo page

JavaScript以外で実装する方法

具体的に言うとCSSのexpressionと言うものを使っての実装方法とCSSハックを使っての方法があるんですが、正直少しややこしいです...。

なので詳しく解説をしているサイトを紹介しておきます。

Track Back

blog.remora.cx

【MovableType】Twitter のつぶやきをサイドバーに表示する

Twitter のログをブログに表示してみた記録。基本的には簡単。ジェネレータで生成した HTML を貼り付けるだけだ。 [Movable Type] T...

by blog.remora.cx  

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article