出版
PHPを使ってHTML要素を配置できます。やり方は以下のとおりです。
マット・ロッター、チャリティ・カーン、ポール・アンダーソン
要素に位置を設定するには、まずその位置プロパティをabsoluteまたはrelativeとして宣言する必要があります。
H1 { 位置: 絶対 }
その後、お好みの配置プロパティを追加できます。例えば、次のコードは、<H1>テキストをページ上端から150ピクセル離れた、幅200ピクセル、高さ200ピクセルのボックス内に配置します。
H1 { 位置: 絶対; 上: 150px; 幅: 200px; 高さ: 200px }
もちろん、すべての<H1>要素を同じ場所に表示したくないでしょう。そこで、インラインスタイル、IDセレクター、そして<DIV>要素と<SPAN>要素が役立ちます。例えば、次のコードは、特定の<DIV>要素の内容のみを配置します。
<DIV style=”position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; background-color: red”>これは、ウィンドウの上端と左端から 200 ピクセル離れた、200 x 200 ピクセルの赤いボックス内のテキストです。</DIV>
絶対配置では要素をブラウザウィンドウの端からオフセットしますが、相対配置では要素をドキュメントの流れに沿って配置します。つまり、HTMLコード内の前の要素からオフセットします。これにより、各オブジェクトをページ上の正確な位置に配置することなく、オブジェクト同士の関係性に基づいて配置できます。
以下の例では、最初の行のテキストは通常通りページ全体に流れます。2行目は、オフセットIDで指定された配置スタイルを使用する<SPAN>要素内にあり、その上にある要素から50ピクセル下、25ピクセル右に配置されます。（topプロパティとleftプロパティは、スタイルが適用された要素の上と左にスペースを残します。）
<HTML>
<HEAD>
<STYLE type=”text/css”>
<!–
#offset{ position: relative;
top: 50px;
left: 25px
}
–>
</STYLE>
</HEAD>
<BODY>
このテキストはページ全体に通常通り表示されますが、次のテキスト行はこの行の末尾からオフセットされます。
<SPAN id=”offset”>このテキストは上記の行から上側に 50 ピクセル、左側に 25 ピクセルオフセットされています。</SPAN>
</BODY>
</HTML>
注: このページの例は、バージョン 4.0 以降のブラウザでのみ機能します。
Matt Rotter と Charity Kahn は CNET.com のソフトウェア エンジニアです。
Paul Anderson は、CNET Builder.com のアソシエイト テクニカル エディターです。
ゲスト寄稿者
