ホームページの作り方

CSSを使ったスタイリッシュなページ作り(HTML/CSS入門)

CSS(Cascading Style Sheet)が登場してから、HTMLのタグを使ったレイアウト指定は過去のものとなり、スタイルシートを用いてサイト全体のイメージを統一することが一般的になりました。

ここでは、スタイルシートの考え方に沿って、簡単にスタイリッシュなホームページを作成する方法を紹介します。

次へ(HTMLによる構造記述)>>

CSS(スタイルシート)とは

一昔前には、「ホームページを作成する=HTMLでページを記述」するということを意味しており、ページ作成者は、ページ内のHTMLタグ内に、「フォントの大きさ」や「文字の色」といったページの見た目に関する記述を埋め込んできました。

しかし、この方式では、サイト内の各ページの見た目を統一するために、大変な労力がかかってしまいます。 また、見た目を変更したくなったときには、タグをひとつひとつ変更していくといった作業が必要になってしまいます。

そこで、登場したのが

CSS(Cascading Style Sheet:カスケーディング・スタイルシート)

です。

ページ作成者は、文書そのものを記述した「.htmlファイル」のほかに、文書の見た目(スタイル)を記述した「.cssファイル」を用意します。

「.cssファイル」には、「.htmlファイル」の各タグに関する見た目が記述されています。 このため、「.htmlファイル」内の、見た目に関する記述(「フォントの大きさ」や「文字の色」など)を減らすことができ、ページをシンプルに書き表すことができます。

また、見た目に関する記述が外だしされるので、サイトの見た目を変更したい場合などにも、「.cssファイル」を変更するだけで一括してサイト・イメージを変えることができるようになります。

実際、このページを用いてCSSによりスタイル変換してみました。

CSSによるスタイル変換例

また、余談ですがCSSにより「.htmlファイル」が簡素化されるため、『SEO:検索エンジン最適化』の効果もあるということです。

ページの先頭へ    次へ(HTMLによる構造記述)>>