はじめてのCSS

はじめてのCSS

CSSの役割は"装飾"

CSSとは、HTMLなどのWEBページを制作する上で文字のスタイルやフォント、文字の大きさを表現する定義をまとめたものと言えます。

なぜ,このCSSがWebサイト上で一般的に使用されているのかと言いますと、 HTMLでは要素と呼ばれるタグで囲んだ記述を行います。タグには見出しや段落など文書を作成する上で訪れた人が一目で見やすいページを作成しやすくしています。

しかし、このタグは大きなWebサイトほど大量にあり、同じタグで同じ文字のスタイルが使用されているのが一般的です。

この場合、タグごとに同じスタイルの記述をし続けるのは見栄えにも良くありません。

こうした場合に活躍するのが、CSSです。

CSSはHTMLで指定された構造をどのように表現するかをまとめたファイルで、タグや属性、id、クラスなど指定したセレクタごとにスタイルを定義することができます。

つまり、Webサイトをデザインする上で必要なスタイルはCSSに記述しておき、HTMLからタグ内で指定するだけで良くなります。

同じ記述を何度もするのではなく、同じスタイルを定義したセレクタをHTML側で指定するだけの簡単かつ拡張性のよいWebサイトが構築できるようになります。

CSSでデザイン性を高める

CSSはWebサイトのデザインするためには欠かせないものとなっていて、ある要素を使用する場合は、特定のアイコンを使用してアンカーにすることができます。

例えばページの左右に小見出しをつける、サイトのマップをタイトルごとにリンクする場合に文字の最初に特定の三角のアイコンを使用するなどといった場合にはCSS側で小見出しのタグを指定したら画像を表示させるといった使用方法が可能です。

こうすることで同じタグであれば同一のアイコンを使用することができ、デザイン性が向上します。画像を変更したい場合はCSS側でアイコンのリンク先を変更するだけで完了します。

ミスを防ぐためにもCSSを利用

もしCSSを使用しないで、タグ内に1つ1つ指定していた場合は、すべてのタグのリンク先を変更しなくてはならず、手間だけでなく変更漏れが発生し、せっかく制作したWebサイトの中身が充実していてもデザインが崩れてしまいます。

このように、HTMLでは構造を記述し、CSSではその構造をどのように表現させるのかを記述するためのものと分けることで、Webサイトの変更を柔軟に行い、かつ少ない工数で更新することができるようになります。特に変更の多いデザイン性の富んだサイトでは不可欠だと言えます。

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK