自分で作る！
HTML/CSSデザインのコツ☆

CSS（Cascading Style Sheets）とはどういうものか、ざっくりご説明しますと、
WEBページのデザインに関する内容を指定するプログラム言語です。

WEBページはHTML（HyperText Markup Language）という言語で作成します。
HTMLの中にもデザインに関する記述をすることはできますが、
本来の役割としてはWEBページの構造を記述するものなので、HTMLに直接デザインに関する指定を記述するのは 好ましくないとされています。

CSSレイアウトとよく比較されるテーブルレイアウトと呼ばれるデザインの方法があります。 こちらはHTMLのtableタグの機能を利用してWEBページをデザインします。
ひとつのファイルでデザインが完結するので作成する際はとても分かりやすいですが、
tableタグは表を作成する役割をもつタグなので、本来の使い方に反してしまいます。
また、同じデザインのページを作る場合も各ページごとに作成しますので、デザイン修正の際にとても手間がかかってしまいます。

つまり、WEBページの内容はHTMLに記述し、デザインをCSSで指定する というのがCSSレイアウトの手法で、現在の理想的なWEBページの作成方法といえます。

CSSレイアウトでWEBページを作成すると、下記のようなメリットがあります。

1. WEBサイトの模様替えが楽になる

CSSレイアウトはデザインの指定がCSSファイルで一括されていますので、 デザインを変更したいときはこのCSSを編集するだけで済みます。

WEBページの内容が書かれたHTMLを編集する必要がないので、うっかり内容を消してしまった、 といったミスを防げます。

2. デザインの幅が広がる

これは個人的な見解かもしれませんが、私自身CSSレイアウトを勉強してからWEBページのデザインの可能性がぐっと広がりました。
特に、指定したタグのデザインが一括で変えられる、という点からデザインの統一性につながり、 修正が別のファイルで容易にできるという手軽さからWEBサイト全体のバランスを見ながらサイトを作成できる ようになりました。

また、なにより印象的なグローバルメニューの作成ができたことに感動しました。

3. WEBアクセシビリティが向上する

WEBアクセシビリティとは、WEBページに対して年齢的・身体的条件に関わらず、 提供されている情報にアクセスし利用できることを目指すものです。

特に重要な情報源となるWEBサイトでは、高齢者や障害者にとっても使いやすいように作成する必要があります。
タグを正しく使い、余計な記述をなくしたHTMLを作成することがWEBアクセシビリティの向上に繋がります。

【 WEBアクセシビリティの詳しい内容→　みんなのウェブ 】

4. 表示が速くなる

CSSレイアウトでWEBページを作成すると、HTMLにデザインに関する記述をしない分HTMLファイルが軽くなります。

多少の差にはなりますが、あまり速くない回線を使用している人が見る場合などはWEBページを表示する際のストレス軽減に繋がります。

5. SEO対策になる

SEO（検索エンジン最適化）対策とは、WEBサイトをより多くの人に見てもらうために、検索サイトで上位に表示させる対策です。

CSSレイアウトではHTMLにデザインに関する記述をしない分WEBページの内容が強調され、 該当するワードが検索されやすくなります。
また、検索ロボットはWEBページをHTMLの上部からチェックしますので、強調したい内容はHTMLの上部に記述したほうが有効です。 CSSレイアウトを活用すると、こういった記述の順序が自由にできます。

どちらもSEO対策では基本的なものに過ぎませんが、小さな積み重ねが大切です。

CSSで注意するべき点として、ブラウザによる表示の違いがあります。

ブラウザとは、WEBページを見るためのソフトウェアです。
よく使われているものでは、Internet Explorer(IE)・Firefox・GoogleChrome等がありますが、 その他にも多数のWEBブラウザが存在します。

このブラウザが、HTMLやCSSを読み取ってWEBページを表示させる為、
同じWEBページでもブラウザごとにCSSの解釈が違ったり、対応していなかったりといったケースで、 WEBページのデザインが変わってしまう場合があります。
更に、同じブラウザでもバージョンによって表示の仕方が違いますので、 特に古いブラウザで見ることを前提とする場合には注意が必要です。

どのCSS要素がどのブラウザに対応しているかは、各リファレンスサイトさんなどで紹介されていますので、 あまり使われないようなCSS要素を使用する際は必ず対応ブラウザを確認しましょう。

また、CSSレイアウトでWEBページを作成したら、最低限IEとFirefoxでの確認をお勧めします。