CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
IE 6, IE 7 の inline-block 考察 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
IEバグ：marginの値が指定値より大きくなる
大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。 最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。 floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。 大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。 該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。 対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。 divを追加して対応という方法
【コラム】OS X ハッキング! (270) どうなる、WebKit? - TIPSもあります | パソコン | マイコミジャーナル
あんなこといいな、できたらいいな……と思っていたワイヤレスでのタイムマシーンのバックアップ。はい、タイムカプセルの出荷が始まっています。1TBか500GBかで悩んでいるのですが、やはり1TBでしょうかね。でも、ちょっと予算オーバー。ふしぎなポッケがあればいいのですけど。 さて、今回は「WebKit」について。2月に取りあげたばかりだが、Acid3テストをクリアするなど、その後の状況は変化している。Windows版も正式にリリースされるなど、近頃勢いが増しているSafariを"先取り"できるこのアプリケーションを、いろいろな角度から見てみよう。 祝・Acid3テストクリア まずはWebKitの最新情報から。最新版が日々アップロードされるナイトリービルドからバイナリパッケージを入手したうえで読み進めていただくと、臨場感が増すこと受け合いだ。 Operaにタッチの差で先を越されたものの、めでたく
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
JSレスでピュアCSSの超カッコいいプログレスバーのサンプル:phpspot開発日誌
Pure CSS Animated Progress Bar | Css Globe Here's a simple demonstration of how you can create animated progress bar using pure css. JSレスでピュアCSSの超カッコいいプログレスバーのサンプル →デモを見る - ズイズイアニメーションしていきます。 何とこれ、ＪａｖａＳｃｒｉｐｔを使っていません。 CSSとHTMLオンリーです。 仕組みは、GIFアニメーションで100%までプログレスする画像を作成しておき、進捗部分までを画像で塗りつぶすというもののようです。 CSSだけじゃ無理だと思うようなところもCSSのみでやっちゃうのは感動してしまいますね。 関連エントリ JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート
404 Blog Not Found:CSS - 縦方向にセンタリングする
2008年03月01日14:15 カテゴリTips CSS - 縦方向にセンタリングする 以下で紹介されていた、縦方向にセンタリング表示するためのCSSです。 Vdot Media - Vertically center content with CSS 縦方向にセンタリングするという需要は私には結構あります。たとえばスライドを作る時とか。 結論だけいきなりまとめてしまうと、以下のようになります。 http://www.dan.co.jp/~dankogai/blog/vcenter.html ここではあえてpaddingをつけてそれぞれのdivタグの位置関係を明示するようにしました。 これで、セルが一つだけ入ったtableを使う必要がなくなりました。 が、はっきりいってめんどいなあ。divタグを三重に使うというのがねえ。原理も、CSSでtableを再現しているに過ぎないし。IE用のテクニ
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
IE8登場以後はCSS tablesを使ってカラムデザインをシンプルに | エンタープライズ | マイコミジャーナル
Kevin Yank氏によって執筆されたCSS tablesに関する記事が2月28日(米国時間)、SitePointに「Table-Based Layout Is The Next Big Thing」として公開された。IE8がリリースされた以降のWebデザインのテクニックを検討するうえで興味深い内容だ。 現状では複数カラムデザインを持ったのWebページを制作する場合、古典的にはHTMLのtable要素とCSSによるサイズ指定を組み合わせたり、CSSを使う場合でもトリッキーな指定を行わなければならない。最新のCSSの機能を使うとIE6/7などで表示されない問題があるからだ。 こうした状況はIE8の登場からかわることになりそうだ。すでに主要なWebブラウザには導入されているCSS tablesの機能がIE8に導入されるためだ。このため、IE8の普及にあわせて従来の複雑な記述を、CSS tab
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
IE7 と CSS ハックと条件付コメント - lucky bag
IE に適用させないための各種 CSS ハックは、IE7 で修正される事になりそう。 IEBlog : Call to action: The demise of CSS hacks and broken pages 修正しておいた方が良い一般的なハック IEBlog では下記のハックを使用しているウェブページは修正しといた方が良いよってな事を呼びかけている。 Child Hack ( body > #foo ) StarHtmlHack ( * html #foo ) The Owen Hack ( head:first-child+body #foo ) head + body Selector ( head + body #foo ) こういったハックを使わずに、IE 独自実装の Conditional Comments を使うことを推奨しているんだけれど、head 内に記述するのは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
height100%のボックス〜CSSテクニック〜
http://d-lover.com/css/hack.shtml
http://youmos.com/news/iefixed_htc
TableとCSSいろいろ - DesignWalker
