-alignの使い方講座-

さて、ここでは例文を交えて詳しくalignについて解説していくわね。

alignはタグによって影響を与えるものが変わるけど、trの場合は行内のセルの中の要素の位置を指定する属性なの。
ちょっと言葉にすると複雑ね。簡単に説明するなら、tr内のtd全てに位置指定を一括で行うってことね。

そもそも表を作るには、tableやtr、tdを使わなきゃならないから、まずはtable一家から話を聞いておくと良いわ。

alignの使い方自体はとっても簡単なの。まずは下のサンプルを見て。
左がWeb上で見た時の図、右がそのhtmlソースよ。

[Sample1]

左揃え

特に変わった感じはしないけど、セル内の文字が左揃えになってるでしょ。
align="left"で左揃えっていうのは、trに限らずtableもtdも、imgにも適用できるから、覚えておいて損はないと思うわ。

それじゃあ、次のサンプルを説明するわね。

[Sample2]

中央揃え

どう？これなら違いが分かるでしょ。
trで指定した配置が、セル全てに適用されるのよ。

align="center"で真ん中に配置。これ自体は簡単でしょ。

同様に、align="right"で右端に配置できるわよ。下のサンプルを見て。

[Sample3]

右揃え

left、center、right。
ここまではストレートで分かりやすいけど、実はtrは他にも配置を指定できる言葉があるの。
justify[両揃え]っていうんだけど、これはちょっと効果が特殊なのよ。

早速サンプルを見てみましょ。

[Sample4]

justify justify justify justify justify justify

サンプルの文字の１段目に注目すると、両揃えになってるのが分かるかしら。

justifyは、複数行にまたがる英文を書いた場合にのみ、両揃えになるの。
これは和文には適用できないから、日本語のホームページを作る時には使えないわね。
まあ、予備知識ってことで。

trにalign を使うより、tdにalignを使う方が多いかもしれないけど、複数のセルに一括で指定できるのはかなり便利だと思うわ。
機会があったら、ぜひ使ってみてね。

×閉じる