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

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

概要

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

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

オプション

mf-width

MFセクショングループの表示幅を制御します。カラム数が1のときのみ、利用できます。

class 名
  • mf-width-expand
  • mf-width-fullexpand
<!-- 後続のMFセクションを全幅にせず表示する（デフォルト） -->
<hr class="mf-hr mf-col-1" />

<!-- 後続のMFセクションを背景のみ全幅で表示する -->
<hr class="mf-hr mf-col-1 mf-width-expand" />

<!-- 後続のMFセクションを背景とコンテンツの両方を全幅で表示する -->
<hr class="mf-hr mf-col-1 mf-width-fullexpand" />
変換例

mf-col

MFセクションクをレイアウトするカラム数を制御します。デフォルトは2です。

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 (デフォルト)
  • 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 (デフォルト)
  • 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" />
変換例