スタイルシート(CSS)講座 トップ >> 実践WEBデザインフローチャート >> まずはじめに全体像をみてみましょう 〜ササクレ〜

まずはじめに全体像をみてみましょう 〜ササクレ〜

今回のサイトは、黒背景でちょっと雰囲気が出るデザインにしてみました。
画像編集ソフト「Fireworks」で、ネオンのような効果を表してみて、
「バー(酒場)」っぽい雰囲気を目指してみたんですが、どーでしょーか。

レイアウトの構成は、下の全体図を見てのとおり、
前回のサイトと見た目は同じですが、
今回は、ちょっと検索エンジン的にお得な構成にしています。



前回のサイト「毒売新聞」は、まずベースボックスを用意して、
ヘッダーレフトセンターフッターの順に、
<DIV>ボックスを組み込んでいったんですが、今回はこんな順番になってます。

ベースボックスを用意するのは同じで、
ヘッダーセンターレフトフッターといった順に、
ボックスを並べていってます。

ページコンテンツのメインを書き込む、センターボックスが、
メニューを書き込む、レフトボックスよりも前になってますよね?
(全体図の見た目は同じですけど、HTMLファイルに書き込む順番が違っています)

こうすると、より内容を早い段階で、検索エンジンに読み込ませることができるので、
キーワードも重要視されやすくなります。

上手につかって、上手に検索エンジンと付き合ってください。

※ちなみに「ササクレ」とは、指の皮が笹の葉のようにめくれる現象のこと。「ササムケ」ともいうらしい。ちょいイライラするよね!

1.<body>とベースボックスの定義 >>

<< スタイルシート(CSS)講座 トップ