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

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

HTML

CSS

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

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

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

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

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

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

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

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

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

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

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

h1タグは内的SEO対策にとって重要な割合を占めています。それだけに無関係なキーワードを詰め込んだり、重み付けの重複など、本来の目的から外れた使い方が広まってしまい、その結果、スパム行為として警戒されるようになっています。

「h1タグのフォントサイズを小さくするだけでスパム行為とみなされる。」と聞くことがあります。本にも書いている場合があります。しかし、フォントサイズを通常サイズにするだけでスパムとされるのでしょうか。

スパム行為の定義として「検索エンジンを騙す可能性のある行為」と解釈できます。具体的には以下のようなものがあります。

・背景色と同色にして文字を隠す
・文字を読めないぐらいに小さくする
・text-indentで文字を実質非表示にする
・他…

こうしてみると、h1タグの文字サイズを通常サイズにする行為だけでは、到底スパムとは考えられません。そもそもh1タグをそのままデザインとして使えるのか？と、疑問すら感じます。

「h1タグのフォントサイズを小さくするとスパム」というのは、ページ説明のためにページ内に1か所だけ設置するといった基本的な使い方を無視して、テキスト内のキーワード部分にh1タグを埋め込むことを指しているもので、それが間違って広まってしまったのではないでしょうか。実際、正しい目的でh1タグを使った場合、フォントサイズを調節してスパムとみなされた例は聞いたことはありません。

悪用されれば規制されるように、今後もスパムの定義が変わっていくかもしれませんが、正しい情報を持ってホームページ制作に取り組みたいものです。

・サイト全体でページの体裁が整っている
・各ページそれぞれレイアウトが変化する

前者は情報サイトなど、ページ数も多く規模が大きなサイトに、後者は10ページ程度で小規模ながら個性のあるのサイトによく見られます。さて、この大きく分けて2つのパターンのサイトは、どのようにスタイルシート設定すれば効率的でしょうか。

サイト全体でページの体裁が整っている場合は、パーツごと設定するのが効率的です。具体的には、よく使われるパーツにclassセレクタを指定するのです。

HTML

CSS

このサンプルでは、箇条書きリストタグ（ul）に対して、classセレクタをtype1として設定したものです。このように設定することで、何度もスタイルシートで設定することなく、同じ表示形式のタグを簡単に設置することができます。

次に各ページそれぞれデザイン／レイアウトが変化する場合です。この場合はページごとidセレクタをふって、その中で処理するのがよいでしょう。

HTML

CSS

このようにidセレクタの後ろに続けて記述することで、他ページに影響を与えることなくデザイン／レイアウトを設定できるわけです。

2つのパターンの記述法を紹介しましたが、どちらにしてもこれから作ろうとしているホームページの全体像を把握しておくことが大事です。把握できているからこそスタイルシートの記述方法も選べるというもの。スタイルシート制作に入る前に、まずはじっくりとサイト全体を確認しておきましょう。

この対処法はfloatしたボックスに対して、inlineを指定することで簡単に解決します。

CSS

上記のように「display:inline;」がなければ、IE表示では左余白は20ピクセルになってしまいます。ピクセル単位で構成されたページでは、この対処法を知っているか知らないかでは制作面に大きな違いが出てきます。簡単な方法ですので是非、ご活用ください。

これは背景を入れているボックスにwidth指定を加えることで解決します。

CSS

また、clear指定にも解決法があります。
brタグに回り込み解除を埋め込む方法をよく目にしますが、背景が消えてしまうことが多々あります。そこで以下のような指定で回り込みを解除させるとある程度のバグを回避できます。

HTML

空要素になってしまうものの、レイアウトが崩れてしまうよりはよいでしょう。また、スペーサー（透過画像）で解除させても同様の効果があります。

HTML

このようにいくつか解決法があるわけですが、width指定を加えて解決するのがベストでしょう。

【絶対サイズ単位】
「cm」（センチメートル）
「mm」（センチメートル）
「in」（インチ）：　1インチ＝2.54センチ
「pt」（ポイント）：　1ポイント＝1/72インチ
「pc」（パイカ）：　1パイカ＝12ポイント

【相対サイズ単位】
「px」（ピクセル）：　ディスプレイの画像解像度に依存します。
「%」（パーセント）：　他の値（基準値）に依存します。
「em」（エム）：　適用要素のフォントサイズを1とします。
「ex」（エックスハイト）：　適用要素の英小文字「x」の高さを1とします。

絶対サイズはIEなどのブラウザ設定のフォントサイズ変更を無効にしますが、safariなどのブラウザでは強制的にフォントサイズを変更できるので効果がありません。またアクセシビリティの面からもフォントサイズの固定はユーザーの設定を制限してしまうので望ましくありません。「ありません、ありません」と続きましたが、個人的にはレイアウトに影響してしまう場合など部分的な使用に関しては許されるかと考えています。でも注意は必要です。

HTML

CSS

上の例でも正常に表示されるのですが、以下のように記述すればより効率よく同じ効果を出すことができます。

CSS

外側(div.box1)の幅にあわせて、内側(div.box2)では幅の指定なしで外余白(margin)と内余白(padding)で幅を調節しているわけです。こうすれば、box2に入れる要素全てに設定しなくても同じ余白を与えることが出来ます。

今回のポイント
width指定は外側だけで内側はmarginとpaddingで調節

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

HTML

CSS

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

CSS

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

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

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

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

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

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

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

フォントサイズを絶対指定にしてもSafariなどブラウザによっては強制的に拡大することができてしまうため、デザイン優先の場合はレイアウト崩れが考えられる部分については画像にするしかありません。しかし、SEOの考え方やMovableTypeなどのブログシステムが普及してきたためテキスト表示は重要になってきました。特に注意が必要なのは、ナビゲーション部分や見出しタイトルなどで使われるテキストと背景の組み合わせでしょう。

フォントサイズを大きくしたら、レイアウトが崩れたり、背景画像が途切れたりするサイトは少なくありません。フォントサイズを可変しても崩れない背景画像の使い方やレイアウトは、今後、Webデザイン／コーディングする上で考慮すべきポイントと言えるでしょう。

「alt属性」は画像の代わりに表示する代替テキストで、主にブラウザ設定で画像を非表示（テキストのみの表示）にした場合を対象としています。
「titl属性」の場合は、ポインタを画像に合わせたときに表示される画像の説明テキストとなります。

どちらも画像の説明には変わりないのですが、画像非表示を対象としたものは「alt属性」、表示画像に対しては「titl属性」とするのが適切といえます。大したことではないのですが、以下のような使い方があります。

【画像にポインタを合わせてもテキストが表示されず、画像非表示にすると代替テキストを表示】

だからどーした？
といった感じですが、アクセシビリティが重要になったときに役立つかも？

HTML

CSS

この手法を使えば、ブラウザでは「見出しテキスト」の代わりに「見出し画像」が表示され、CSS未使用の場合は「見出しテキスト」が表示されることになります。見栄えもよく、音声読み上げソフトにも読み込まれるためアクセシビリティの面でも有効になります。SEO対策としても文書構成もわかりやすくなるため有効になるのはずですが、現状では一筋縄にはいかないようです。

OFF-LEFT手法は一昔前までは各検索エンジンにも有効に読み込まれていました。しかし、Yahooの検索エンジンではスパム行為としてみなされ検索結果から除外される傾向にあります。これは「text-indent」の不自然な値が問題になっているようです。確かにスパムとして使われている手法なのですが、表現方法としては優れているため制作側としては通常通り使えないのが非常に残念です。

コーディングの面から見ると、alt属性に無関係なテキストを詰め込んだり、必要以上のリンクの重み付けなどがスパム行為に当たります。悪質なスパム行為には検索結果から除外されるなどのペナルティがあるのですが、SEO効果を上げるためだけの手法はなくならないでしょう。しかし、これらの効果は一時的なもので、すぐに使われなくなることが多いのです。こういったSEO対策ではサイト内容とは別に、SEO効果を上げるためだけの手法を研究、更新していかなければなりません。

短期間のサイト管理を考えた場合は、このようなペナルティにならない程度のスパム行為は有効と言えるかもしれません。しかし長期間のサイト運営、あるいはサイト制作者側としては、Web標準などの本来の目的に則したSEO対策コーディングを施し、サイト内容を充実させること（ページ更新がしやすいこと）が求められてくるでしょう。