CSS の after 擬似要素で回り込みを解除する

CSS の after 擬似要素で回り込みを解除する

Posted at February 14,2007 12:30 AM
Tag:[CSS]

float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します(通常の解除方法も併せて掲載しています)。

1.「回り込み」とは

例えば、画像の左(または右)にテキストを表示することを「(テキストの)回り込み」と呼びます。

マークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト~(略)~回り込みテキスト
</p>

表示

サンプル画像1回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

(X)HTMLでこのような表示を行う場合、先に出現する要素(ここでは img 要素)に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、前の要素の右(または左)側に回り込みます。

ちなみに「float プロパティ = 回り込み」という解釈は正しくないようです。下記の記事に分かりやすい解説があります。

2.「回り込み解除」とは

画像の左(または右)に回り込んで表示されているテキスト(あるいは要素)を、回り込まない状態に戻すことをこのように呼びます。
画像の回り込みが有効な状態が持続すると、流し込むテキスト量によっては後続のテキスト等が一緒に回り込んでしまいます。リキッドレイアウトでブラウザの横幅をひろげた場合にありがちです。

回り込みを解除していないマークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト~(略)~回り込みテキスト
</p>
<p>
回り込まないテキスト~(略)~回り込まないテキスト
</p>

表示

サンプル画像2回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

このような予期しない表示を避けるため、回り込みを解除する必要があります。

3.回り込み解除方法

3.1 後続の要素に clear プロパティを与える

回り込みを解除するために、回り込みさせた要素の後続の要素に clear プロパティを与える方法があります。

マークアップ
<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト~(略)~回り込みテキスト
</p>
<p style="clear: both">
回り込まないテキスト~(略)~回り込まないテキスト
</p>
表示

サンプル画像3回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

3.2 親ブロック要素の after 擬似要素に clear プロパティを与える

具体的には、float プロパティの要素を含む親ブロック要素の after 擬似要素に対し、clear プロパティを与えます。

3.1項の方法では後続の要素で回り込み解除を設定しますが、回り込みさせた要素を含むブロック要素自身で回り込みを解除させる方が感覚的に本来のように感じます。
このような場合、after 擬似要素を用いれば可能らしいのですが、残念ながら IE6(多分IE7も)では after 擬似要素がサポートされていません。

が、調べているうちに、

zoom プロパティを併用することで IE も対応可能」

といった内容の記事をみつけましたので、ここではその方法をご紹介致します。*1
参考記事は下記です。ありがとうございました。

全体の構成は下記のようになり、float プロパティを与えた親のブロック要素(ここでは p 要素)に対し、回り込み解除用の class 属性を記述します。class 属性名は任意の名称で構いません。

CSS
.fbox {
    zoom: 100%;
}
.fbox:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

Windows XP + IE6 / IE7/ Firefox2 / Opera 9 では、height プロパティ、visibility プロパティは指定しなくても回り込み自体は解除されるようです(他の振る舞いについての差異は未確認)。

マークアップ
<p class="fbox">
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト~(略)~回り込みテキスト
</p>
<p>
回り込まないテキスト~(略)~回り込まないテキスト
</p>
表示

サンプル画像4回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

4.Movable Type でエントリーを書く場合

Movable Type でエントリーを記述する際、エントリー編集画面下の「改行設定」を「改行を変換する」にしている場合でも、class 属性つきの p 要素を手動で付与した場合は、p 要素は重複して自動付与されないので、3.2項の方法がそのまま利用できます。

5.関連リンク

とまとめてみましたが、私自身回り込み解除を利用していなかったので、これから少しずつ過去のエントリーを修正していきたいと思います(反省)。


*1:zoom プロパティは IE(5.5 以上)の独自プロパティなので、利用した場合、CSS valid にならなくなります。

2013.03.12
本文の誤記を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

テスト from すさの Diary
右左チェック右テキスト左テキスト追記:解決後。お世話になったサイトのトラックバック追加。 [続きを読む]

Tracked on April 24, 2007 12:00 AM

from AirNX 開発者ブログ
複雑なデザインのサイトをコーディングしていてfloatを多用すると、クリアする... [続きを読む]

Tracked on December 6, 2009 12:48 AM
コメント

いつもお世話になっています。少し動きの変わったサイドメニューの折りたたみを見つけましたこちら
また、お手すきの時にでも導入方法をエントリーお願いします。WordPressでも利用できれば幸いです。宜しくお願いします。

[1] Posted by panser : February 14, 2007 1:44 AM

>panserさん
こんにちは。
ご要望事項ということで承りました。なおエントリーにつきましては確約できませんので、その点予めご了承ください。
それではよろしくお願い致します。

[2] Posted by yujiro : February 15, 2007 3:06 PM

こんばんわ。
[mellow_blog]のmellowといいます。
blogpeopleリンク貼らせていただきました。
手探り状態でブログ人のCSSカスタマイズとかやってるんですが、
いろいろ参考にさせていただきたいと思います。
ヨロシクお願いします。

[3] Posted by mellow : February 15, 2007 9:12 PM

>mellowさん
こんばんは。
BlogPeople登録ありがとうございました。
こちらこそどうぞよろしくお願い致します。

[4] Posted by yujiro : February 17, 2007 1:37 AM

wordpressユーザーですが、最新版にバージョン・アップした頃からテキストが画像右側に勝手に回り込んでしまう現象に頭を痛めてしました。
こちらで紹介されているプロパティを応用したら、すぐに解決しました。
本当にありがとうございました(^^)

私はMTは使ったことがないのですが、WPでも応用できる小技がいろいろありますね。
時々、参考にさせて頂いているので、これからも頑張ってください!

[5] Posted by marie : May 24, 2008 7:01 PM

>marieさん
こんにちは。
ご連絡ありがとうございました。
お役にたてたようで良かったです。
ではでは!

[6] Posted by yujiro logo : June 9, 2008 11:41 AM

刻んだ背景の合わせ口に1pxの隙間が開いていて困っていました。

お蔭様で、無事に隙間を無くす事ができました。

どうもありがとうございました。

[7] Posted by きういマロン : November 2, 2011 6:26 AM

>きういマロンさん
こんにちは。
ご連絡ありがとうございました。
お役に立てたようでなによりです。
ではでは!

[8] Posted by yujiro logo : November 6, 2011 11:23 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)