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

前者は情報サイトなど、ページ数も多く規模が大きなサイトに、後者は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標準を意識したサイトを制作する場合はコーディングだけでなく、デザイン・レイアウトの段階でも考慮する必要があるかもしれません。

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

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

SEO対策としてますます注目されているWeb標準。ソースの簡略化、ファイルサイズの軽減、人にも検索エンジンにもわかりやすい文書構造、つまりSEO対策として有効なのがWeb標準コーディングです。「HomeWeb-coding」ではそんな無駄のないコーディングをいたします。

細部まで丁寧な仕上がりはコーディング専門だからこそ！新規サイトをWeb標準でコーディング、既存サイトのWeb標準化など、お気軽にご相談下さい。

• Web標準コーディングのHomeWeb-coding

Web標準の意味とその目的を説明しています。またよく使うタグの解説もあります。

[Web標準について] 詳しくはこちらから

関連用語集

WEB制作やインターネットに使われる用語を簡単に説明しています。

[関連用語集] 詳しくはこちらから

リンク集

関連サイトのリンク集や当サイトへのリンクの張り方、相互リンクのお願いなどです。

[リンク集] 詳しくはこちらから