コンテンツレイアウト用セレクタ

コンテンツ左寄せ(右への回り込み許可): fl-l, alignleft

表示例

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は左に表示され、この文章は(右への回り込みを許可 ＝ “alignleft” された)画像の右側に回りこんで表示されます。

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="alignleft" />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は左に表示され、この文章は(右への回り込みを許可 ＝ "alignleft" された)画像の右側に回りこんで表示されます。

コンテンツ中央寄せ: aligncenter

表示例

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="aligncenter" />

コンテンツ右寄せ(左への回り込み許可): fl-r, alignright

表示例

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(左への回り込みを許可 ＝ “alignright” された)画像の左側に回りこんで表示されます。

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' alt='dogs' width="300" class='alignright' />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(左への回り込みを許可 ＝ "alignright" された)画像の左側に回りこんで表示されます。

コンテンツの右寄せを解除: cl-r

表示例

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(左への回り込みを許可 ＝ “alignright” された)画像の左側に回りこんで表示されます。

ただし、ここから画像の右寄せの影響を解除します。

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' alt='dogs' width="300" class='alignright' />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(左への回り込みを許可 ＝ "alignright" された)画像の左側に回りこんで表示されます。
<p class="cl-r">ただし、ここから画像の右寄せの影響を解除します。</p>

コンテンツの左寄せを解除: cl-l

表示例

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(左への回り込みを許可 ＝ “alignleft” された)画像の左側に回りこんで表示されます。

ただし、ここから画像の左寄せの影響を解除します。

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width="300"  class="alignleft" />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(右への回り込みを許可 ＝ "alignleft" された)画像の右側に回りこんで表示されます。
<p class="cl-l">ただし、ここから画像の左寄せの影響を解除します。</p>

すべての回り込みを解除: clearfix

このセレクタは、alignleft, fl-l, alignright, fl-r などのセレクタを用いているコンテンツ全体を div タグなどで括り、このdivタグ自体に指定することで内部のコンテンツが他のコンテンツと回りこんでしまうのを防ぎます。

未制御の場合

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(右への回り込みを許可 ＝ “alignleft” された)画像の右側に回りこんで表示されます。

回り込ませたくないのに回りこんでいる文章。

このコード

<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg'  width='300' class='alignleft' />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(右への回り込みを許可 ＝ "alignleft" された)画像の右側に回りこんで表示されます。

回り込ませたくないのに回りこんでいる文章。

回り込みを解除した場合

あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(右への回り込みを許可 ＝ “alignleft” された)画像の右側に回りこんで表示されます。

ここからは回り込まずにコンテンツを表示できます。

このコード

<div class="clearfix">
<img src='https://digipress.info/_wp/wp-content/uploads/2012/04/blueberries-2278921_1280.jpg' width='300' class='alignleft' />あの美しく素晴らしい WordPress テーマ、1,234,567,890ユーザーが愛用。
画像は右に表示され、この文章は(右への回り込みを許可 ＝ "alignleft" された)画像の右側に回りこんで表示されます。
</div>
ここからは回り込まずにコンテンツを表示できます。