オリジナルテンプレートへの道のり

■ 準備体操
Web上級者の方から初心者の方まで、幅広い層の方々にご利用頂いているかと存じます。DTIブログから提供されているテンプレートだけでは物足りない、自分でちょっと変えてみたい、という声に応えるべくCSS・デザイン講座を公開決定!講師は人気ブログ「動画の桜」の運営者エロ流さんです。

【エロ流さんのお言葉】
HTMLの基本を理解している方向けの、ブログのデザインを構成しているCSSの基本やデザインテクニックをレクチャーします。HTMLの基本が分からないという初心者の方がおられましたら、専門のサイトや書籍などをご覧ください。

CSSの基本を学ぼう

■ CSSって何?
CSSとは、カスケーディング・スタイルシート(Cascading Style Sheet)の略で、文字の装飾、配置、背景色の指定など、あらゆるデザインを細かく指定することができ、それらを一つにまとめて管理することができます。

■ CSSの利点
CSSを利用する利点は、おおまかに以下の四つが挙げられます。

1. 細かいデザインができる(特に文字装飾やレイアウト)
従来のHTMLデザインでは、文字装飾に限界がありました。 例えば、<H1>〜<H6>などの見出しタグは、検索エンジン対策上、非常に効果的なタグですがデザイン的な見栄えが不細工になる為、使用をためらっていた方も多かったはずです。 CSSを利用すれば、その心配はありません。思い通りの装飾を施すことが可能です。 また、レイアウトにおいても、従来では難しかった細かい単位での指定ができ、より自由度の高いデザインが可能となります。

2.デザインの更新や変更が簡単にでき、一括した管理ができる。
今まではデザインを変更するとなると、一つ一つのファイルを開き、時間をかけて作業をしなければなりませんでしたが、CSSを外部ファイルとして利用すれば、そのファイルを更新するだけで全ページに、そのデザインが反映されてしまうのです。ブログを毎日更新する方であれば、あっという間に記事が増えるはずです。そんな時に、一括してデザインを管理できるCSSは非常にありがたい存在になるはずです。

3.ファイルの容量がとても軽く(小さく)なり、HTMLがシンプルで分かりやすくなる。
今までは、デザインを変更するとなると、一つ一つのファイルを開き、時間をかけて作業をしなければなりませんでしたが、CSSを外部ファイルとして利用すれば、そのファイルを更新するだけで全ページに、そのデザインが反映されてしまうのです。ブログを毎日更新する方であれば、あっという間に、記事が増えるはずです。そんな時に、一括してデザインを管理できるCSSは非常にありがたい存在になるはずです。

4.検索エンジン対策に効果的である。
今までは、デザインを変更するとなると、一つ一つのファイルを開き、時間をかけて作業をしなければなりませんでしたが、CSSを外部ファイルとして利用すれば、そのファイルを更新するだけで全ページに、そのデザインが反映されてしまうのです。ブログを毎日更新する方であれば、あっという間に、記事が増えるはずです。そんな時に、一括してデザインを管理できるCSSは非常にありがたい存在になるはずです。

以上のような4つの利点を考えても、CSSによるデザインがいかに便利であるかが分かると思います。

■ CSSの問題点
CSSによるデザインを行う上で問題となるのが、ブラウザのバージョンやOSによる表示の違いが挙げられます。皆さんがよく使われている、InternetExplorer (IE)、Netscape、Operaなどのブラウザは、バージョンによって、表示が大きく変わることがあります。本来は、全てのユーザーが正常に見られるようにデザインする事が望ましいのですが 現実的ではない事と、そこに拘ることは、ブログ運営の本質とはあまり関係が無いので、9割以上のユーザーが使用している以下のブラウザとバージョンに絞ったテクニックを紹介します。

Internet Explorer 5.5〜6.0以上
Opera7.0以上以上
Netscape 6.0以上
Firefox1.0以上
Safari 1.2以上
第一回目によせて

CSSによるデザインは、従来のHTMLのように、直感的にデザインをすると言うよりも、緻密な設計や組立が必要なプログラミング作業に近いものがあります。そのため最初は抵抗感を感じる人も多いようです。私も、今でこそ人並みレベルに扱えるようになりましたが、使い始めの時期は慣れない作業でイライラの連続でした(笑)。しかし、慣れていくに従ってデザインアイデアがどんどん広がり、いつのまにかデザイン作業が楽しくなっていました。まだ、CSSに馴染めない皆さんにも、私と同じように楽しい気持ちでデザイン作業が出来るようになって頂きたい!

次回予告
次回からのレクチャーでは、CSSの記述方法はもちろん、実際にテンプレートを使用してすぐに活用できるデザインテクニックを紹介したいと思います。

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー