コンテンツにスキップ

テンプレート:Clear/doc

提供: Wikisource

このテンプレートは、以下のいずれかのコードを挿入して、直前のフロート要素(画像など)の回り込みを解除します。

  • <div style="clear:both;"></div>
  • <div style="clear:inline-start;"></div>
  • <div style="inline-end;"></div>

説明

[編集]

{{Clear}} は、先行するコンテンツの回り込みが終了する位置まで次のコンテンツの表示を待たせるためのテンプレートです。本文を関連しない画像の下から開始したい場合などに使用します。

使用法

[編集]
  • {{Clear}}
  • {{Clear|left}} または{{Clear|inline-start}}
  • {{Clear|right}}または{{Clear|inline-end}}

利用環境(画面幅・画像数・文字量)によっては、本文欄に意図しない空白が発生することがあります。場合によっては空白が多く見えることもありますので、使用箇所には注意してください。

このテンプレートは subst展開してもかまいません。ただし展開すると、この解説ページへ辿りにくくなり、用途が分かりづらくなるおそれがあります。

Clear テンプレートを使用しない例

[編集]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

次のセクション

[編集]

画像と行が重なり、画像の右側からセクションが始まっていることが確認できます。

Clear テンプレートを使った例

[編集]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. {{Clear}}

次のセクション

[編集]

ここから行が正しく始まります。


関連テンプレート

[編集]
  • {{Clearleft}}:左側の回り込みを解除します。
  • {{Clearright}}:右側の回り込みを解除します。
  • {{Float}}
  • {{Stack}}
  • {{After float}}:画面幅が狭い場合にのみ、{{Clear}} と類似した効果を発生させます。

議論

[編集]

{{Clear}}{{-}} の比較は en:Template talk:- にて議論されています。両者は似ているものの技術的には異なる挙動を示していましたが、HTML5 への準拠のため、ウィキーソース日本語版では w:Template talk:- のとおりリダイレクト化されています。

外部リンク

[編集]