※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。
■ ページの周りの余白をなくす
ページに画像や表(テーブル)を使用したとき、ページの端に隙間なくくっつけたいと思っても、なぜか、わずかな隙間(空白)が空いてしまうと思ったことはないですか?
例えば、このサイトのほとんどのページの上部には「超初心者の..」のタイトル画像がありますが、その上部や左右が余白なくぴったりくっついてます。
(スタイルシートを適用していないページはページ端との間にわずかな隙間があります。)
ページにスタイルを指定しなければ隙間があるのが標準の状態です。
これがデザイン的にどうしても邪魔で余白なくピッタリ詰めたい場合は次のようなスタイル属性を「BODY」に設定します。
- 【記述サンプル】
- margin: 0;
- 【記述サンプル】
- margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0;
もちろん、スタイル属性でも、スタイルシートでも設定可能です。
※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。
指定方法はいくつかあります。
■ 「body」タグに直接記述する方法
- 【記述サンプル】
- <body style="margin: 0;">
あるいは、
- 【記述サンプル】
- <body style="margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0;">
■ スタイルシートを使用する方法
- 【記述サンプル】
- <style type="text/css"> <!-- body { margin: 0px; } --> </style>
あるいは、
- 【記述サンプル】
- <style type="text/css"> <!-- body { margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0; } --> </style>
もしくは、
- 【記述サンプル】
- <style type="text/css"> <!-- body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; } --> </style>