ブロックを整列させる

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

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

素材の宝島

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

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

整列ですか？？

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

ブロックに分けると

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

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

ラインをつけると

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

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

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

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

幅を揃える

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

文字を揃える

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

比べてみる

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

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

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

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