CSSが登場する前はどのようにWebページの見た目を設定していたか
現在では、Web ページを作成するとき、文書の構造は HTML を使用し、見た目やレイアウトは CSS を使用するようになっています。CSS が登場する前は、見た目やレイアウトも HTML の要素を使って定義していました。この記事では、CSS が登場する前にどのように見た目を設定していたのかを実際に試してみます。また、CSS を使うことでどのようなメリットがあるのかについても、簡単に解説していきます。
(Last modified: )
CSSが登場する前の方法について
現在は HTML で文章の構造を定義し、見た目やレイアウトなどは CSS で定義しますが、 CSS が登場するまではすべてを HTML の要素を使って定義していました。
例えば次のような HTML 文書を作成していました。
sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>HTMLを使って見た目を定義</title>
</head>
<body>
<center><h1>HTMLを使って見た目を定義</h1></center>
<p>
以前の <font size="+2" color="#ff0000">CSS</font> が
まだ使われていなかった頃は、文書の見た目についても
<font size="+2" color="#ff0000">HTML</font> 要素を使って
記述していました。
</p>
</body>
</html>
この HTML 文書の中の font 要素はフォントのサイズ、色、種類を指定するのに使用します。今回は p 要素の中の一部のフォントサイズと色を指定するの使用しています。また center 要素は、要素内のコンテンツを中央揃えして表示します。今回は h1 要素が中に含まれるので、 h1 要素を画面中央に表示するのに使用しています。どちらの要素も現在は非推奨となっています。
実際にブラウザ表示してみると次のように表示されます。
このように以前はレイアウトに関することや、見た目に関することもすべて要素を使っていました。
HTMLの要素で見た目を記述する場合の問題点
HTML の要素を使って見た目やレイアウトに関する記述もすべて行う場合、例えば次のような問題点があります。
1 つめは、HTML 文書が冗長で読みにくくなることです。先ほどの例では、まだ見た目に関する要素の記述が少ないですが、非常に長いテキストを含む HTML 文書の場合、 HTML 文書の至る所に font 要素などが記述されることになります。その結果、 HTML 文書が長くなり、読みにくくなります。
2 つめは、メンテナンスが大変であることです。数多くの Web ページからなる Web サイトを作成した場合、それぞれの HTML 文書ごとにスタイルが直接記述されています（例えば、テキストの一部を強調するには、font 要素を使って、テキストの色を青にし、フォントサイズを +2 に設定するといった記述です）。もし後から色を変更したり、フォントサイズを変えたい場合、すべての HTML 文書を修正する必要があり、一つ一つ手作業で変更することで、作業ミスが発生する確率も上がってしまいます。
CSSを使用するとどのように変わるのか
現在は見た目やレイアウトについては CSS を使って記述することになっています。先ほどのサンプルは CSS を使うことで次のように記述することができます。
mystyle.css
@charset "UTF-8";
h1 {
text-align: center;
}
span.sp {
font-size: 1.5em;
color: #FF0000;
}
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLを使って見た目を定義</title>
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<h1>HTMLを使って見た目を定義</h1>
<p>
以前の <span class="sp">CSS</span> がまだ使われていなかった
頃は、文書の見た目についても <span class="sp">HTML</span> 要
素を使って記述していました。
</p>
</body>
</html>
見た目やレイアウトに関する部分は HTML 文書から削除し、 CSS のファイルに記述して、そのファイルを HTML 文書内で読み込んでいます。 HTML 文書内で font 要素を使って色やフォントサイズを直接定義していた部分は、代わりに強調したい部分を表す span 要素を使って記述し、どのように強調するかは CSS で定義しています。
実際にブラウザ表示してみると次のように表示されます。表示のされ方は以前の方式と同じです。
CSS を使用することで、 HTML 文書の記述もシンプルとなり、また複数の HTML 文書から同じ CSS のファイルを読み込むことで、修正があった場合も CSS のファイルを修正するだけで反映されるようになります。
例えば強調したい部分の文字のサイズをもう少し大きく、色も青色に変更したい場合は、 CSS の次の個所を変更するだけです。
@charset "UTF-8";
h1 {
text-align: center;
}
span.sp {
font-size: 2em;
color: #0000FF;
}
色やフォントのサイズを変更することができました。複数の HTML 文書があった場合も、同じ CSS ファイルを詠みこんでいる場合はこれで修正が完了します。
このように Web ページの見た目やレイアウトの部分を CSS に分けることで、 HTML の要素だけですべてを記述していたときの問題の多くは解決することができます。
-- --
CSS が登場する前にどのように見た目を設定していたのか、そして CSS を使うことでどのようなメリットがあるのかについて解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。