| TOP | 基本 Webページ作成 | 基本 背景 | 基本 テキスト | 基本 テキスト装飾 |
| 基本 イメージ挿入 | 基本 イメージと文字列 | 基本 ハイパーリンク | 基本 テーブル | スタイルシートとは |
簡単!ホームページ作成


スタイルシートについて

スタイルシートについて説明します。

1.スタイルシートとは

Webページを作る言語である「HTML」は本来、文章の論理構造を記述するための言語であり、HTMLで表現できるWebページの見た目というのは、文章の構造を見せるだけの最低限の表現です。つまり、レイアウトデザインにおいては、HTMLの役割ではありませんでした。しかし、レイアウトされデザイン化されたWebページが増加してくると、デザイン的な要素を記述するタグが求められるようになってきました。そこで、レイアウト、デザイン等の詳細な表現を定義する場合は「スタイルシート」を使用することを標準仕様として発表しました。
スタイルシートの正式名称は「Cascading Style Sheet」といいます。

・h1タグ

コンテンツの見出しを記述する<h1>タグを使った場合、「1」という大きさで見出しの文字をブラウザ上に表現しますが、この文字の大きsがどのような利用環境でも共通かというとそうではありません。論理的に見出しを表す文字で1番大きいサイズとして表現できればタグの役割はいいわけです。利用環境に関係なく厳密に「1」という大きさが具体的に定義されているわけではないのです。その結果、文字の大きさはブラウザやOS環境に依存して変化してしまいます。利用する側のPC環境によってデザインやレイアウトが大きく変化してしまいます。このような曖昧な表現は作り手にとって大きな問題です。このような場合にスタイルシートを導入することによって、ある程度統一を図って表示することができるようになります。
以下がスタイルシートを導入した例です。

h1タグです

この例では、背景にイメージ画像を利用し、左側に余白を設定しています。こういった細かいデザインの設定がスタイルシートでは可能になります。




【情報リンク 特16】 6/4