初心者のためのホームページ作成動画解説付

ボックスモデルについて

綺麗なホームページを作成するコツは空白

綺麗というか読みやすい見やすいホームページを作るには空白が非常に重要になってきます。
例えば、文章の色もそうですが、文章の行の間隔が狭いと読みづらいホームページになってしまいます。
また、段落と段落の間隔が狭かったり、borderとの間隔とも狭かったりすると非常に読みづらいホームページになってしまいます。 では、実際に見てみましょう(^^)
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
いかがでしょうか?
上記は、border(枠線)とピッタリくっついてかつ、コンテンツの行の間隔を全く空けないで作ったのモノです。
これだけ行間隔が狭いと非常に読みづらいと思います。
では次は段落の間隔が無いもの。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
早く自分で好きなホームページを作りたい。早く自分で好きなホームページを作りたい。
早く自分で好きなホームページを作りたい。早く自分で好きなホームページを作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
いかがでしょうか?
これも非常に読みづらいと思います(^^;)

んでいきなりですが以下は読みやすいモノです。
確実に上記よりは読みやすいはずです。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。綺麗で見やすいホームページを早く作りたい。
早く自分で好きなホームページを作りたい。早く自分で好きなホームページを作りたい。
早く自分で好きなホームページを作りたい。早く自分で好きなホームページを作りたい。
ここで必要になってくるのがボックスモデルを理解することです。
以下の領域を覚えることが「見やすいホームページ」を作るのには欠かせません。
・コンテント(content)領域
・パディング(padding)領域
・ボーダー(border)領域
・マージン(margin)領域
図に表してみましょう。
マージン(margin)領域
ボーダー(border)領域
パディング(padding)領域
コンテント(content)領域
どういうことかというと、何か文章を書くとその文章(content)のまわりに見えない壁が存在しているということです。
まずはpaddingが存在し、その外にborder、さらにその外にmarginがあるということです。
それでは、一つ一つ説明していきます。
綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。
と書けば、下記のようになります。↓↓↓
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
わかりやすいようにborderを入れてみたいと思います。
<div style="border:5px solid #9999ff">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
と書けば、下記のようになります。↓↓↓
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
これではborderと文章がピッタリくっついてしまっているので見づらくなっています。
ここでpaddingを設定するとborderとの間隔を拡げることができます。
<div style="border:5px solid #9999ff;padding:20px">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
と書けば、下記のようになります。↓↓↓
これだけでも大分見やすくなります。
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
これを2個連続で書くと
<div style="border:solid 5px #9999ff;padding:20px">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
<div style="border:solid 5px #9999ff;padding:20px">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
このように上の段落と下の段落がピッタリくっついてしまいます。
これを解決するのがmarginです。
<div style="border:solid 5px #9999ff;padding:20px;margin:20px">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
<div style="border:solid 5px #9999ff;padding:20px;margin:20px">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。
このように段落と段落の間隔が空きます。
これらを駆使して見やすいホームページを作ってください。
数字を大きくすると意味が良く分かると思います(^^)

では最後です。ボックスモデルとは関係ないですが・・・。
文章と文章の間隔を空けるにはline-heightを使用します。
<div style="border:5px solid #9999ff;line-height:200%">綺麗で見やすいホームページを早く作りたい。<br>綺麗で見やすいホームページを早く作りたい。</div>
綺麗で見やすいホームページを早く作りたい。
綺麗で見やすいホームページを早く作りたい。


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
わかりませんという方へ
検索エンジンで「html margin」「html padding」「html line-height」等で調べてください(^^;)