ユーザーMENU
HTMLとCSS
あなたはHTMLやCSSといった言葉を聞いたことがありますか? この企画ではこの二つを用います。
- HTML
-
HTMLはHyperText Markup Language(ハイパーテキストマークアップ言語)の略です。
ハイパーテキストとは他の文書を参照するハイパーリンク(<a href="参照先">)の仕組みを持った文書のことです。マークアップ言語とは、文章の構成要素(見出し、段落、箇条書き、引用など)を明示する記述言語のことです。HTMLは、ハイパーリンクをおこなうことができる、文章の構造を指定するための言語です。
HTMLファイルにはサイトの内容(本文、およびその構造)を記述します。
- CSS
-
CSSは、HTMLの要素(の内容)をどう装飾するかを指示する仕様です。
CSSファイルにはサイトのデザイン情報(文字や背景の色など)を記述します。
適切なHTMLとCSSを使う
いままで
これまでにテンプレートを使用したことがある方や、サイトを作ったことのある方は、サイトのデザインを変えようとするたびに、すべてのHTMLファイルに手を加えたり、今までのものを破棄して一から作成しませんでしたか。
- サイト内の強調の為の装飾を、赤い色から青い色に変えるため全てのHTMLを開いて
<font color="red">を探し<font color="blue">に書き換える
<table>を使ってレイアウトするために膨大な量の<td>を書く
- レイアウトを
<frameset>や<iframe>を使って表現するため、新たにファイルを作ったり、次レイアウトを変更するときやっぱり消したり
何ページもあったならば、相当の労力がかかります。一部だけ変更し忘れたり、書き損じたりといったミスをしてしまう可能性も少なくないでしょう。
これから
実は、HTMLを書き換えなくても、CSS(デザイン情報)を変更するだけで、様々なサイトデザインを実現することが出来ます。各ページに設置されたフォームを使用するとこのサイトのCSSをチェンジできるので、試してみてください。
また、CSSは、HTMLファイルとは別のファイルとして保存することができます。あなたのサイトのすべてのHTMLファイルに『style.cssという名前のCSSファイルを読み込んで中に記述されたデザイン情報を使う』という設定をしておけば、style.cssの内容を変更するだけですべてのHTMLファイルのデザインが一度に変えられます。
これらのことをするためには、レイアウトのためにテーブルやフレームを使ったり、論理的な意味(強調だとか見出しだとか)を表現するのに<font>などを用いない、適切なHTMLを作成する必要があります。
難しいと思いますか? けれど、強調や見出しのために<font size="+1" color="red">と書いたり、レイアウトのために<table width="300" cellspacing="0" cellpadding="0" border="0"><tr><td></td></tr></table>と書くより、ずっとスマートになるはずです。
様々なメリット
適切なHTMLとCSSには、他にもたくさんのメリットがあります。
- 更新の時間・手間の削減
-
サイトのレイアウトやデザインの変更が楽にできます。また、余分なソースコードがないので、更新箇所の検索も容易なので作業が効率よく進みます。
- ユーザビリティの向上
-
ユーザビリティとは、サイトの見やすさや使いやすさのことです。より多くの
ひとにサイトを閲覧してもらえ、またリピーターも増やせるでしょう。
- CSSでレイアウトすることで、サイト内に統一感を持たせることができ、安心感のあるサイトになります
- 余分なソースコードを省くため、容量が軽くなり表示時間が短縮できます
- アクセシビリティの向上
アクセシビリティとは、あらゆる閲覧環境でのアクセスのし易さのことです。より多くのひとにサイトを閲覧してもらえます。
- 適切なHTMLは、古いバージョンのブラウザでも、今後登場する新しいバージョンのブラウザでもアクセスが可能です。また、テキストブラウザや音声ブラウザ、あるいはモバイルやゲーム機など、様々なUAで情報を取得できます
- CSSでのレイアウトは、ユーザースタイルシートなどを用いて閲覧者が自由に変更したり取り除いたりすることができます
- HTMLやCSSはアクセシビリティの向上に役立つ要素や属性やプロパティを持っています
- SEOへの好効果
-
余分なソースコードを省き、かつ正しい文法でサイト作成することで、SEOで優位に立てます。つまり、検索に引っかかりやすく、また検索結果のより上位に表示される可能性を高めます。
CDPの概要
これまでの配布テンプレートは、前項の例で言うところの『style.cssという名前のCSSファイルを読み込んで中に記述されたデザイン情報を使う』という設定が、必ずしも統一されていませんでした。ゆえにあなたは、新しいテンプレートを使おうとするたびに、HTMLを書きなおしたかもしれません。
私たちは、HTMLには手を加えず、CSSだけを書き換えることで、色んなサイトのテンプレートデザインを使用できないだろうか、と考えました。
それは簡単なことです。問題の統一されていない部分を、あらかじめどう書くか決めておけばいいのです。
私たちは基礎となるHTMLテンプレート(CSS Designplate)を作りました。これで、CSSを書きかえるだけで、サイトデザインをチェンジできるようになります! 私たちは、メリットをもう一つ手に入れることが出来ました。
- 多くのデザインを使用できる
-
可愛らしいデザインや、クールなデザインを無料で手に入れることが出来ます。デザインはひとりの人間が作成したものではなく、多くのテンプレート配布サイトの管理人が作成しています。そのためデザインの種類は多種多様、あなたの好みのものがきっと見つかるでしょう。
あなたは、このプロジェクトを可能にした「定められた型」を理解し、それ従ってHTMLを記述しなければなりません。そうやってHTMLを記述することに、はじめは戸惑うかもしれません。しかしその型があるからこそ、多彩なサイトデザインを利用することができます。
CSS Designplateを使うための条件
CSS Designplateを使用すれば、多くのデザインをあなたのものにすることが出来ます。しかしこれには、いくつかの条件をクリアしなければなりません。
- 利用規約の遵守
-
写真やイラストなどの『素材配布サイト』に行ったことがある方は分かると思いますが、それぞれの素材には利用規約があります。再配布してはいけないとか、加工してはいけないとか……。ここで配布しているHTMLテンプレート、そして各テンプレート配布サイトで配布しているCSSファイルにも、それぞれ利用規約があります。それを守れない方は、使用する権利がありません。
- 正しい文法を使用する
-
HTMLにもCSSにも、それぞれ書き方のルールがあります。CSS(デザイン)は配布サイトからダウンロードできますが、HTML(文章・サイト内容)はあなたが書かなくてはなりません。HTMLのルールをまもり、できるかぎり正しい文法で書く必要があります。そうでないと、折角のメリットを損なうことになります。
- HTML・CSSの勉強
-
正しい文法でHTMLを書くためには、当たり前のことですがHTMLの勉強をしなくてはなりません。しかし、何時間も机の前でノートと参考書を広げ、十分勉強をしてからテンプレートを使わないといけないわけではありません。使いながら、いくつかの大切なHTMLのルールのひとつひとつを学んでいきましょう。トラブルにぶつかった場合、解決しようとする努力も必要です。またデザインはCSSファイルで配布されていますが、あなた独自のカスタマイズ(例えば文字色を白から灰色にしたいなど)を加えるには、CSSの知識も必要になります。
実際に使ってみよう!
説明を読んでも、実際に使ってみなければ分からないことは多いでしょう。興味をもたれたのなら、基礎html配布で、利用規約を読み、HTMLファイルをダウンロードしてみてください。