テンプレート:Float left

{{{1}}}

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

使い方

このテンプレートは、テキストを左側に浮かせて配置し、残りのテキストをその周囲に回り込ませます（整列方向は変わりません）。

{{float left|'''このテキストはオフセットなしで左に浮かせています。'''}} このテキストは浮動スパンの外側にあります。

出力結果：

このテキストはオフセットなしで左に浮かせています。 このテキストは浮動スパンの外側にあります。

効果を明確に見るためには、下の例を参照してください。

マージンの設定

• 第1引数 1 – 左に浮かせて配置するテキスト。
• 第2引数 2 – 浮動ブロックの右側の余白（マージン）を設定します。
• 第3引数 3 – 浮動ブロックの上下マージンを設定します。

{{float left|'''このテキストはオフセットなしで左に浮かせていますが、上下に 4em、右に 3em のマージンを設定しています。'''|3em|4em}} このテキストは浮動スパンの外側にあります。

出力結果：

このテキストはオフセットなしで左に浮かせていますが、上下に 4em、右に 3em のマージンを設定しています。 このテキストは浮動スパンの外側にあります。

マージン引数は片方だけでも使用できます。

{{float left|'''このテキストも左に浮かせています。上下に 1em のマージンがありますが、右マージンはありません。'''||1em}} このテキストは浮動スパンの外側にあります。

出力結果：

このテキストも左に浮かせています。上下に 1em のマージンがありますが、右マージンはありません。 このテキストは浮動スパンの外側にあります。

または

{{float left|'''このテキストはオフセットなしで左に浮かせていますが、右マージンを 18em に設定しています。'''|18em}} このテキストは浮動スパンの外側にあります。

出力結果：

このテキストはオフセットなしで左に浮かせていますが、右マージンを 18em に設定しています。 このテキストは浮動スパンの外側にあります。

例

左寄せ	float left	float left（追加マージン付き）
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. このテキストは 左寄せされています。 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.	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. このテキストは 左に浮かせています。 {{float left}} を使用。 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.	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. このテキストは 左に浮かせています。 {{float left|3em|5em}} を使用。 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.

関連テンプレート

• {{left}}
• {{block left}}
• {{shift left}}
• {{overfloat left}}
• {{float left/s}}
• {{float right}}

この解説は、テンプレート:Float left/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。