ホームページ作成に欠かせないスタイルシートについて学んでいきましょう。

見栄えの定義、スタイルシート

今日のホームページ作成のレイアウトに、欠かせないと言っていいほど良く利用されるのがスタイルシートです。皆さん、HTMLはご存知でしょうか?HTMLとは、「HyperText Markup Language」の頭文字をとって、HTMLと呼びます。HTMLを直訳すると、「文字や画像に印を付ける言語」という意味になります。「印」と言うのは、文章構造的意味を持つ印を表しています。さらに、文章構造的意味を持つ印をご説明しますと、ここからここまでが段落、とか、ここは見出しといったような意味です。そのため、本来HTMLとはWebページの「見た目」の設定をするための言語ではありません。そこで、Webページ上の「見栄え」を定義するための技術として生まれたのが、「スタイルシート」という言語なのです。まるでゲームをやるためのゲームPCのような存在と言うわけです。
CSSとは数種類あるスタイルシートのうちの1つで、HTMLの補助的な役割を果たす言語といえます。HTMLが文書構造を表す言語であることに対し、CSSはレイアウトデザイン、いわゆる見栄えの指定を行うための言語なのです。以前はスタイルシートに対応するブラウザがほとんどなかったので、HTMLだけで、文書構造とレイアウトデザインの両方を行ってきました。しかし、最近はスタイルシートに対応するブラウザも多くなってきたので、HTMLによるレイアウトデザインから、スタイルシートによるレイアウトデザインに移行してきてるのです。スタイルシートは、「Cascading Style Sheet (カスケーディング・スタイルシート)」と言って、単純にスタイルシートと呼ぶ場合と、頭文字をとってCSSと呼ぶこともあります。HTMLの標準化を進めるW3Cが1996年12月にCSS1(Cascading Style Sheets, Level 1)を勧告し、「Internet Explorer 3.0」 と 「Netscape Communicator 4.0」 がこれの一部機能をサポートしました。また、両者はこのスタイルシートとJavaScriptなどを組み合わせ、ダイナミックHTMLという技術にまとめ、公開しています。スタイルシートには、CSS の他にも「XSL(Extensible Stylesheet Language)」などいくつかの種類が存在します。

スタイルシートのメリット

今までは、HTMLだけで文書構造とレイアウトデザインの両方を行っていたとご説明しました。そのため、HTMLを利用してホームページ作成を行ってきた方にとっては、少々利用しにくい部分もあるかとは思います。HTMLによるレイアウトデザインに慣れ親しんだ人は、テーブルレイアウトを利用する人がが多いのではないでしょうか。また、テーブルレイアウトはDreamweaver等のオーサリングツールで簡単に作成ることが可能です。視覚的にレイアウトデザインが可能なため、ホームページ制作初心者にはとても扱いやすい機能です。それに対して、スタイルシートによるレイアウトデザインは、オーサリングツールでは簡単に作成することができません。しかし、現在はスタイルシートでレイアウトデザインするのが主流となっています。では、また新しいスタイルシートという言語を覚えて、ホームページを作るメリットとはなんなのか?スタイルシートのメリットを、下記に記載してみました。

注目サイト

表札なら七宝表札オーダーメイド
http://www.shippou-hyousatsu.com/
携帯買取専門店|ODAモバイル
http://www.oda-mobile.com/

メリット内容

  • テキストはそのままで、レイアウトデザインだけを編集したい時はスタイルシート内の記述を変更するだけで、編集することが可能。スタイルシートは、文書構造とレイアウトを切り離しているため、HTMLを一切いじらずにデザインを変更することが出来るのです。
  • 検索エンジン上位に表示されやすくなる。ホームページ制作会社や、企業が良く行っているSEO対策に有効ということです。
  • ひとつのCSSファイルを変更するだけで、数十ページのレイアウトデザインを同時に変更することが出来る。
  • HTMLソースがシンプルになるので、構造が分かり易くなり、メンテナンスが容易にできる。
  • CSSファイルがキャッシュされるので、一度読み込むだけで利用することができる。つまり、ファイルサイズを軽くすることが可能。

上記のように、HTMLでは今まで記述が複雑になったり、しかもWebデザイン上のレイアウトも思い通りに行うことができなかった点を、文書構造とレイアウトデザインを切り離すことで、ここまでのメリットが得られるようになったのです。HTMLを一通り使いこなすことが出来たなら、次は新しいステップ、「スタイルシート」を利用してみては、いかがでしょうか?

Copyright (C) STYLE SHEET.All Rights Reserved.