コーディング：ここをキッチリ作ると使い勝手、サイト更新、サイト増ページ、リニューアルに役立ちまくりです！

CSSレイアウトで、SEOと全体の設計を配慮したコーディングをいたします。

・・・と言ってもそもそも「CSSとかSEOって何？」という方や「tableレイアウトでもいいじゃん」という方も居られるかと思います。
細かい内容ですので、興味がある方は「もっと詳しく」からご覧ください。

›› もっと詳しく

・・・と言ってもそもそも「CSSとかSEOって何？」という方や「tableレイアウトでもいいじゃん」という方も居られるかと思います。
細かい内容ですので、興味がある方はご覧ください。

›› 興味がないような気がしてきたので閉じる

CSSレイアウトとtableレイアウト：ぶっちゃけると、CSSがいいんですよ。理由は下記をご覧ください。

そう、 Web上のデザインのレイアウト方法はCSSレイアウト以外にTABLEレイアウトもあります。
TABLEタグは本来、表組みを表すためのHTMLタグなのですが、昔のブラウザではCSSをサポートしきれていなかったのでレイアウトに使用されていました。
TABLEタグはデザインの再現の為に何重にも入れ子をして使用され、レイアウトのマージンを取るためには透明のGIFを使用し、どのブラウザでも同じデザインに見えるクロスブラウザ対策がなされました。

cssレイアウト 
<body>
<div id="headMenu">上の部分</div>
<div id="contents">内容の部分</div>

<ul id="contentsMenu"><li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>

<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li></ul></body>
body {width: 750px;margin: 10px; padding: 0px;}
#headMenu {
height: 60px;text-align: center;margin-bottom:10px;}
#contents {	float: left; width: 600px;}
#contentsMenu {
padding: 0px;width: 140px; margin-left: 10px;float: left;}
#contentsMenu li {height: 30px; list-style-type: none;}

内容の意味を示すHTMLタグで文章などをマーキングし、レイアウトはHTMLファイルとは別のCSSファイル（別の手法もありますが、外部ファイルにする方が検索エンジン対策と、メンテナンスに有効です）で行います。HTMLはレイアウト情報の無い、内容の意味などがマーキングがされたものになります。
tableレイアウト 
<body marginwidth="10" marginheight="10">
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr><td height="60" colspan="3" align="center">上の部分</td></tr>

<tr><td><img src="img/chording-spacer.gif" width="600" height="10"></td>
<td><img src="img/chording-spacer.gif" width="10" height="10"></td>
<td><img src="img/chording-spacer.gif" width="140" height="10"></td></tr>
<tr><td valign="top">内容の部分</td><td></td>

<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="30"><a href="#">メニュー１</a></td></tr>
<tr><td height="30"><a href="#">メニュー２</a></td></tr>

<tr><td height="30"><a href="#">メニュー３</a></td></tr>
<tr><td height="30"><a href="#">メニュー４</a></td></tr>
<tr><td height="30"><a href="#">メニュー５</a></td></tr>

</table></td></tr></table>
</body>

作成されたHTMLは非常に複雑で、HTMLエディタ（Dreamweaverなど）を使用しないと修正が難しいものです。プログラマにとってもHTMLソースを見ても複雑すぎてtableのレイアウトが分りにくいので、プログラムを仕込む場合、近くの文字を検索してコメントを入れる、などと言った作業をしているのです。

CSSレイアウトの利点

CSSレイアウトで作成されたHTMLは非常に単純で、TEXTエディタ（メモ帳など）で修正するべき箇所のテキストの発見なども容易です。プログラマにとってもHTMLソースが単純な為、目標とする部位の把握がしやすいのです。またデザインの要素が外部ファイルになっているので、デザイン上の修正のせいでプログラムに影響が出ることも少なくなります。

このことが、YahooやGoogleなどの検索エンジンの情報収集ロボットプログラムにも言えます。 CSSで組まれたサイトにはより早く情報にたどり着け、その単語のサイト内での重要度も分かります。このことからCSSは検索エンジン対策（SEO）に効果が有ると言われています。

必ずしも「CSSレイアウト＝SEOに効果あり」と言うわけでもありません

CSSレイアウトと言っても非効率的なタグの入れ子、タグの意味を無視したマーキングなどを行っていては全く効果がありません。
これではtableレイアウトの方が、過去のブラウザでも確かに表示できる点を考えると、マシです。

螺旋デザインではCSSを利用し、HTMLソースをシンプルに記述をし、的確にマーキングいたします。
これによってメンテナンス性が高く、SEOに効果的なサイト制作が行えます。

コーディング基本設定：指定がない場合この設定で制作します

対応ブラウザ 文字コード html 宣言文 html 拡張子 画像タイプ
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Firefox（制作時の最新版）
  • Safari（制作時の最新版）
    ※mac版のみ対応
  • ベータ版は仕様がどんどん変わりますので、対応いたしません。
 UTF-8 XHTML 1.0 Transitional html gif / jpeg / png
  • pngの使用についてはIE6での見栄えに悪影響を与えない様に使用します。
ファイル構成