概要

サイトを作ったことのある方、配布されているWebテンプレートを使用したことはありますか。

新しい、素敵なWebテンプレートを見つけて、それを自分のサイトに導入するのは、楽しいですよね。

けれど、新しいテンプレートを使おうとするときは、今までに作成したものを破棄して全てのページを一から作成しているのではないでしょうか。

でも、一から作り直すとなると、ページを作りそびれたり、誤字脱字をしたり、新しいファイルをアップロードしそびれてしまったり、リンクが繋がらなくなったり、といったミスが新たに発生する可能性も少なくありません。

古いデザインのページと新しいデザインのページが混在していたり、内容に更新がないのにファイルの更新日が変わってしまったり、ブラウザのブックマークに入れていたアドレスが変わってサイトやページを見失ってしまったり、リンク先が繋がらなかったりして、閲覧者を混乱させてしまうかもしれません。

それに、改装作業に時間を取られ、サイトのメインコンテンツの作成や更新がおろそかになってしまったのでは本末転倒です。

でも！たまには新しいテンプレートを使って気分転換したい！

企画の趣旨

たった一つのファイルを上書きするだけで改装作業が行えるとしたら、どうでしょう。

しかも、ひとりの作成者ではなく、異なる多数の作成者が作った、様々なテンプレートから選べたら？

それを可能にするために、CSS着せ替えテンプレート企画を立ち上げました。

HTMLとCSS

HTMLやCSSといった言葉を聞いたことがあるでしょうか。どちらも、Webサイトを作成するために使われるものです。

HTML

HTML は HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略で、 Webページを作成するために使用されるマークアップ言語です。

マークアップ言語とは、Webページ内のテキスト情報の構成（見出し、段落、項目リスト、引用文など）や 役割（サイトメニュー、検索用フォームなど）を、コンピュータが構造的に理解できるようにするための言語のことです。

拡張子が.html、もしくは.htmのファイルが、HTMLのルールに沿って記述されたファイルです。

CSS

CSSは、HTMLでマークアップした構造をどう表示（プレゼンテーション）するか、デザインを定義する仕様です。例えば、見出しは文字サイズを大きくする、リスト項目にはリストマークをつける、強調したい部分に色を付ける、セクションとセクションの間に区切線を引く、などです。

拡張子が.cssのファイルが、CSSのルールに沿って記述されたファイルです。

HTMLは構造、CSSはデザインをそれぞれに担います。

構造 と デザイン が それぞれに分かれていることによって、CSSを差し替えるだけで、デザインは自在に変更することができます。

サイト内の全てのHTMLファイルに、『style.cssという名前のCSSファイルを読み込んで、そのファイル内で定義したデザイン情報を使う』という記述を一行書いておけば、style.cssを編集して上書き保存すれば、HTMLファイルのデザインが一度に変えることができます。

CSS Designplateについて

配布されているテンプレートも、ダウンロードするとHTMLファイルとCSSファイルが存在していることがいまや殆どです。

にもかかわらず、CSSファイルを変えるだけでデザインが変わるはずなのに、大抵の場合は毎回一から作り直さなければいけません。その理由は、以下の二点が主です。

上記が統一された規格として、基礎HTML（CSS Designplate）を作成しました。

それによって、CSSファイルの上書きのみによってサイトレイアウトを含めたデザインの完全な差し替えが可能になりました。

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

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

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

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

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

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

アクセシビリティの向上

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

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

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

SEOへの好効果

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

CSS Designplateを使うための条件

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

利用規約の遵守

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

適切な文法を使用する

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

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

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

基礎HTML実際に使う

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