<div> タグは、とても万能なタグで、<div> タグで囲った箇所に、いろいろな効果を与えることができるタグ です。
たとえば、下記のように、文章全体を <div> タグで囲むことで、文章全体を右寄りにすることができます。
■ <div> タグを使って、文章全体を右寄りにする記述例
|
<div align="right">
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
</div>
|
■ ホームページ上の表示
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
|
<div> タグで囲った箇所には、いろいろな効果を与えることができて、
たとえば、<div> タグの後ろに、align="right" と記述することで、上記のように、文章全体を右寄りにすることもできます。
そして、この<div> タグの便利なところは、なんと言っても、「スタイルシートを使えること」 です！
たとえば、下記のように記述することで、上下左右に、空白を入れることができます。
■ <div> タグを使って、上下左右に空白を入れる記述例
|
<div style="padding:20px">
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
</div>
|
■ ホームページ上の表示
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
|
上記のように、上下左右に、空白が入っていますよね？
<div> タグの後ろに、 style="padding:20px" と記述することで、全体的な間隔を設定することができて、上下左右に空白を入れることができます。
ちなみに、この style というのが、「スタイルシート」の記述で、
<div> タグの後ろに、この style を記述することで、いろいろなことができるようになります。
たとえば、下記のように記述することで、 細かい空白を入れること ができます。
■ <div> タグを使って、細かい空白を入れる記述例
|
ホームページに掲載する文章<br>
<div style="line-height:50%;"> </div>
ホームページに掲載する文章<br>
|
■ ホームページ上の表示
ホームページに掲載する文章
ホームページに掲載する文章
|
上記のように、文章と文章の間に、細かい空白が入っていますよね？
<div> タグの後ろに、 style="line-height:50%;" というスタイルシートの記述を入れることで、
このような、 細かい空白 も入れることができるのです！！
（ちなみに、 という記述は、「全角空白」という意味です。全角空白をスタイルシートを使って、高さを調整することで、細かい空白を設定している、、、ということですね）
この<div> タグについては、いろいろなことができてしまうので、逆に、分かりづらいとは思います。。。
しかし、 この<div> タグは、ホームページを作る上で、絶対に欠かせないタグ です。
特に、上記の「細かい空白」は、僕は、ホームページ作成で、すごく使っています。
ホームページは、空白の使い方がとても重要になるので、このような細かい空白を使えないと、良いホームページが作れないからです。
<div> タグは、いろいろなことができるため、分かりづらいと思いますが、このページでお伝えしていることだけをマスターすれば、まずは十分だと思います。
あとは、パーツテンプレート集 のページで、この<div> タグを使ったパーツをたくさん掲載していますので、実際に使ってみて、表示などを確認してみてください。
実際にやってみると、どのように表示されるのかが分かりますし、「本当に便利だ！」ということも、分かると思いますよ。
