|
 もう困らないHP作成 |
 |
| スタイルシート基礎講座 〜スタイルシートって何？〜 （05.03.31） |
|
|
■スタイルシートって何？ みなさんもご存じのとおり、ホームページはHTMLという言語で記述されています。ところが、このHTMLは細かいレイアウトを実現することができません。行間をもう少し広くしたい、余白を自在に設定したい、微妙に文字のサイズを変えたい等々、ワープロ文書なら簡単にできることがホームページ（HTML）ではうまくいかず、やきもきした経験はだれにでもあることでしょう。 そもそもHTMLは文書の構造を記述するための言語であって、文書の見た目（＝ホームページの見栄え）をアレコレ指定することは想定されていません。したがって、HTMLで細かいレイアウトを実現することは最初から無理のある話なのです。そこで考え出されたのが、これから勉強するスタイルシートです。スタイルシートとは、平たく表現すると、「ホームページの見た目を定義するもの」となります。 例えば、次のようなホームページがあったとします。
見出し部分は<h1>や<h2>タグ、本文は<p>タグで文書構造を定義しています。 基本に忠実なHTMLの記述ですが、これでは見栄えがよくありません。 このホームページを、スタイルシートを使うことで見栄えよくしたものがこれです。
ホームページの本文となる<body>〜</body>は何も変更せず、赤字の部分を追加しただけです。この赤字部分がスタイルシートです。詳しい説明は後回しにしますが、この赤字部分で<h1>や<h2>といったHTMLタグのスタイル（見た目）を定義しています。 なお、スタイルシートにはいくつかの種類があるのですが、CSS（Cascading Style Sheet）という仕様が一般的です。本講座でもCSSをスタイルシートとして表記しています。 ■定義できるスタイル スタイルシートでは、さまざまなスタイルを定義することが可能です。 ・フォント フォントファミリー（フォントの種類）、サイズ、太さ、斜体、etc ・色、背景 文字色、背景色、背景画像の指定 ・文字属性 文字間隔、行間隔、単語間隔、垂直位置、水平位置、インデント、etc ・ボックス 余白、マージン、枠線、etc ・幅、位置 表示エリアの横幅、縦幅、回り込み、etc HTMLでは、文字サイズは7段階しかありませんし、文字や行の間隔を指定することはできません。また、余白やマージン、表示エリアの幅を表現するには<table>タグを利用するといった工夫が必要でした。その点、スタイルシートではきめ細かい表現でホームページを見栄えよく調整することができます。 ■スタイルシートの利点 スタイルシートの利点をまとめてみました。 ・細かい調整が可能 先ほども説明したように、スタイルシートはHTMLでは表現できない細かい部分まで調整することが可能です。「もう少し文字サイズを大きくしたい」「行間を広くして読みやすくしたい」「マージンを設定したい」「簡単に枠線を表現したい」といった調整が自在です。
・スタイルを一括して指定できる 例えば、見出しに該当する部分を赤い色で表示したいとき、HTMLでは文書中の見出しひとつひとつに色の設定をする必要があります。一方スタイルシートでは、見出しのスタイルを一度定義しておけば、文書中の見出し部分に一括して適用されます。 また、赤をやめて黄色にしたいとなったときでも、HTMLなら見出し部分の設定を個々に変更しますが、スタイルシートではスタイルを再定義するだけで一括して変更することができます。
・HTMLソースが簡潔 HTMLでは<body>〜</body>の見栄えを変更したい箇所に個別にタグを挿入しますが、スタイルシートでは<head>〜</head>にスタイルを記述します。本文と見栄えの定義が分離しているので、HTMLソースが簡潔で見やすくなります。 いかがでしたか？ スタイルシートとは何か、なんとなく理解できましたか？ 「う〜ん、いまいちピンとこないなぁ〜」という方も大丈夫。次回の講座からは、具体的にスタイルの定義と適用の方法を勉強しますので、お楽しみに。 |
|
| << インデックスへ戻る |
| ※本記事の公開後、ソフトの仕様、サービス内容、参照URL等の変更により、最新の情報と記事内容が異なる場合があります。 |
 |
| ご意見・ご要望 ｜ produce by d-e-x ｜ |