html と css

■ html と css ■

こんにちは。tanzan です。

本年もよろしくお願いいたします。

しかし、年末商戦は来ませんでしたねえ。数年前なら高島屋だけで10万円くらいの利益が出たものでしたが…。そして毎年低調な新年は、以前にも増して低調となっています。

今日書くのは、ホームページのコンテンツの話ではなく、WEBデザインや、ページのレイアウトなどの話です。

html と css とをどのように組み合わせるかを身につけると、サイトのメンテナンスが容易になるばかりでなく、SEO的にも有利なサイトを作ることができます。

できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ」という本が出ています。

3人のまっとうなアフィリエイターの方たちが書かれた本ですね。内容的には初級向けかな、と思いますが、中級くらいの人も自分のやっていることを見直すには良いです。

でも、ほとんど僕がメルマガで書いている内容とも重なるんです。結局、長くやっている人たちは、同じような方向性に向かってきている、ということでしょうか。

ただこの本で一箇所「うん?」と思ったのは、iframe の使用を推奨している点です。メニュー部分を iframe で外部ファイル化することで、メニュー部分を共通化する、ファイルサイズを小さくする、という利点が強調されています。

しかし、僕は iframe をメニューに使うのは、内部リンクの強化という面ではマイナスだと思います。

メニューの共通化は、HTML編集ソフトに DreamWeaver を使って、テンプレート機能を利用すれば、かなり容易に実現できます。この点は「できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ」にも説明されています。

ページの左側にメニューを持って来たい時に、検索エンジンにメニューではなく
コンテンツを先に読ませる方法はCSSを使って実現できます。

方法は先日紹介した参考書、「実践 Web Standards Design」という本に出ています。ちょっと高いですけど、レイアウトの実践部分は役に立ちます。

実を言うと、XOOPSの動的サイトをやめて、「実践 Web Standards Design」に書いてあるようなCSSを使ったページ構成に変えたら、アクセス数が倍くらいになったサイトがあります。

XOOPSに付属するテンプレートは、テーブルを使ったページデザインを使っていて、SEOとしては勧められません。ですから、テーブルを使ったデザインに問題があったのか、動的ページに問題があったのか、その両方なのかまではよくわかりませんが。

CSSを使ったページデザインというのは、例えば以下のようなhtml文になります。実際は半角文字で書かれます。

<div id=”header”>
 ここにヘッダー部分を書く
</div>
<div id=”main”>
 <div id=”contents”>
  ここに本文を書く
 </div>
 <div id=”menu”>
  ここにメニューを書く
 </div>
</div>
<div id=”footer”>
 ここにフッターを書く
</div>

css ファイルで main と menu の位置を指定してやることで、本文を前にメニューが後に記述されたままで、見かけ上はメニューが左側に来るレイアウトを実現することができます。

例えばこんな感じ。 ここはまだ編集中の「遺跡の旅」というサイトです。各ページの左側にあるメニューは、htmlファイルの中では、右側のコンテンツの後に書かれています。

メニューはキーワードが分散していますから、検索エンジンのクローラー(ロボット)がメニューを先に読み込むと、ページのテーマがわかりづらくなります。

「遺跡の旅」の例だと、ペルーの遺跡のページを読み込んだときに、メニューを先に読み込ませると、他の国の名前が検索エンジンに先に拾われてしまいます。

このため、コンテンツ部分をファイルの中の前の方に出して、ページ特有のキーワードを検索エンジンがわかりやすいようにしています。

css ファイルの中で使っているのは、「遺跡の旅」サイトでは float という指定です。css の中の指定で、コンテンツ部分を右に寄せ、メニュー部分を左に寄せて横に並べています。

レイアウト用には、他にも position という指定を用いることもあるようです。でも僕はほとんど使ったことがありません。

もう一つのポイントは、テーブルを使わないレイアウトを使うことの重要性です。「遺跡の旅」のトップページは、コードを見てもらうとわかりますが、テーブルを一つも含んでいません。テーブルでブロックを区切る代わりに、div タグでブロックを区切ってあります。

テーブルを使ったレイアウトは、ファイルが大きくなるという問題ばかりでなく、コンテンツと見かけのデザインがすべて html ファイルに含まれてしまう、という欠点があります。

html 文中でテーブルを使ったレイアウトを使ってしまうと、ページのデザインの変更がしにくいのが一番の問題です。

div でブロックを区切っておけば、css ファイルの中での指定を変えるだけで、メニューを右側に表示することも簡単。メニューや本文の横幅を変更することも容易です。サイトの中のすべてのページに変更を加える必要がなく、css ファイルを一つだけ変更すれば良いからです。

さらに、例えばPC用に作られたサイトを、携帯用に作り変えるのも、テーブルを使っていたら大変です。

何しろ、PCと携帯では、表示エリアが全く違いますから、同じレイアウトが使えません。

テーブルを使ってPC用に表示を固定してしまうと、携帯用のサイトに作り変えるためには、全ページのレイアウトを html をいじって変えなくてはなりません。

ところが html 文中にはコンテンツと div を使ったブロックの区切りだけを入れておけば、極端な話、css を変更すれば、携帯画面の横幅に合わせた、情報が縦に並んだレイアウトに変更することもできてしまいます。

つまり、html 文では、文章の論理的な構造を div で区切ったブロックに整理して記述するだけにして、レイアウトや色、フォントサイズなどの「見かけ」を決めるものは一切入れないようにしておく。

一方 css ファイルの中で、対象となるブラウザー(PCとか携帯とかハンドヘルド機とかゲーム機とか)に合わせた「見かけ」を記述する、というようにします。

こうしておくと、SEOにも強いだけでなく、メンテナンスもしやすいサイトが出来上がります。

具体的な css の指定方法は、このメルマガでは説明し切れませんから、参考書を見るか、あるいは「css レイアウト」などで検索をかけて出て来るサイトを参考にしてください。

僕自身、「css レイアウト」で出て来るいくつかのサイトを参考にしてやり方を覚えました。ただ、参考書を見たら、もっとスマートなやり方が出ていましたが。