1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. 2007年3月

2007年3月

CSSレイアウトのコツ1 ~widthとpaddingを同時に記述しない~

CSSレイアウトにっとってクロスブラウザは無視できない問題です。記述によってはIE7とIE6の間にもCSSの解釈に違いが見られ、MacIEなどの旧ブラウザに泣かされた人は少なくないはず。そこで、CSSレイアウトでのクロスブラウザ対策のちょっとした工夫を紹介します。

まずは下記の例を見てください。

HTML

<div>
 <p>テキスト</p>
</div>

CSS

div{
 width:200px;
 padding-left:20px;
}

上記のようにwidthとpaddingを指定すると、IEでは200ピクセルで表示されますが、Firfoxではwidth+paddingの220ピクセルで表示されてしまいます。widthとborderの場合も同様の表示になってしまいます。そこで一手間かけます。

CSS

div{
 width:200px;
}
div p{
 padding-left:20px;
}

上記のようにwidthとpaddingを分けて記述すればどのブラウザでも同じ幅で表示されます。これはdivボックスを入れごにする場合も同じことが言えます。

今回のポイント
width(height)と左右(上下)paddingの指定を同時にしない

SEO対策は自分でするもの!

検索結果の上位に表示されるSEO対策はネットビジネスにおいて、非常に魅力的なものです。しかし、実際に効果が現れるには、サイト運営側にもそれなりの努力が必要です。

当サイトはSEO業務を行うわけではありません。SEO対策の基礎としてWeb標準サイト制作を提供しています。例えるなら「箱」を提供しているわけです。そして、その「箱」に入れるモノが重要になってきます。つまりサイトの「内容」です。

サイトの内容を充実、あるいは見る者にとって有用な情報を提供できるようになれば、後はちょっとした工夫でSEO効果が期待できるようになるのです。もちろんSEO業者に依頼しても効果は期待できます。しかし、業者にまかせっきりで肝心の「内容」が疎かになってしまうと、あっという間に検索結果の表示順位は下がっていきます。

情報を提供する熱意があってこそ、SEO対策は効果を発揮するのです!

そのお手伝いとして当サイトの「箱(サイト制作)」はいかがでしょうか?(宣伝・・・。)

CSSハックは必須か?

最近のWeb標準化とともに注目されているCSSレイアウトですが、様々なブラウザに対応するために苦労している方は多いはず。と言うのもCSSレイアウトでは各種ブラウザや旧バージョンのブラウザなどでバグが多く、レイアウト崩れを起こすことが多々あるからです。このように各種ブラウザに対応するためのクロスブラウザをクリアするために、ブラウザのバグを逆に利用したハックと呼ばれる技法があります。一時は必須事項だったのですが、ブラウザのバグを逆利用する技法のため確実な表示を保障するものではありません。

個人的にハックは、テーブルレイアウトなどの従来のサイト制作からWeb標準による制作に移行する間だけの一時的な技法として必要ですが、依存するべきものではないと考えています。そのため、Web標準を意識したサイトを制作する場合はコーディングだけでなく、デザイン・レイアウトの段階でも考慮する必要があるかもしれません。