今回は、少し前にお話していたCSSでレイアウトする、floatの件について少しお話したいと思います。
「ボックスを横に並べて表示させたい場合」　の記事はこちら。
http://www.ryuumu.co.jp/ryuumu/stuffblog/e338.html
http://www.ryuumu.co.jp/ryuumu/stuffblog/e342.html

今回はfloatでのレイアウトとtableでのレイアウトのメリット・デメリットについて少しだけお話したいと思います。

「ボックスを横に並べて表示させたい場合」は少し前まではcssでなく、tableで表現されてきました。
tableというタグは現在もよく使われています。
tableはいわゆる「表」で、文章や画像を配置することが出来ます。

tableは比較的簡単に、自由に複雑な段組みを作成できます。
代表的なブラウザでは表示に違いが出ることはほとんどありません。
しかし、複雑な形になればなるほどメンテナンスが難しくなります。
そしてtableを使ってデザインをすることは勧められていません。

段組をCSSで表現するには、前回までにお話ししていたdiv要素を使ってfloatを使い表現します。
tableは表に使うものなのでレイアウト調整に使うべきではない、という作成基準のもと、現在はCSSによるレイアウトが推奨されています。
（htmlにも規格のようなものがあるのですが、長くなるので別の機会に）
ただ、こちらはブラウザによって解釈が違っていたりするので、様々なブラウザで表示確認をする必要があります。

このように、二つの方法にはそれぞれメリット・デメリットがあるんですね。

今回ソースのレシピはありませんでしたがいかがでしたでしょうか？
tableを使うべきところとそうでないところを覚えて
基準に沿った作成方法を身につけていきましょう！

ではまた次回！

今回は前回のちょっとした続きです。
リストを横並びにする方法を違う方法で実現させましょう。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e345.html

まずはリストを表示させるソースを記述します。





ここまでは前回と一緒です。
次にスタイルシートの部分に





と書いてください。
これで終了です。書き方としては前回よりもちょっと楽になりました。

ですが、横並びのリストは意外と曲者で、ブラウザによって表示が異なる場合があります。
いろんな方法がありますので、あくまで一つの方法として覚えておいて色々な試してみてください！

いかがでしょうか？
前回のやり方、今回のやり方、横に並ぶという結果は一緒ですが
そのときのデザインによってメリット・デメリットがありますので、たくさん使って慣れてくださいね。

ではまた次回！

今回のレシピは、リストを横並びにする方法です。
　　
リストは通常上から下に向かって配置されます。
・1項目
・2項目
・3項目
このような感じですね。リストはデフォルトだとリストマーカー（・）がついています。
これを

1項目目　2項目目　3項目目

というように横並びにしましょう。


まず普通にリストを表示させる為のソースは



こうですね。
リストを横並びするには前回までにお話したfloatを使います。
スタイルシートの部分に



こう書くとリストが横並びになりましたね。
これでも十分なんですが、リストのマーカー（・ですね）が残っていませんか？
スタイルシートの部分に



と追加して下さい。リストマーカーが消えましたね。これでリストの横並び完成です！
でもこのままだとちょっとリストとリストの間が詰まってますね。
先ほど書いたliのスタイルシートの部分、右側にマージンを追加してみましょう。



こうすると1項目目と2項目の間に余白が出来ましたね。見栄えもいいと思います！

とても簡単で沢山使い道もあるので、是非使ってみてくださいね！
ただし、前回でも書きましたが、floatを使ったあと
回り込みを解除しなければいけませんので、お忘れなく！！

ではまた次回！

前回floatという技ついてご説明をしていました。
記事はこちら→http://www.ryuumu.co.jp/ryuumu/stuffblog/e338.html
今回はもう少しだけ踏み込んだお話をしたいと思います。

まずbodyタグ内に、以下のように書いてみましょう。



こう書くと、ボックスが縦に並びます。
ここまで前回と一緒です。
今回も、ボックスに色をつけたほうが分かりやすいと思います。
次にスタイルシートの部分に



このように書きます。
前回と違うところは#box_bのfloatがleftではなくrightになっています。
実際書いてボックスが並んだところを見てもらえれば早いと思いますが
前回はboxAの左側にboxBがぴったり並んでいたと思いますが
今回はウィンドウの左端にboxAが、右端にboxBが表示されていませんか？
boxAは左側に回りこませ、boxBは右側に回りこませたので、
このようになっています。

もう一つ例を挙げてみましょう。bodyタグの中に



このように書くまでは同じです。
次にスタイルシートの部分に



こう書いてみてください。
いままで一番上に書いていたboxAが左側に来ていましたが、
boxBが左側に来ていますね。
ソースを見る限り順番で言えばboxA→boxB→boxCといった順番に
並ぶはずですが、floatを使えばこのような事も出来てしまいます。

デザインをする上でとても便利ですが、使い過ぎると
ソースがとても複雑になってしまいますので、
回り込みを行った次の要素で回り込みを解除し忘れてデザインが崩れる、
ということもありますので注意して下さい。
また、一部の古いブラウザによってはおかしな表示になる事もあります。

こう書くと制限ばかりのように思えますが、前回も述べたように
いまやデザインを行う上で無くてはならない方法ですので、
是非たくさん使って練習して下さい！

ではまた次回！

今回はいまや無くてはならない存在！？
floatについてのレシピをご紹介します。
floatとは回り込みのことです。
左、または右に寄せて配置出来ます。
　
まず



こう書いてみると、ボックスが縦に並びます。
それぞれのdivに色をつけてみると分かりやすいと思います。
ボックスAとボックスBを左右に並べて表示させたい場合はどうするのか？
という時にfloatを使います。
スタイルシートの部分に



と書くと、
ボックスAが一番左に寄って、その右隣にボックスBが配置されるようになります。
ただし、この状態だとボックスBの後に書いているボックスCも
ボックスBの右隣に回り込んでしまいます。
つまり3つとも横一列に並んでしまいます。
これを防ぐにはボックスCに解除指定のスタイルシートを記述します。


これで完璧です。

floatにはrightとleftとnoneが指定出来ます。
right→後に続く内容をその左側に回り込ませる
left→後に続く内容をその右側に回り込ませる
none→配置を指定しない、初期値
という指定になっています。
noneは初期値ですので、あまり指定する場面は無いと思います。

また、clearにはrightとleftとbothとnoneが指定できます。
clearに関しては、
right→右寄せを解除
left→左寄せを解除
none→初期値、何もしない
both→左寄せ、右寄せされた全ての回り込みを解除する
という指定になっています。
bothは右も左も両方解除してくれる、という便利な値なので
bothは絶対覚えておいて下さい。
　
floatはとても便利でもう少しお話を・・・
と思いましたが、長くなりそうなので次回にします！

ではまた次回！