htmlとcss

もしかしたらあなたは、このプロジェクトが目指しているものがよく分からないかも知れません。HTMLCSSといった言葉を聞いたことがないのなら、それは仕方ありません。このプロジェクトのテンプレートを使用するには、HTMLとCSSの違いを、少しでも知っていただく必要があります。

HTMLとCSSの違いが分からない方は、googleなどで検索することをおすすめします。奥が深いので、簡潔に短くまとめることが困難だからです。しかしとりあえずは、HTMLにはサイトの内容を記述し、CSSにはサイトのデザイン情報を記述する、程度の認識でOKです。デザイン情報とは、例えば文字の色や背景色・背景画像などの、サイトの見た目を決定するものです。

CSSはHTMLファイルに直接記述もできますが、別々のファイルとして保存して、『style.cssという名前のCSSファイルを呼び出して、中に書いてあるデザイン情報を使う』という使い方もできます。あなたのサイトすべてのHTMLファイルに『style.cssというCSSを呼び出す』という設定をしておけば、style.cssの内容を変更するだけですべてのHTMLファイルのデザインが一度に変えられるのです。

CSS(デザイン情報)を変更するだけで、様々なサイトデザインを実現することが出来ます。下のスクリプトを使用するとこのサイトのCSSをチェンジできます。試してみてください。

大幅にレイアウトが変わったと思います。けれど、HTMLの内容は変わっていません。変わったのはCSS(デザイン情報)だけです。このプロジェクトで配布しているテンプレートは、CSS情報をチェンジするだけで、まるで着せ替え人形のようにデザインを変更することが出来ます。


CSSテンプレートの概要

画像素材サイトが写真やアイコンを配布しているように、サイトデザインのサンプル(テンプレート)を配布しているサイトがあります。テンプレートを利用することで、まだサイト作成になれていない初心者でも手軽にサイトデザインを変えることができます。

しかし、テンプレートを使用したことがある方は勿論、サイトのデザインを作ったことのある方は思い当たるふしがあるのではないかと思いますが、サイトのデザインを変えようとするたびに、すべてのHTMLファイルに手を加えたり、新たに一から作成しませんでしたか。あなたのサイトが10ページ程度の小さなものならまだよいですが、100ページ近くあるのなら、それは大変な労力が必要になります。

けれど、『htmlとcss』の項で触れたように、あらかじめ用意をしておけば、1つのCSSファイルを変えるだけで100ページのデザインを変更することは可能なのです。しかし現状では、サイト(テンプレート)の作成方法やデザインに対するポリシー、タグの使い方は人によって異なるため、このキイポイントである「あらかじめの用意」は統一されていません。結局、数々のサイトで配布されているテンプレートデザインをあれこれ使う場合は、新しいテンプレートに変えるたびにHTMLを書き直さないとなりません。

私たちは考えました。HTMLには手を加えず、CSSだけを書き換えることで、色んなサイトのテンプレートデザインを使用できないだろうか、と。それは簡単なことです。問題の「人によってまちまちな部分」を、あらかじめどう書くか決めておけばいいのです。これでCSSを書きかえるだけで、サイトデザインをチェンジできるようになります!

とても便利なプロジェクトなのですが、そのかわりあなたは、このプロジェクトを可能にした「定められた型」を理解し、それ従ってHTMLを記述しなければなりません。そうやってHTMLを記述することに、はじめは戸惑うかもしれません。しかしその型があるからこそ、多彩なサイトデザインを利用することができます。まず、HTMLを学んでください。


CSSテンプレートを使う利点

更新の時間・手間の削減

上で書いたとおり、背景色や文字色を楽に変更できるため、更新作業が効率よく進みます。

ユーザビリティの向上

ユーザビリティとは、サイトの見やすさや使いやすさのことです。CSSでデザインをするため、サイト内の全ページに統一感を持たせることができ、とても安心感のあるサイトになります。

SEO対策への好効果

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

多くのデザインを使用できる。

可愛らしいデザインや、クールなデザインを無料で手に入れることが出来ます。デザインはひとりの人間が作成したものではなく、多くのテンプレート配布サイトの管理人が作成しています。そのためデザインの種類は多種多様、あなたの好みのものがきっと見つかるでしょう。


CSSテンプレートを使うための条件

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

利用規約の遵守

写真やイラストなどの『素材配布サイト』に行ったことがある方は分かると思いますが、それぞれの素材には利用規約があります。再配布してはいけないとか、加工してはいけないとか・・・・。この素材で配布しているHTMLテンプレート、そして各テンプレート配布サイトで配布しているCSSファイルにも、それぞれ利用規約があります。それを守れない方は、使用する権利がありません。

正しい文法を使用する。

HTMLにもCSSにも、独自のルール・書き方があります。CSS(デザイン)は配布サイトからダウンロードできますが、HTML(文章・サイト内容)はあなたが書かなくてはなりません。HTMLのルールをまもり、できるかぎり正しい文法で書く必要があります。そうでないと、デザインが崩れる可能性も高まりますし、そのときはよくてもデザイン変更時に困難を要するかもしれません。

HTML・CSSの勉強

正しい文法でHTMLを書くためには、当たり前のことですがHTMLの勉強をしなくてはなりません。しかし何も、何時間も机の前でノートと参考書を広げろ、と言っているわけではありませんし、まったく知識がない方は、まず勉強をしてからテンプレートを使えと言っているわけでもありません。ゆっくりでかまいませんので、まず初心者向けのweb作成講座などを見て、サイトをどう作るのか、そして多くのルールのひとつひとつを学んでいく必要があります。トラブルにぶつかった場合、解決しようとする努力も必要です。またデザインはCSSファイルで配布されていますが、あなた独自のカスタマイズ(例えば文字色を白から灰色にしたいなど)を加えるには、CSSの知識も必要になります。


実際に使ってみよう!

説明を読んでも、実際に使ってみなければ分からないことは多いでしょう。興味をもたれたのなら、基礎html配布で、利用規約を読み、HTMLファイルをダウンロードしてみてください。