リファレンス - HR (MFセクショングループ)

レイアウトオプションの「HR 設定」について説明します

概要

<hr>は、後続する MFセクションに対するオプションです。

これらのオプションは、HTML、およびMFEditで指定します。

オプション

mf-col

class 名
  • mf-col-1
  • mf-col-2 (デフォルト)
  • mf-col-3
<!-- 後続のMFセクションを全てコンテンツ幅まで広げて 配置する -->
<hr class="mf-hr mf-col-1" />

<!-- 後続のMFセクションを全て2カラムで配置する(デ フォルト) -->
<hr class="mf-hr mf-col-2" />

<!-- 後続のMFセクションを全て3カラムで配置する。 -->
<hr class="mf-hr mf-col-3" />
変換例


mf-space

MFセクショングループ内でスペース領域が発生した場合の動きを制御します。

class 名
  • mf-space-fill (デフォルト)
  • mf-space-preserve
<!-- MFセクショングループ内でスペース領域が発生した 場合、同一行にあるMFセクションの幅を引き延ばす。 -->
<hr class="mf-hr mf-space-fill" />

<!-- MFセクショングループ内で発生したスペース領域を そのまま保持する。 -->
<hr class="mf-hr mf-space-preserve" />

mf-dir

後続のMFセクションを配置する方向を制御します。

オプション
  • mf-dir-horizontal (default)
  • mf-dir-vertical
<!-- 後続のMFセクションを左から右に向かって配置します -->
<hr class="mf-hr mf-dir-horizontal" />

<!-- 後続のMFセクションを上から下に向かって配置します -->
<hr class="mf-hr mf-dir-vertical" />
変換例

mf-align

後続のMFセクションの寄せを制御します。

オプション
  • mf-align-left (default)
  • mf-align-right
  • mf-align-center
<!-- 後続のMFセクションを左寄せで配置します -->
<hr class="mf-hr mf-align-left" />

<!-- 後続のMFセクションを右寄せで配置します -->
<hr class="mf-hr mf-align-right" />

<!-- 後続のMFセクションを中央寄せで配置します -->
<hr class="mf-hr mf-align-center" />
変換例