[Think IT] 第4回：Webブラウザの検証！ (2/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第4回：Webブラウザの検証！ 著者：米倉 明男 公開日：2008/4/22（火） CSSコーディングを行い、Webブラウザのバグに対して個別対処を行う手法の1つにCSSハックと呼ばれるものがあります。CSSハックとは、WebブラウザのバグやCSSの解釈の違いを逆に利用して、特定のWebブラウザにのみ、CSSのセレクタレベルで個別指定を行う方法です。 CSSハックを記述する場合には、まずモダンWebブラウザを基準にコーディングしていき、IEで表示がおかしい箇所（セレクタ）に対して、CSSハックを後に併記します。通常のセレクタの後から併記することで、まずモダンブラウザは前のセレクタを解釈し、後ろのCSSハックの記述はIEで再読み込みするという順番になります。 注意したいのはあくまでもCSSハックは裏技に過ぎません。Webブラ
[Think IT] 第4回：Webブラウザの検証！ (3/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第4回：Webブラウザの検証！ 著者：米倉 明男 公開日：2008/4/22（火） CSSハックはWebブラウザのバグを利用したいわゆる裏技でしたが、もう1つ「条件付きコメント」と呼ばれるXHTMLのheadタグにif文を入れて、CSSファイル自体を分岐する方法があります。これはIEのみの独自拡張で、Webブラウザ別にCSSを分けたい場合に有効的な手法です（図3）。 CSSハックと条件付きコメントはどちらにも、メリット／デメリットがあります。CSSハックのメリットは、セレクタレベルで指定できることです。Webブラウザのバグによる表示の違いは一部のIDやクラスで発生することが多く、部分指定のみ振り分けたい場合に便利です。その反面、あくまでも裏技なので、正式にWebブラウザが推奨している訳ではありません。 一方の条件付きコメン
Equal-Height Columns (CSS Grid, Flexbox, & Table Methods)
Table of contents The Problem With Equal Height Columns The Six Best Methods To Create Equal-Height Columns CSS grid Flexbox Responsive columns Display-table Floated containers Table markup My original equal-height columns method (floated containers) dates back to October 2008 and it still works perfectly today. However. A lot of new CSS has become available in modern browsers recently and this op
[Think IT] 第3回：リストタグを試す！ (2/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第3回：リストタグを試す！ 著者：米倉 明男 公開日：2008/04/15（火） CSSでリストを縦式ナビゲーションに リストマーカーボックスに表示される記号はブラウザによってデザインが異なるため、Webサイトをデザインする場合には、あまり使われません。 CSSでリストマーカーボックスを非表示にし、リストの背景画像に矢印などのアイキャッチを表示させ、ナビゲーションに見立てることが定番のテクニックです。 それでは、先ほどで記述したXHTMLのリストを、CSSを使ってナビゲーションにしましょう（リスト2）。 ナビゲーションの幅を固定させるために<ul>タグの幅widthを120pxにします。ナビゲーションのテキストサイズを85%に調整しました。リスト項目<li>側の設定は、list-style:none;でリストマーカーボックスの
[Think IT] 第2回：カラムを理解する！ (2/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）の概念 floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば<div>ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。 同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。 floatを使用する場合に注意する点は3つあります。 1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Think IT] 第1回：XHTMLの文書構造化とボックスモデル (3/3)