間違いだらけのSEO対策-ブラウザー編

ブラウザーによって見え方が変わる
よく使われているブラウザーの種類：
Internet Exploler6, Internet Exploler7, Internet Exploler8, Firefox, Google Chrome, Netscape,他
ブラウザーとは：インターネットを利用してホームページを閲覧する際の閲覧用ソフトを指します。
OSとは：オペレーティング･システムの略で、Windows95, Windows 7, WindowsXP, Windows Vista,等を指します。

この中で一番多く日本で使われているブラウザーをご存知ですか？
最新のI.E.は、Internet Exploler8ですが、一番多く使われているブラウザーはInternet Exploler7です。
そして近年、市場シェアーを伸ばしてきたブラウザーは、FirefoxとGoogle Chromeですが、市場シェアーで見るとFirefoxがI.E.に次いで多く使われています。(2009年現在)
私管理人は、Firefoxがメインで、次いでGoogle ChromeをYouTube専用で使用しています。

「画像floatで横並び文章」の後にfloatの解除を！

Internet Explolerだけを使ってチェックして、他のブラウザーでチェックしてない場合に良く起る問題として、Float(回り込み)後の処理を行っていないと、それ以降がガタガタに画面が崩れてズレて見える場合が有ります。
具体的な例を挙げますと、float:left;で画像を左よりにして右側に文章を書いたとしましょう。
右側の文章を書き終わった後に<br style="clear:left" />
又は<br style="clear:both" />等の回り込み解除の処理を行っておかないとI.E.系ブラウザーでは問題なく見えても、FirefoxやNetscapeではグチャグチャに見える場合が多々有ります。
また、I.E.とFirefoxでは、同じ様にmargin:5px; padding:5px;としても、視覚的な隙間の感覚が異なります。この辺りの、顧客目線での制作側の配慮も必要なSEO対策の一部です。

画像左廻り込みと文章の処理

この場合は、style="border:0; float:left; margin-right:10px;"として、ボーダーラインを描かずに、画像を左寄せにし、次に画像と文章がくっつき過ぎないように画像右側に10pxの余白を作っています。

上記画像と文章を見栄え良く作るために一つの段落<p>として処理していますが、ブラウザーが変わると画面が崩れてズレてしまう方の場合の修正方法で肝心なのは、画面崩れやズレを防ぐ為に、</div>又は</p>の後ろに
<br style="clear:left" />か又は、<br style="clear:both" />を入れる事です。
特にずれやすいのは、<div id="right-body">などの中に文章用の<div>や<p>を入れ子として作った時などです。
上記修正方法を施す時に、<br />改行が入るので隙間が出来てしまうのを回避する場合には、上下のマージンを微調整する事で<br />が入っていても隙間はなくなります。

上下マージンゼロで改行Examples :SEO Marketing Free Mail
このページの表は、全て<p>段落で処理されています。例えば、SMTP SSL 465と書かれている枠が一つの<p>段落で書かれていて、borderやマージン調整を行いfloatを使って左寄せして1行を作っています。
見た目には、表に見えますが実は入力項目の一つ一つが全て<p>です。
ソースを見ると理解できると思いますが、横一列の<p>が終わる度に
<br style="clear:left" />が入っているのがお解かりに成ると思います。

スクリーン崩れしない背景CSSの書き方サンプルタグ

条件1：htmlファイルに背景画像表示を直接書き込む場合
条件2：背景画像を右上配置
条件3：背景画像を何度も表示しない
条件4：<p>段落の背景でも<div>背景でも使えます
style="background-image:url(../image/～画像までのurl.jpg); background-repeat:no-repeat; background-position:right top;"

背景画像の表示位置 background-position
右上 background-position:right top;
右中央 background-position:right center;
右下 background-position:right bottom;
左上 background-position:left top;
左中央 background-position:left center;
左下 background-position:left bottom;
中央上 background-position:center top;
中央下 background-position:center bottom;