これは朗報！ CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

2022/06/20 137 users CSS メディアクエリ 朗報 Media width

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New s... 続きを読む

[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス

2012/05/20 304 users コリス relative CSS overflow テクニック

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む

CSSでボックスを上下左右中央に配置する第３の方法 | 3streamer blog

2012/01/17 108 users CSS 上下左右中央 ボックス ウインドウサイズ Box

ポイントはboxの横と高さの1/2 をネガティブマージンで指定するところですね。class=”box”に指定しているmin-widthはブラウザのウィンドウサイズをboxの大きさよりも小さくした時の対策です。これが無いとカラム落ちのような状態になってしまいます。 このやり方のネックは中央に配置される子要素のboxの幅と高さをCSSで指定しないと使えないという点です。例えば、内包する子要素が画像で色... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra expression クロスブラウザ対応 方法

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス

2008/04/25 677 users コリス マージン 透過PNG CSS パク

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ d... 続きを読む