HTMLとCSSの使い分け

Ｗｅｂページを作成していくうえで重要になってくるのが、HTMLとCSSの使い分けです。

Ｗｅｂ制作で一般的に用いられいる技術をＷｅｂ標準といいますが、現在のＷｅｂページの制作には、このＷｅｂ標準に基づいたHTMLとCSSの使い分けが必要です。

ＨＴＭＬはＷｅｂページの骨格となる文書や画像、リンクについて、ＣＳＳはＷｅｂページのデザインを担当します。

　　　　　ＨＴＭＬ　骨格

　　　　　ＣＳＳ　デザイン

メリットは？

①デザインの一括変更が容易

作成したＷｅｂページを後から変更することは、なかなか骨の折れる作業です。しかし、デザイン変更を考えたＨＴＭＬを制作しておけば、ＣＳＳのコードを一行替えるだけで、何十何百ページを一括して変更することも可能です。

②構造がシンプルに

ＨＴＭＬとＣＳＳを分けることにより、ＨＴＭＬソースが簡単で見やすいものになり、更新作業などが楽になります。

③デザインと記事の作成を別々に進めることができる

複数人で作成する場合、デザインと記事の作成を別々に作成できることです。

④ＳＥＯ対策に効果あり

構造がシンプルなＨＴＭLは、検索エンジンの巡回ロボットにも、Ｗｅｂページの内容を正しく伝えることができ、その結果としてＳＥＯ対策に効果があります。

⑤いろいろなデバイスで利用できる

現在では、携帯電話やテレビ、ゲーム機などの様々な機器でインターネットを閲覧することができます。

パソコンでの表示だけを前提にしたレイアウトでは、携帯電話など画面サイズでは見にくくなります。そこで、ＨＴＭＬは同じまま、ＣＳＳをそれぞれのデバイス専用に用意をしておけば、最適な状態で閲覧ができるようになります。

⑥軽いページにできる

ブロードバンドが普及した現在では、「軽いページ」はそれほど必要ないように思われますが、Ｗｅｂページの表示速度は、ファイルサイズだけでなく、ファイル構造のシンプルさも大きく影響してきます。

したがって、レイアウトの部分をＣＳＳに負担させることにより、ＨＴＭＬのファイルサイズが小ささや構造のシンプルさで、Ｗｅｂページの表示速度を向上できます。

⑦その他

ⅰ不要な部分を除いて印刷できる

印刷用のＣＳＳが用意されていれば、背景画像やメニュー、広告を取り去った状態で印刷できます。

ⅱ適切な順序で、音声読み上げができる

視覚に障害がある方でも、インターネットの閲覧ができる音声ブラウザでの、音声読み上げを適切な順序で読み上げるようにすることができます。