html講座

(1) ページを整えたい！

随分、漠然とした命題ですが、
今回はページをいろんな方法で整えてみましょう！

センタリング

日本語で言えば、中央揃えってところでしょうか？

<center>～</center>：センタリング

<center>～</center>タグで挟んだ部分が
センタリングされます。
例）

SRC=5-1.html

こんな感じです。

改行をさせない！

文を書いてて改行して欲しくないところで
改行されることがありませんか？
この逆のパターンは

でやりましたけど。

<nobr>～</nobr>：改行禁止

<nobr>～</nobr>タグで挟んだ部分が改行禁止になります。
<br>タグを用いた場合は改行されます。
これをうまく用いてレイアウトを整えてみましょう！
例）

SRC=5-2.html

こんな感じです。
つまりブラウザで勝手に改行されてしまうのを防ぎます。
１行で言いたいこととかがあって
改行を入れたくない時に使用するといいでしょう！

<nobr>～</nobr>タグ内で改行を行うには
<wbr>というタグがあるみたいですが
<br>タグで改行出来ちゃっているので
僕はこっちを使ってます。
んんん。これであってるのか？って言われる痛いんですけど。

<table>タグで改行禁止！

別に、<table>～</table>タグ内で<nobr>～</nobr>タグを
用いればいいんですが
そのためのパラメータが用意されているので使いましょう！

<td nowrap>～</td>：セルで改行禁止
<th nowrap>～</th>：見出しのセルで改行禁止

では早速、例をやってみましょう。
例）

SRC=5-3.html

こんな感じです。
nowrapのオプションを指定すると
セル内で不要な改行がされなくなります。

区切り線

↓こんな奴です。

次のタグで引きます

<hr>：区切り線

これだけで区切り線が引けます。
ちなみにオプションはこれです

オプション	意味
size=X	区切り線の太さ
width=X	区切り線の長さ
align=[left\|center\|right]	区切り線の配置、左詰め、中央揃え、右詰め
color=x	区切り線の色、＃ＲＧＢ値 or カラーネームで指定

↑今回は手抜きだな…
自分でいろいろ試してみてください。
話題の区切りとかに使えますよね。

ポイント

自分なりの方法でページを整えよう！

今回はページのレイアウトということで
講義を進めてきましたけど
どうでしょう？わかって頂けたでしょうか？
いろいろ試行錯誤して自分なりに工夫してみてください。

ちなみに
僕は見えないところで<table>～</table>タグを用いて
レイアウトを整えてます。
今回は特別、
このページの<table>タグを目立たせてみましょう！
ちょっとわかりにくいかもしれませんが
これです。
わかりますか？
各項目がセルで区切られているのが？
見比べてみると分かりやすかもしれません。

<table>タグを用いると結構いろんなレイアウトが出来ます。
例えば、新聞みたいにこんなこともできます。

aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbb

こういう専門のタグもあるみたいですけど。
<table>タグで間に合ってしまいます。
そんなところで
僕は<table>タグを多様しますが
みなさんも自分なりのやりやすい方法を見つけて
ホームページを整えていってください。