初心者のためのホームページ作り　第16号

初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2002/8/30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題■ 配置のコントロール　その１

◆ HTML4.01Strict における配置の指定
数年前、正確には４年前まで、HTMLのバージョンは 3.2でした。この仕様のコン
テンツの配置を指定するのはとても楽でした。
　<center>という要素がすべてを一律にセンタリングするものが使えて、センタ
リングを解除するのもたった１行 </center>で済んだものでした。

　また、align属性でもいろいろなコンテンツに使え、簡単に位置指定ができまし
た。例えば、<table align="center"> というように。

　しかし、HTML4.0が登場してから、W3Cはそれらの要素、属性は使わないように
しましょうと勧告したのです。文書を論理構造として記述するために、物理的な
タグや見栄えを指定する属性など（ビジュアルデザインに関する記述））を廃止
しようという動きが出てきたのです。

　ただし文書型宣言を過渡期の仕様として、 Trasitionalと記述することで、今
までの要素と属性が使えるようになります。が、いずれそれも廃止されてしまう
ことが決定されている以上、いつまでも「古い」手法を使うわけにはいきません。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ポイントとなるスタイルシート・・余白の設定
位置をきめ細かく指定するには、ブラウザの特質を理解する必要があります。
　ブラウザの多くが４隅に少しばかりの余白（マージン）を持っています。これ
を無くさなければなりません。そのために、スタイルシートは必須アイテムにな
ります。
　余白を無くす記述は、
　　body { margin: 0px }　たったこれだけです。

　しかし、面白いことに Operaというブラウザはマージンは持っていないけれど
パディング（コンテンツの内側の余白）を持っています。これも無くしておきま
す。記述法は、
　　body { margin: 0px; padding: 0px }

　これですべての視覚系ブラウザの一切の余白を取り除いてしまいます。

■ 見出し要素の位置
まず、見出しとなっている、<h1>初心者のためのホームページ作り</h1>　これ
をセンタリングで表示させたい場合、
　　h1 { text-align: center }

　この１行だけで簡単にセンタリングできます。右寄せしたい場合は、right を
　記述するだけです。左寄せの場合は何もしなくても左に寄ります。

■ 画像と文字の回りこみ
画像の周りに文字を回りこませて位置を整えたいと思います。画像を左に寄せて
その周りのテキスト（文字列）を回りこませるのは

　img { float: left; margin-right; 10px }

　画像を左に配置し、画像と文字の間の余白を10ピクセル設けて、画像と文字が
くっつき過ぎないようにします。もし、画像を右寄せにしたい場合は

　img { float: right; margin-left; 10px }　と書き直します。

■ リストの表示
リストアイテム要素を表示させる時、ブラウザは勝手に余白を表示してしまいま
す。これを打ち消して字下げをすることで引き締まってきます。
　ついでに上側と左側に枠線を配して文字色を変えて１つの段落のように表示さ
せます。（第12号を参照してください。）

　dl {margin: 0px }
  dt { border-top: 3px double #fc0; border-left: 3px double #fc0; 
       color: #009; font-weight: bold; text-indent: 0.5em }
  dd { margin: 0px; text-indent: 1em }


■ 全部を１つのボックスの中に入れてしまう。
上記のすべてを１つのボックスの中に入れてしまいます。ボックスには左右均等
の余白を設けて全部の要素が同じように配置できるよう表示させます。

　div { margin-left: 15%; margin-right: 15% }

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆絶対位置の指定
テキストやオブジェクトなどのコンテンツを初めから位置を指定してしまう方法
があります。
　この方法を「絶対位置」といって、やはりスタイルシートで記述します。

  構文    　{ position: absolute }  　（このままでは意味がありません）
  位置指定　{ position: absolute; top: 0px; left: 0px }

　コンテンツの位置を絶対位置と指定してから、左から０ピクセル、上から０ピ
　クセルと座標位置を設定する構文です。数値はピクセル単位となります。
　　なお、position: absolute　だけではあまり意味が無いので、必ず位置を指
　定して使います。

　ただし、この方法で位置を指定してしまうと、他のコンテンツとダブってしま
う場合が多々あります。
　つまり、通常、コンテンツはブラウザの上から下へ順に表示されます。絶対位
置の指定は、決められた位置で表示するのですが、他のコンテンツに指定がない
場合、絶対位置で指定されたコンテンツの位置を無視して、上から順に表示しコ
ンテンツが重なってしまいます。
　その点を考慮しながら、文書構造を設計する必要があります。