1時間で作るホームページ WEBデザインの素

ブロックを整列させる



初心者

今日はかわいい素材のページを作ってみました。

お姉さん

あら、かわいいわね。わかりやすいし、素材を増やしていけば見に来てくれた人も喜んでくれるかも。


素材の宝島

なんですけど、もっとキレイに出来るんじゃないかなと思うんです。何かアイデアありませんか?

お姉さん

そうね、このままでも内容は十分わかるから問題ないけど、すっきり見せたいなら文章や画像さ整列させればいいと思うよ。


整列ですか??

お姉さん

そう。もう一度↑のページを見て。文章やメニューなんかは、まとめて配置してあるから、わかりやすくていいんだけど、文章がセンターで揃えすぎてたり、それぞれのブロックがバラバラなのよね。↓を開いてみて。


ブロックに分けると

ブロックがバラバラというと・・。

お姉さん

とりあえず←でブロックを色分けしてみたわよ。こうすると、どんなブロックがあるかわかりやすいでしょ?
※ここでいうブロックというのは、文章や画像のかたまりのことです。

 

ラインをつけると

あ、ほんとだ。こうやってみると、なんかバラバラですね。気づかなかったです。

お姉さん

さらにブロックの上下に青いラインを引いてみるとこうなるの。この青のラインがたくさんあるほどブロックが揃ってないので、まとまってない印象になるわけね。


ということは、この青のラインを少なくすればいいってことですか?

お姉さん

うん。青のラインを少なくするってことはブロックを整列させるってこと。ようするに、各ブロックを左詰や右詰でそろえたり、高さを揃えるってことね。さっそく、やってみましょ。




幅を揃える

お姉さん

まず、こんな感じで<table>の幅を揃えてみる。これで横幅が全部いっしょだから縦のラインがすっきりするわよ。わかりやすいように、<table border="1">にしてあるから注意ね。

 

 


文字を揃える

お姉さん

次にセンター揃えだった文字を左寄せにして、下のバナーも均等になるように配置してみた。素材のメニューもバランスが悪かったので左詰の<table>に入れて中央揃えにしてるわよ。ついでに<table>の背景色も追加してる。

 

 


比べてみる

お姉さん

最後に<table border="0">にして仕上がりを比べてみましょう。どう?

初心者

おー、なんかすっきりしましたね!内容は同じなのに、なんだかしっかりした印象をうけます。


お姉さん

ブロックを整列させると、すっきりしてしっかりした印象になるの。ただ、整列すればするほど堅い印象になっていくのも確かなのよね。楽しい雰囲気を作りたいなら、あまり整列させると逆効果。そのあたりは、バランスを見ながら調整していってちょうだい。

初心者

わかりました。いろいろ試してみます!



戻る

(C)2004 105 ALL RIGHT RESERVED.