いきなりここからご覧になると「何のこっちゃっ?」ってコトになるかと思いますので、ぜひ前の回から読んでみてくださいね。
前回の記事で、画像を右に寄せたり左に寄せたり、本文との間に余白を入れる方法を説明しました。
レイアウトの自由度が上がったでしょ?
やってみると楽しかったでしょ?
ちょっと技が光るページに見えるようになったでしょ?
「うん!」という答えが聞こえたこととして…。(笑)
なのに、まだ続くには理由があるんです。
次のサンプルを見てください。
米国「Macworld2008」で初披露。
わずか1.94cmの薄さ、1.3kgの軽さ!
フルサイズ画面、フルサイズキーボード搭載。
世界で一番薄いノートブック誕生!
「PDAとして、最高!!」(日経パソコンオンライン
ズームイン&ズームアウトも指先でタップするだけの簡単操作のiPod touchが新しくなって、今度はメールも使えるように!
Safari、YouTube、iTunes Wi-Fi Music Store、Mail、マップ、 天気、メモ、株価など機能満載。
レイアウトが崩れてる!
思い通りにいってない!
ということが起こる場合があるんです。
MacBook Airの右側にiPod touchの説明まで回りこんでしまってます。
別の行に配置するつもりでいるので、このままではいけません。
この症状には魔法の呪文は効かないけど(笑)、簡単なタグを1行入れるだけで問題は解消します。
<br style="clear: both" / >
回り込みを解除したい箇所にこのタグを入れます。
ちょっと余談なんですけど、Seesaaブログの記事投稿画面に「この記事の詳細設定」ってありますよね。左の「+」ボタンをクリックすると詳細設定の項目が表示されます。
「改行HTMLタグ変換」の項目のところは、初期設定では「改行は<br/>タグに変換する 」になってるんですよ。
Enterキーを押して改行すると、見えないところで自動的に<br/>というタグが挿入されてるわけですね。
上に出てきた<br style="clear: both" / >は、<br/>のおまけ付きバージョンだと思ってもらえればいいんじゃないかな。
というわけで、「改行は<br/>タグに変換する 」にチェックが入ってる人も、<br style="clear: both"/ >は入れてくださいね。
それでは、話を元に戻して…。
<br style="clear: both"/ >を入れてみましょう。
場所は、MacBook Airの説明文の最後の行「世界で一番薄いノートブック誕生!」の後ろです。
それと、iPod touchの説明文の最後にも入れます。
米国「Macworld2008」で初披露。
わずか1.94cmの薄さ、1.3kgの軽さ!
フルサイズ画面、フルサイズキーボード搭載。
世界で一番薄いノートブック誕生!
「PDAとして、最高!!」(日経パソコンオンライン)
ズームイン&ズームアウトも指先でタップするだけの簡単操作のiPod touchが新しくなって、今度はメールも使えるように!
Safari、YouTube、iTunes Wi-Fi Music Store、Mail、マップ、 天気、メモ、株価など機能満載。
回り込みするところとしないところがちゃんとうまくいきました。
というわけで、今日のまとめです。
回り込みの解除をしたいところで
<br style="clear: both" / >
というタグを入れる。
<br style="clear: both" / >
というタグを入れる。
言葉だけなら簡単なんですけどねー。(苦笑)
サンプルをどうしようかと考えて試行錯誤するのに時間が掛かっちゃって。(^_^)ゞ
回り込みの方法、余白の指定、回り込み解除の方法、の3つがわかっていただけたと思います。
これで回り込みを駆使してレイアウトできますね。
いろいろ試して、素敵なレイアウトをしてくださいね!
なお、この<br style="clear: both" / >というタグは、画像の横にも文章を(1) で紹介した方法だと自動で挿入されます。
↓「読んだよ」の印にクリックしてね!↓
[参考ニュース]
[関連記事]











あれ、おいらクリアされてないぞ(Safari&FF)、と思ったので唐突にコメントを(笑)
clear: allは、IEだけで機能する属性みたいです。(要はバグです)
通常、leftでもrightでもクリアする場合にはclear:bothを使います。もしくは、直前に回り込みさせた属性を入れてclear:leftとかですね。
あとひとつ書いてみると、厳密に言うとclear:leftは左に配置するという意味合いではなく、次に続くものを右に配置する(自分は左)という意味でして。
なので、クリアしないところまでは、入るものなら永久に回り込み続けるわけですね。ええ。結果的に見えてるものは一緒なんですけどもね。
そんではー
もう、「さま」とお呼びするしかありません!
フォローありがとうございます、web屋の姉さま!!
他のブラウザで確認するなんてキホンじゃないねー。そんなコトを怠っている初心者はどいつだい…ってアタシだよっ!
反省します。ネスケもFiroefoxもSafariも入れてるんだからねー。
訂正してお詫びしなくちゃ!