低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

(X)HTML+CSSでWebサイトを制作するときに便利なTipsをご紹介します。

• CSSハック

  ブラウザのバグや独自拡張を利用してクロスブラウザ対策を行う手法です。

• フッタ固定

  常に画面最下部にフッタを表示する方法。
  無駄なタグの記述を極力控えています。

• リストのセンタリング

  幅が可変のリストを横並びにした際にリスト全体をセンタリングする方法です。

• CSSによる画像置換

  (X)HTMLファイルにはプレーンテキストで記述し、CSSで画像に置換する方法と注意点について。

• tableを使わずdivで縦位置を指定

  vertical-alignをdivで実現する方法です。

• テーブルのヘッダを固定

  テーブルのヘッダを固定し、データ部分のみをスクロールする方法です。

• ヘッダとフッタを固定して常に表示

  フレームを使わずに画面の上下にヘッダとフッタを固定する方法です。
  

• float解除

  floatした要素のfloatを解除する方法です。
  

• floatしたdivの高さを揃える

  floatした要素の高さを揃える方法です。
  

• tableを使わずdivで縦位置を指定（改訂）

  vertical-alignをdivで実現する方法です。以前ご紹介したものよりも、もっと簡単に実装できる方法がありましたので改めてご紹介します。

• 幅を固定しないでfloatをする

  floatでdivを2つ横並びしたときに、片方しか幅を指定せず、もう片方の幅はautoにする方法です。
  ブラウザの解像度によって幅を変更したいときなどに活用できます。

• min-heightのクロスブラウザ対策

  IE6等では対応していないmin-heightですが、クロスブラウザ対策（ブラウザの種類問わず同じように表示させるための対策）は簡単です。

• リストタグでパンくずを作る

  ul li タグでパンくずを作る方法です。
  SEO効果の高いリストタグを使用して、キーワードの重みをアピールできます。