• ホーム
• ホームページ制作
• CSS＋XHTMLによるホームページ制作

CSS＋XHTMLによるホームページ制作

ホームページ制作方法の変化

ホームページ制作方法による違い

tableタグを利用したHTML

tableタグを利用したHTMLで制作されたホームページは「どんな見た目のページなのか」というデザイン部分と、「このページには何が書かれているか」という構造部分を区別することなく“ゴチャ混ぜ”に書かれています。

CSS+XHTMLで制作されたホームページ

いっぽう、CSS+XHTMLで制作されたホームページは、デザイン部分をCSSが受け持ち、構造部分をXHTMLが受け持っています。

CSSの役割は「人間が目で見る、見た目のデザイン部分」であり、XHTMLの役割は「検索エンジンやブラウザなどのコンピュータソフトが読んで、何が書いてあるかを理解させる、意味の部分」ということです。それぞれの役割を生かしたホームページ制作方法は非常に理にかなった作り方といえます。

このCSS+XHTMLというホームページ制作方法をとることで、さまざまなメリットが生まれます。そのメリットとはなんでしょう？

CSS+XHTMLによるホームページ制作のメリット

CSS+XHTMLによるホームページ制作には、さまざまなメリットがあります。その中でも、お客様にとってメリットになる部分を紹介したいと思います。

CSS+XHTMLのメリット1「SEO対策」

CSS+XHTMLで制作されたホームページは、SEO対策に有効です。
検索エンジンはグラフィカルな部分であるデザインの良し悪しを理解できません。ですから、どんなにすばらしいデザインであっても検索エンジンには関係ないことなのです。

tableタグを利用したHTML

tableタグを利用したHTMLで制作されたホームページは「どんな見た目のページなのか」というデザイン部分と、「このページには何が書かれているか」という構造部分を区別することなく“ゴチャ混ぜ”に書かれています。すると検索エンジンは「理解できないものが混ざっている、内容が分かりにくいホームページ」という認識をしてしまい、SEO対策にとても不利となってしまうのです。

CSS+XHTMLで制作されたホームページ

いっぽう、CSS+XHTMLで制作されたホームページというのは「このページには何が書かれているか」という文章部分をXHTMLが受け持っており、検索エンジンに対して、このXHTMLに書かれている意味を読ませることができるのです。すると検索エンジンは「どんなこと(キーワード)を重要視している内容なのかなど、意味付けがしっかりされた分かりやすいホームページ」と認識し、SEO対策に有効なるのです。
SEO対策に関して、詳しくは「SEO対策について」ページをご覧下さい。

CSS+XHTMLのメリット2「ユーザビリティ」

CSS+XHTMLで制作されたホームページは、ユーザビリティ(使いやすさ)も優れています。
音声ブラウザをご存じでしょうか。視覚健常者のかたはホームページを見る場合ブラウザを利用しますが、視覚障害者のかたは音声ブラウザを用います。音声ブラウザとは、ホームページの情報を解析し、合成音声で読み上げてくれるソフトウェアのことです。

音声ブラウザは通常、HTML上に書かれた文章を上部から順番に読んでいきます。視覚健常者のかたが本を読むのと同じ感覚です。しかしホームページには、本と違い音声で読み上げる必要のない部分も含まれています。

このまま音声ブラウザで聞いた場合、「ホーム、会社案内、よくある質問、リクルート…」と読まれてしまい、なかなか本文に到達しません。視覚障害者のかたにとって、これは非常に使いにくいホームページとなってしまいます。

しかし、CSS+XHTMLで制作されたホームページでは「この部分は読まない、この部分から読み始める」という読み上げ順序の設定ができ、一番始めに本文から読ませるたりすることができるのです。

CSS+XHTMLで制作されたホームページというのは、ユーザビリティに優れ、音声ブラウザへの対応も容易ということが分かっていただけたと思います。

音声ブラウザとは

IBM ホームページリーダー

音声ブラウザとは、ホームページ上の情報を解析し、音声合成で読み上げてくれるソフトです。主に視覚障害者がホームページを閲覧する際に利用されます。代表的な音声ブラウザは、IBMの「ホームページリーダー」です。

スクリーンリーダーとは

スクリーンリーダーとは、パソコン画面の内容やユーザーの操作を合成音声や点字ディスプレイに出力するためのソフトです。こちらも主に視覚障害者がパソコンを操作する際に利用されます。

音声ブラウザの場合、ホームページ上の情報のみを読み上げますが、スクリーンリーダーはパソコンの画面に表示される情報(ファイルのオープンやクローズ、メニュー、アプリケーションが表示するメッセージなど)を読み上げます。代表的なスクリーンリーダーは高知システム開発の「PC-Talker」です。

CSSレイアウトは表示が崩れるおそれがある

CSS+XHTMLにもデメリットはあります。それはユーザーが使っているブラウザの種類によっては、表示が崩れてしまう場合があるということです。ですがこのデメリットは、ホームページ制作会社のCSS理解度が高ければクリアできてしまう問題です。

しかし、CSSの理解度が低いホームページ制作会社に制作を依頼してしまった場合、この問題は解決できません。ブラウザによって表示が崩れてしまうといったことが起きてしまうということです。

サラニにホームページ制作を依頼していただいた場合、そのような心配はいりません。
サラニでは、検証したいホームページのURLを入力し、確認したいブラウザの種類を選択するだけで、複数ブラウザのスクリーンショット画像を作成できるサービス「スクリーンショットJP」と提携しています。

一度、「スクリーンショットJP」で実際にサラニのホームページをチェックしてみてください。サラニのCSS理解度が分かっていただけると思います。

サラニでは「”CSS+XHTML”による、”SEO対策”と”ユーザビリティ”を考慮に入れた」質の高いホームページ制作をいたします。