Web標準化、SEO対策などのコーディング専門サイトです！全国どこからでもお申し込みいただけます。

HomeWeb-codingでは人にも検索エンジンにもわかりやすいシンプルなWeb標準コーディングを提供しております。その他、テーブルレイアウトからフルCSSレイアウトまで幅広く対応、また、SEOに特化したものやアクセシビリティを強化したコーディングなども承っておりますのでお気軽にお問い合わせ下さい。

電子メールにて資料や素材を送付できる環境であれば、全国どこからでもお申し込みいただけます。
北海道，青森県，岩手県，宮城県，秋田県，山形県，福島県
茨城県，栃木県，群馬県，埼玉県，千葉県，東京都，神奈川県
新潟県，富山県，石川県，福井県，山梨県，長野県
静岡県，愛知県，岐阜県，三重県
滋賀県，京都府，大阪府，兵庫県，奈良県，和歌山県
鳥取県，島根県，岡山県，広島県，山口県
徳島県，香川県，愛媛県，高知県
福岡県，佐賀県，長崎県，熊本県，大分県，宮崎県，鹿児島県，沖縄県
基本的にはメールや電話（スカイプ）での打合せをお願いしておりますが、福井県近辺のお客様に関しては直接お伺いすることも可能です。

marginの相殺に悩まないために独自のルールをつくる

「上下のmarginを指定したものの、思うように余白をコントロールできない」

CSSを設定する上で、こういったことは良く聞かれます。

上下の余白が思うようにいかない原因はいくつか考えられますが、「marginの相殺」が考えられます。
次の例を見てください。

HTML

CSS

上の例では、一つのリストの上下に余白が設定されています。そのリストが二つ並ぶのでリスト間の余白は15pxになるはずです。ところが実際には10pxの余白しか空きません。これは要素間の重なり合うmarginには相殺のルールがあるためです。

要素間のmarginが重なり合う場合、大きい値が有効になる

この規則を忘れずに制作するのもいいのですが、要は要素間のmarginを重ならないようにすればいいということです。例えば、一方はmarginでもう片方はpaddingで指定するといった感じです。

私の場合はもっと単純に「下の余白は指定しない」ようにしています。もちろん場合によって使い分けてはいますが、独自の制作ルールを作っておくことで、作業がスムーズに進められます。

制作を進めている中で、「どっちに設定しようか…」、とどちらでもいいことに悩むのは意外と多いものです。独自ルールを設けていれば、あれこれ悩まずに作業もはかどるというわけです。

テーブルレイアウト、CSSレイアウトの定義

Web標準が広まり、CSSレイアウトに移行するサイトが目立ってきました。その時によく耳にするのが、脱テーブルレイアウトです。簡単にいうならば、テーブルを使わずにレイアウトするということです。

ただ、この言葉も共通の定義がされているわけではなく、「テーブルを一切使わずにページを構成する」のが「CSSレイアウト」というわけでもありません。少なくとも私はテーブルタグの使用を否定はしていません。

CSSレイアウトとはWeb標準の考えに則り、文書構造（正しいHTML）と視覚表現（CSS）を分けた制作方法と言い換えることができます。

そのため、即「テーブルタグ禁止！」につながるものではないと考えます。脱テーブルレイアウトは文字通り、レイアウトとしてのテーブル使用はしないことですので、表組みなどはテーブルレイアウトを使うべき箇所ではないでしょうか。

テーブルレイアウトからCSSレイアウトへの移行の背景にはSEOの考え方があります。テーブルレイアウトはクロスブラウザにも対応したすぐれた技法ですが、入れ子になることが多くソースが複雑化します。複雑化したソースはファイルサイズ増加につながり、読み込みにも時間がかかってしまうことになります。

こういった視点で考えると、クロスブラウザの利点だけでは割が合わないようですが、複雑な入れ子にしなければ良いだけのことです。もともとの目的である表組みや、スタイルシートでは難しい部分的なレイアウトなど、テーブルタグを正しく有効に使えばSEO的にも問題ないのではないでしょうか。

各ブラウザもCSSに対して順応しているといってもまだ完全ではありません。テーブルとCSSのどちらの利点のほうが大きいかを考慮した上で制作方法を選ぶのが一番です。

コーディング関連情報を随時更新中！詳しくはこちらをご覧下さい。