このテンプレートは<div style="clear:both;"></div><div style="clear:left;"></div><div style="clear:right;"></div>;を追加する。XHTMLの技術的な詳細はen:Template talk:Clearを参照。

説明

編集

{{Clear}}:先行するコンテンツが終了する行まで、次のコンテンツを待たせる指定。しばしば、関連しないイメージの後に記載したいときに使う。

使用法

編集
{{Clear}}
{{Clear|left}}
{{Clear|right}}

これを使用すると、画面幅、画像数に対する文字数の少なさによっては本文欄に空白が発生することがあり、場合によっては空白が多くなることがある。

このテンプレートはsubst展開してもよい。しかし、展開するとこの解説ページに辿り着けなくなり、何のためのものかわかりづらくなる。

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

編集

Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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に準拠するためTemplate talk:-のとおりリダイレクト化されている。


  NODES