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

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

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  目次

プレーンテキスト版バックナンバー

今週<第16号>マガジンのおさらい

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

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

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

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

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

まったく配置の指定やスタイルシートの設定されていないページを見てください。
Sample HTML その1   HTMLソースは今週号を参照してください。

このままでも通用するページと思いますが、見栄えを向上させるためにスタイルシートを使って、位置の指定や色を付けて少しでも魅力的な装飾を施します。

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

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

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

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

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

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

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

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

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

■ リストの表示
リストアイテム要素を表示させる時、ブラウザは勝手に余白を表示してしまいま
す。これを打ち消して字下げをすることで引き締まってきます。
 ついでに上側と左側に枠線を配して文字色を変えて1つの段落のように表示さ
せます。(第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 }


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

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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
これで、スタイルシートを先ほどのページに埋め込んでみます。するとこのように変化します。

Sample HTML その2    HTMLソースは今週号を参照してください。

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

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

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

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

また逆に、絶対位置を指定してコンテンツを重ねてしまうことを利用した手法を使ってページタイトルなどを効果的に見せることもできます。
Sample HTML その4    HTMLソースは今週号を参照してください。

配置の指定にあたって
コンテンツの配置を指定する最大の目的は、訪れるユーザに読みやすい(見やすい)環境を提供することにあります。変に位置の指定を行うとせっかくのコンテンツを台無しにしてしまう場合があります。また、ブラウザによってはすべてのCSSに対応していない場合もあり、その点を留意して事前に文書構造を設計するように心がけましょう。

次回はオブジェクトやブロックレベル要素のセンタリングなどの位置指定について詳しく解説します。



Copyright(C) 2002-2003 banban@scollabo.com