スタイルシートサンプル
スタイルシートとは、フォントやカラーやマージンなどを指定して、見栄えをよくするための定義です。
基本的には
{プロパティ:オプション;}
という形式で定義します。プロパティにはフォントやカラーなど指定し、オプションにはパラメータ(色や文字の種類など)を指定します。
スタイルシートはとても便利な機能ですが、問題点もいろいろあります。
ブラウザによってスタイルが表示されなかったり、見栄えが違ったりもするので注意が必要です。そのままだと、スタイルシートに対応していないブラウザですとスタイルの記述がそのまま表示されてしまいます。これを回避するには、設定部分をコメントにしておく という方法があります。
このページのタイトルには、HGS創英角ポップ体が設定してありますが、フォントがインストールされてないパソコンでは表示されません。 環境によっては表示されないので、フォントの変更は好ましいとは言えません。
スタイルシートには次の3つの設定方法があります。
スタイルファイルを別の場所において読み込む
スタイルを埋め込む
インラインで設定する
※<div> はブロック要素(前後に改行がはいる)として、<span> はインライン要素(前後に改行が入らない)として定義されています。
このページスタイルは、背景の絵柄を横方向で固定し、上余白を130ピクセル、左右の余白を100ピクセルに設定してあります。 行間隔を
22ピクセル
文字のサイズは
12ポイント
です。
この表の左右余白は10ピクセル、上下余白は5ピクセルです。