XHTML+CSSで作成するWEB標準デザイン|ホームページ制作(和歌山)

XHTML+CSSで作成するweb標準デザインとは?

ホームページ制作カテゴリー

ホームページ制作のDAS Style

現在、大手企業、公的機関、大手検索エンジン等、ホームページのデザインが少し変わってきているとお感じになられた方も多いと思います。というのも、これらのサイトもXHTML+CSSのweb標準といわれるホームページに移行しつつあり、また今後その傾向はもっと強くなっていくのは間違いありません。

こういった傾向にそって私どもはW3C(web標準標準化団体)に準拠したXHTML(HTML)とスタイルシート(CSS)でホームページ制作を行います。この制作方法が私どものポリシーである「結果を生み出せる、誰にでも優しいホームページ」につながるものと考えています。

XHTML、CSSとは? XHTML、CSSとは?

XHTML+CSSで作成するホームページのメリット

XHTMLでホームページの「文書」を正しく「構造化」し(見出し、段落等の本来の「文章」の使用目的に応じて構造化)、その反面でCSS(スタイルシート)でデザインの部分(レイアウトや色合い・サイズなど)を制御することにより、コンテンツ(文書構造)部分とデザイン部分を分離することができます。

これが結果的に、ホームページ閲覧者に限らずホームページ制作者や運営者にとっても様々なメリットをもたらします。ここでは簡単にそのメリットを述べていきたいと思います。

適切なXHTML文書構造

以前のテーブルデザインとは異なり、ホームページソースを正しく文書構造化することができます。これはまたサイト制作者の技量が問われる部分でもあり、ただXHTMLで書けばよいというものでもありません。

私どもはW3Cの基準のもとに正しくホームページソースを文書構造化し、W3Cからも正当に文書構造化されているホームページとして認められております。
(以下のバナーはW3Cにて認められたその証です)

  • Valid XHTML 1.0 Strict
  • Valid CSS!

難しい言葉が出てまいりましたが、正しいXHTML文法で文書構造化されているということがわかりやすくわかるサイトとして、こちらのサイトで現在のこのページのURLを入力するだけで文法の記述の採点結果がご覧になれます。 私どものサイトでも、この採点結果では軽微な減点対象外のエラーが3箇所出ておりますが、これは当サイトの文字サイズ変更機能を実現しているが故の減点ですので、この結果の減点説明に記載されているように、減点をなくすよりもサイトをご覧になっている方に恩恵をもたらすほうが当然より大きいと判断して、このエラーはそのままにしております。

このようにあまり採点ばかりにとらわれるよりも、まずユーザビリティやアクセシビリティなどの利便性をまず最優先にするべきだと思っております。ただ、これも正当な一つのXHTML文法基準ですのであまりにも採点結果が低い結果では文法的におかしいということになり、YahooやGoogleなどの検索エンジンに対してもあまりよい影響は与えませんので、正しいXHTML文法で文書構造化することの大切さはうかがい知れるとは思います。
(リンク元:Another HTML-lint gateway サイトの採点がURLを張り付けるだけで簡単にできます)

ホームページ容量が軽く表示が速い

ホームページを制作する上で、以前からあるHTMLというホームページ言語は文書の部分だけでなくデザインの表示指定の部分も、その言語で担っていました。それではどうしてもHTMLの言語が長くなりホームページの容量も大きくなってしまいます。

ところがXHTMLはデザインの表示指定の部分をCSSに任せることにより、その言語において表示指定の部分を削減でき、その分ホームページの容量が軽くなります。ということは表示速度も速くなり、結果的に閲覧者にストレスを与えないユーザビリティにも貢献することとなります。

アクセシビリティユーザビリティの向上

このメリットについては別ページにて詳しく述べていますので、ここでの説明は省略させていただきますが、使いやすさ、わかりやすさ、これらが向上することのメリットはかなり大きく、誰にでも優しいホームページにつながるものと思います。

アクセシビリティ・ユーザビリティについてはこちらから

検索エンジンでの表示順位の向上

ホームページ制作において、XHTMLによるマークアップ(構造化)はユーザーのアクセシビリティに対応するだけでなく、Yahoo、Googleに代表されるような検索エンジンのロボットに対しても適切に情報を伝えることができるため、検索サイト側も速やかな情報収集が行えます。このことは結果的にSEO対策にも効果的なこととなり、検索させたい語句での表示順位の向上が見込まれます。

自由に表示を調整・変更でき、適切な印刷も可能

ホームページの表示指定の部分をCSSが担っているため、文書構造を変えずに簡単に見栄えを調整あるいは変更ができます。また追加修正なども容易に行えます。

ホームページ制作のDAS Style

また以前のインターネットエクスプローラー等で、『見ているホームページを印刷しようとした時右端の文字が途中で寸断されて文書として読むことができない』、と言う風な経験を持たれている方も多いのではないでしょうか?これもCSSで印刷用にスタイルを調整することにより、適切な文書としての印刷も可能となります。

このページも、印刷プレビューを押していただければわかりますが、この右側のカテゴリーメニューの部分は印刷には必ずしも必要ではない部分ですから印刷の部分から外し(フッター部分のメニューを印刷することで代用)、確実にこの本文部分を途切れなく印刷できるような設定をCSSで施しております。お試しくださいませ。

XHTML
XHTMLとは簡単に一言で申し上げますと、ホームページを記述する言語です。以前はHTMLという言語で主にホームページは作られており、今もまだそのHTML言語で制作されているホームページもまだまだ多いのが現状です。それを発展させたのがこのXHTMLというマークアップ言語で、W3Cというホームページの標準化団体が仕様策定を行っています。
CSS
CSSとはそのXHTMLなどの要素をどのように表示(見た目)するかを指示する仕様、こう思っていただけたらいいと思います。Cascading Style Sheetsの頭文字をとっています。

ページトップに戻る

以下の機能はスタイルシートが無効なため使用できません

お電話でのお問い合わせ 073-460-2446

WEBからの無料相談・お問い合せ窓口はこちらから