スタイルシートデザインガイド
スタイルシートでできるデザインを紹介しています。
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
スタイルシートとは
インターネットエクスプローラーなどのブラウザで閲覧しているホームページはＨＴＭＬと呼ばれる言語で記載されています。ＨＴＭＬには、１ページの本文が記載されるのみですが、色や大きさなどのデザイン要素は含みません。
そこでデザインを加えるためにスタイルシート（ＣＳＳ）と呼ばれる仕組みを使います。ＨＴＭＬは１ページの本文のみを記述しますが、スタイルシートは複数のページのデザインを定義できます。たとえば、同じデザインのページを作りたい場合は、デザインの定義は１回で済みます。また、ホームページ全体のデザインを変更したい場合も、スタイルシートファイルを修正するだけで済みます。
スタイルシートのソースはＨＴＭＬの内部に記述することもできますが、複数のページでデザインを共有するために基本的に別のスタイルシートファイルを用意します。複数のページで共有したくない場合や、ちょっと試してみたくて記述するだけ、という場合には、ＨＴＭＬ中に直接スタイルシートのソースを記述してもいいかもしれません。
下のサンプルは見出しを記述した例です。ＨＴＭＬは「<」と「>」で囲まれたタグと呼ばれる記述方法を用いて文章の構造を表現します。 たとえば、「<h1>サンプルページ</h1>」はページのタイトルが「サンプルページ」であることを示しています。このように、スタイルシートでデザインすれば、ＨＴＭＬは非常にシンプルな構造になります。
表示サンプル
サンプルページ
サンプルCSSコード
h1 {
background-color: blue;
color: white;
font-size:large;
}
background-color: blue;
color: white;
font-size:large;
}
サンプルHTMLコード
<h1>サンプルページ</h1>
