ホームページの作り方

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

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

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

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

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

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

そこで、登場したのが

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

です。

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

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

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

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

CSSによるスタイル変換例

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

ページの先頭へ

HTMLの役割(コンテンツ構造記述)

ページの見た目を記述するという役目がCSSに移された現在、HTMLの役割は何になったのでしょうか。

現在のHTMLの主な役割は『コンテンツの構造にそって記述する』という部分になってきています。 具体的には、文章の『章・段落』や『テーブル』、『メニュー』、『リンク』などページを構成する各構造要素毎に中身を記述していくということです。

例えば、このページですが、構造的には『ページタイトル・サブタイトル』、『章』、『段落』、『メニュー』といった簡単な構造でできています。

ページの先頭へ

ページの構造(標準HTMLタグによる構造化)

まずは、基本的な「.htmlファイル」の構造を持つサンプルを用いてHTMLによるページの構造化を見ていきます。

以下は、サンプル「.htmlファイル」です。ごらんのように、文章の構造にそって中身を記述することに徹しており、各構造要素に対する見た目(スタイル)の指定は、行っていません

<!--お約束部分始まり -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<!--(重要)文字エンコードの指定。eucの場合:"EUC-JP" -->
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>マイ・ホームページ</TITLE>
<!--(重要)cssスタイルシートの指定-->
<LINK href="../my.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<!--中身の始まり-->
<H1>第1章 ほげほげ</H1>
 <H2>第1.1章 ほげほげ</H2>
  <H3>第1.1.1章 ほげほげ</H3>
   <P>なかみ・なかみ・なかみ</P>
   <A href="http://hoge.hoge/index.html">リンクです</A>
   <TABLE>
     <THEAD><!--表タイトル行の始まり-->
       <!--行数分だけTR-->
       <TR>
         <!--タイトルの列数分だけTH-->
         <TH>品名</TH>
         <TH>価格</TH>
       </TR>
     </THEAD><!--表タイトル行の終わり-->
     <TBODY><!--表中身行の始まり-->
       <!--行数分だけTR-->
       <TR>
         <!--中身の列数分だけTD-->
         <TD>あいうえお</TD>
         <TD>百億万円</TD>
       </TR>
       <TR>
         <!--中身の列数分だけTD-->
         <TD>かきくけこ</TD>
         <TD>三十置く円</TD>
       </TR>
     </TBODY><!--表中身の行終わり-->
   </TABLE>
<!--再びお約束部分 -->
</BODY>
</HEAD>
</HTML>

さて、上記サンプルで出てきた、HTMLにおける構造をあらわす『標準タグ』の主要なものを書き出してみましょう。

タグ名 用途
H1, H2, H3 見出し用のタグ。章立て構造をあらわすのに便利。
P 段落を示す。 章の中身を書くときに<p> .... </p>ではさむようにする。
A リンク関連。
通常 <a href="http://xxx.xxx.xxx/">リンクだよ</a>といった使い方をする。
TABLE
TR
TD
この表のようにテーブルを作成するときに使用する。
<table>〜</table>の間に<tr>〜</tr>を表の行数分入れる。
<tr>〜</tr>の間に<td>中身</td>を列数分入れる。

これだけのタグでも通常のページなら簡単に書けると思います。

このサンプルページをcssなしで表示するとこのようになります。

ページの先頭へ

CSSスタイル(HTML標準タグにスタイルを付ける)

ページの先頭へ

拡張スタイル(クラス、IDを用いたタグの拡張)

ページの先頭へ

スタイル例

ページの先頭へ