おもしろ園芸館　～果樹栽培日記～

配置にこだわる

■■■

配置にこだわる

■■■

自分でページを作成していて「配置にもっとこだわりたいな」と思ったことはありませんか？文字や画像を自由に配置する方法はいろいろありますが、ここではタグを利用して簡単に配置を設定する方法を紹介します。

・

文章の途中で改行をする

ご存知の方も多いと思いますが「BR」タグを利用すると改行できます。

ここは１行目です

<BR>

ここからは２行目です

↑

ここで改行

「BR」タグは空要素なので終了タグはありません。
２個「BR」タグを並べると１行あけることもできます。

・

文章の横に画像を表示する

文章の横に画像を綺麗に配置したいと思ったことはありませんか？
表を書くための「TABEL」タグを利用することで、文章や画像の配置を工夫することができます。
では、まず最初に「TABLE」タグの使い方を覚えてみましょう。

<TABLE>
<TR>
<TD>
ここに内容を記述
</TD>
</TR>
</TABLE>

←　テーブル（表）全体を表す
←　行（上から下への並び）を表す
←　列（左から右への並び）を表す

←　列の終了タグ
←　行の終了タグ
←　テーブルの終了タグ

上の例が表の基本になります。
「TR」タグや「TD」タグの前にスペースがありますが、これは実際表示されるときには関係ありません。
このようにスペース（またはTab）を入れることで、開始と終了タグの対応が分かりやすくなります。
次はもう少し表らしい例を示します。

←　「BORDER」属性で線の太さを設定できます

←　「TD」タグを続けると２列目以降が設定できます

←　「TR」タグを続けると２行目以降が設定できます

通常は１行目と２行目以降の列数は同じにしてください。

【上のタグを表示させたもの】

１行目の１列目	１行目の２列目
２行目の１列目	２行目の２列目

以上のタグを応用することで、文章の横に画像を表示することが可能になります。

<TABLE BORDER="0" WIDTH="600">
<TR>
<TD WIDTH="300">
ここに文章を記述
</TD>
<TD WIDTH="300" ALIGIN="left">
ここに「IMG」タグを記述
</TD>
</TR>
</TABLE>

←　「WIDTH」属性で表の幅を設定できる

←　「WIDTH」属性で列の幅を設定できる

←　「ALIGN」属性で横方向の表示の位置を設定できる

「ALIGIN」属性には「left」（左寄せ）の他に、「center」（中央寄せ）、「right」（右寄せ）が指定できます。
「TD」タグには縦方向の位置を設定するための「VALIGIN」属性も利用できます。
「VALIGIN」属性には、「top」（上揃え）、「middle」（中央寄せ）、「bottom」（下揃え）が指定できます。

【上のタグを利用した例】

ここに長い文章を記述しても３００ピクセルで自動的に改行されて表示されます。この文章を上に揃えるには「TD」タグに「VALIGIN="top"」を追加します。線を表示したくない場合は「BORDER="0"」とします。