HTMLとCSS

あなたはHTMLやCSSといった言葉を聞いたことがあるでしょうか。この企画ではこの二つを用います。

HTML

HTMLはHyperText Markup Language（ハイパーテキストマークアップ言語）の略です。

ハイパーテキストとは複数の文書を関連付け、参照する、ハイパーリンク（<a href="参照先">）の仕組みを持った文書のことです。マークアップ言語とは、文章の構成要素（見出し、段落、箇条書き、引用など）を（コンピュータに対して）明示する記述言語（文法）のことです。HTMLは、相互間参照ができる文章の構造を指定する言語です。

文章の構成要素をコンピュータに対して明示化することで、環境に依存することなく情報（＝サイトの内容）を共有できます。

HTMLファイルには内容の本文、およびその構造を記述します。

CSS

CSSは、HTMLでマークアップした構造をどう表示（プレゼンテーション）するか（見出しは文字サイズを大きくする、リスト項目にはリストマークをつけるなど）を定義する仕様です。

文書の構造（意味）と体裁（デザイン）を分離させるため提唱されました。そうすることによって、閲覧環境ごとに適した表現で情報を閲覧することができます。

CSSファイルにはサイトのデザイン情報（文字や背景の色など）を記述します。

HTMLとCSSを使う

これまでにテンプレートを使用したことがある方や、サイトを作ったことのある方は、サイトのデザインを変えようとするたびに、すべてのHTMLファイルに手を加えたり、今までのものを破棄して一から作成してはいませんでしたか？

一部だけ変更し忘れたり、書き損じたり、作りそびれたり、アップロードしはぐってしまう、といったミスをしてしまう可能性も少なくありません。ページ数が多ければその可能性も、労力も、倍増します。また、クラス名等が装飾に依存していると、メンテナンスがスムースにいきにくくなるかもしれません。場合によっては、内容に更新がないのにファイルの更新日が変わってしまうと、閲覧者は混乱するかもしれません。

そうしたミスによって、ページごとにアピール法がちぐはぐであったり、ページにアクセスできなかったり、更新日に信用性のないサイトでは、信頼を得られません。それに、改装作業に思いのほか時間を取られ、サイトのメインコンテンツの作成や更新がおろそかになってしまったのではサイト運営の本末転倒です。

また、レイアウトにテーブルを用いたり、レイアウトやデザインのためだけにHTMLを修正を加えなければいけないというのは、「文章の構成を明示する」という元来のHTMLの理念に反しています。テーブルは「表」のために使うのであってレイアウトを作るために使うものではありませんし、掲載内容（文章）に変更がないのならば文章の意味も変わらないはずなのでHTMLを書き換える必要もないはずです。

このサイトでの提案

複数のHTMLファイルを編集したり新たに作成しなくても、たった一つのファイルを上書きするだけで改装作業が行えるとしたら、どうでしょう。

CSSはそれを可能にします。あなたのサイトのすべてのHTMLファイルに、『style.cssという名前のCSSファイルを読み込んで中に記述されたデザイン情報を使う』という記述を一行書いておけば、style.cssの内容を編集するだけで、あなたのサイトのすべてのHTMLファイルのデザインが一度に変えることができます。

これらのことをスムースにするためには、レイアウトのために複雑なテーブルやフレームを使わず、論理的なHTMLを作成する必要があります。

難しいと思いますか？　けれど、煩雑な<font>や<table><tr><td>の乱用より、ずっとスマートで直感的なはずです。見出しを見出し、文章を文章、リストをリスト、…とマークアップするだけなのですから。

あなたもCSSを使ったサイト作成をしてみませんか？

それ以外の様々なメリット

適切なHTMLとCSSには、他にもたくさんのメリットがあります。

更新やメンテナンスの時間・手間の削減
  • 複数の文書（HTML）のデザインを一括で管理できるので、メンテナンスが効率的にできます。
  • HTML内に余分なソースコードを書かなくていいので、更新箇所の検索が容易になります。
ユーザビリティの向上

ユーザビリティとは、サイトの見やすさや使いやすさのことです。

  • CSSで一律にレイアウトすることで、サイト内に統一感と安定性をを持たせることができ、効率よく閲覧してもらえるサイトになります。
  • HTML内に余分なソースコードを書かなければ、その分容量が軽くなり、表示時間が短縮されます。また、スタイルシートを外部ファイルに置くことで、その内容がキャッシュされてより軽く感じられる可能性があります。ストレスなく多くのページを閲覧してもらえます。
  • 見出しによってページのアウトラインを形成しページの目次を整形したり、引用文を後回しにしたり、強調部分だけを抜き出したり、必要としている情報を的確にすばやく取得できるようになります。

より多くのひとにサイトを閲覧してもらえ、またリピーターも増やせるでしょう。

アクセシビリティの向上

アクセシビリティとは、あらゆる閲覧環境でのアクセスのし易さのことです。

  • 適切にマークアップされたHTMLならば、古いバージョンのブラウザでも、今後登場する多くの新しいバージョンのブラウザでも、目の見えない人でも、耳が聞こえない人でも、マウス操作ができなくても、キーボード操作ができなくても、画像が非表示でも、スクリプトが無効でも、CSSが無効でも、テキストブラウザや音声ブラウザやモバイルやゲーム機など様々UAでも、勿論目が見え耳が聞こえマウスもキーボードも使え画像もスクリプトもCSSもオンの環境でも、アクセスし情報を取得することができます。そしてそれがHTMLの本来の姿です。
  • CSSでのレイアウトやデザインは、ブラウザの設定やユーザースタイルシートなどを用いて各閲覧者が状況に合わせてより閲覧しやすいよう自由に変更したり取り除いたりすることができます。またそうした場合でも、情報は正しくやり取りされます。
  • HTMLやCSSはアクセシビリティの向上に役立つ要素や属性やプロパティを持っています。

より多くの人にサイトを閲覧してもらえます。

SEOへの好効果

余分なソースコードを省き、かつ正しい文法でサイト（ページ）を作成することで、SEOで優位に立てます。つまり、検索に引っかかりやすく、また検索結果のより上位に表示される可能性を高めます。

CDPの概要

最近ではHTML・CSSのテンプレートも沢山配布されています。

けれど配布サイトによって、CSSファイルがstyle.cssだったりlayout.cssだったりcss.cssだったり、メニューが本文の前にある・後にある、著作権リンクがある・ない、など、構成が異なります。結局あなたは新しいテンプレートを使おうとするたびに、HTMLを書きなおさなければなりませんでした。

そこで私たちは、基礎となるHTMLテンプレート（CSS Designplate）を作りました。

多くのテンプレート作成者が、この基礎HTMLに則ってCSSを書きました。あなたは色んなサイトの多彩なテンプレートデザインを、HTMLを変更することなく、CSSを上書きすることのみで使用できます。

CSS Designplateを使うための条件

CSS Designplateを使用すれば、多くのデザインをあなたのものにすることが出来ます。しかしこれには、いくつかの条件をクリアしなければなりません。

利用規約の遵守

それぞれの素材には利用規約があります。再配布してはいけないとか、加工してはいけないとか……。ここで配布しているHTMLテンプレート、そして各テンプレート配布サイトで配布しているCSSファイルにも、それぞれ利用規約があります。

正しい文法を使用する

HTMLにもCSSにも、それぞれ書き方のルールがあります。CSS（デザイン）は配布サイトからダウンロードできますが、HTML（文章・サイト内容）はあなたが書かなくてはなりません。HTML4.01Transparentの記述ルール、CDPの記述ルールに従ってください。そうでないと、折角のメリットを損なうことになります。

HTML・CSSの勉強

正しい文法でHTMLを書くためには、当たり前のことですがHTMLの勉強をしなくてはなりません。しかし、何時間も机の前で参考書を広げ、充分に勉強をしてからテンプレートを使わないといけないわけではありません。使いながら、いくつかの大切なHTMLのルールのひとつひとつを学んでいきましょう。基本はそれほど難しいことではありませんし、必要なのはその基本だけです。

またデザインはCSSファイルで配布されていますが、あなた独自のカスタマイズ（例えば文字色を白から灰色にしたいなど）を加えるには、CSSの知識も必要になります。

基礎HTML実際に使う

説明を読んで興味をもたれたのなら、で、利用規約を読み、HTMLファイルをダウンロードしてみてください。