文章の区切りに、ただの罫線ではなく花や葉の飾りが置かれた古い本を見たことはないでしょうか。あの装飾を フルーロン（fleuron） と呼びます。
本記事では、フルーロンの意味・歴史をざっとおさえたうえで、Web制作で使うための具体的な方法（コピペで使えるセクション区切り、CSSの実装、OpenType機能の活用）までをまとめます。後から自分で読み返すためのメモも兼ねた内容です。
⧼ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧽
フルーロンとは
フルーロンとは、花や葉を様式化した装飾用の活字のことです。語源は古フランス語の floron（花）で、英語では printer's flower（プリンターズ・フラワー） とも呼ばれます。タイポグラファのロバート・ブリングハーストは、著書のなかでこれらの形を「園芸的なダンバット（horticultural dingbats）」と評しました。
最も有名なフルーロンが、蔦（つた）の葉をかたどった ヘデラ（hedera） です。「アルダイン・リーフ（aldus leaf）」「アイビー・リーフ」「ヴァイン・リーフ」など複数の通称を持ち、活字の世界では古くから使われてきました。
/༶༻✿
༶ アザミを中心に据えた複雑なフルーロンの組み合わせ
༶ （1870年・スコットランド方言詩集の復刻版より）。
༶ 出典: Wikimedia Commons（パブリックドメイン）
࿐༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶༄ ༶/
フルーロンの主な役割は、次のようなものです。
- 段落と段落のあいだに置いて、装飾的に区切る
- リストやセクションの境界を示す
- 段落冒頭の字下げで生まれる空白を埋める
- 純粋な装飾として、ページに彩りを添える
⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱
歴史 ― 金属活字としてのフルーロン
装飾としての花のモチーフ自体は古くからありますが、正式な活字（グリフ）としてのフルーロンが確立したのは16世紀とされています。
ポイントは、フルーロンが文字や数字とまったく同じ作り方で生まれたという点です。1つひとつが金属の活字（sort）として鋳造され、本文の文字と並べて版に組み込めました。あらかじめ装飾を彫っておけば、印刷のたびに飾りを描き起こす手間が省けます。さらに同じ活字を複数用意できるので、フルーロンを反復させて連続したボーダー（装飾罫）を組むことができました。今でいうCSSの繰り返しパターンに近い発想です。
/༶༻༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶༺༶/
༶ 扉の左右に、小さなフルーロンを縦に反復させた装飾罫が組まれている（1611年）。
༶ 出典: Wikimedia Commons（パブリックドメイン）
/༶༻༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶༺༶/
「The Fleuron」という雑誌
フルーロンの名を冠した最も有名な刊行物が、イギリスのタイポグラフィ専門誌 『The Fleuron』 です。1923年から1930年にかけて全7巻が刊行され、スタンリー・モリスンらが設立した「フルーロン協会」の機関誌でした。各巻には活字見本や図版、書物芸術に関する論文が惜しみなく収められ、今日でもタイポグラフィ史の重要資料とされています。
࿐ ❧ ❀ ❦ ⊰⟡⊱ ❦ ❀ ❦ ⊰⟡⊱ ❦ ❀ ❦ ⊰⟡⊱ ❦ ❀ ❦ ⊰⟡⊱ ❦ ❀ ❦ ⊰⟡⊱ ❦ ❀ ❦ ⊰⟡⊱ ❦ ❀ ☙ ࿐
Unicodeのフルーロン
うれしいことに、フルーロンの一部は Unicodeに収録されており、フォントさえ対応していればHTML/CSSでそのまま使えます。合計で30種類ほどが符号化されています。内訳は、Dingbats・Miscellaneous Symbolsブロックの「floral hearts（花形ハート）」が3種、旧Wingdings由来でOrnamental Dingbatsブロックに入ったものが24種、そのほか古語向けが3種です。
実務でまず覚えておきたいのは、次の3つの「花形ハート」です。
| 文字 | コードポイント | 名称 |
|---|---|---|
| ❦ | U+2766 | FLORAL HEART |
| ❧ | U+2767 | ROTATED FLORAL HEART BULLET |
| ☙ | U+2619 | REVERSED ROTATED FLORAL HEART BULLET |
❧ と ☙ は左右が反転したペアになっているので、区切りの両端に置くと葉が内側を向く、本来の使い方を再現できます。
⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜ ❀ ⚜ ❖ ⚜
Webでの使い方
ここからが実務向けの本題です。フルーロンをWebで使う方法を、簡単な順に紹介します。
1. コピペで使えるセクション区切り
まずは手早く使えるサンプルです。左右対称（中央に焦点）を意識すると、それらしくまとまります。そのままコピーして見出しの下などに置いてみてください。
☙ ───────── ❦ ───────── ❧
✽ ✾ ✿ ❀ ❁ ❀ ✿ ✾ ✽
⧼ ⊰ ❀ ⊱ ⧫ ⊰ ❀ ⊱ ⧫ ⊰ ❀ ⊱ ⧽
⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱
࿐ ❧ ❀ ❦ ❀ ☙ ࿐
ユニット（例: ⊰⟡⊱）を増減すれば、見出し用に短く、章区切り用に長く、と幅を自由に調整できます。
2. CSSの擬似要素で出力する
本文に直接書き込むより、CSSの擬似要素として出力したほうが、HTMLが汚れず管理もしやすくなります。
.section-rule::before {
content: "⧼ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧫ ⊰⟡⊱ ⧽";
display: block;
text-align: center;
letter-spacing: 0.12em;
font-family: Georgia, "Times New Roman", serif;
color: currentColor;
}
セリフ体のフォントを指定すると、文字の太細のコントラストが出て、より「活字装飾」らしい見た目になります。
3. 字幅とフォントの注意点
実装上、つまずきやすいポイントが2つあります。
1つめは 字幅 です。❀ ✿ などの花記号は East Asian Width が「Ambiguous（曖昧）」に分類されるため、日本語フォントが効く環境では全角（2文字分）扱いになり、等幅で揃えたつもりの罫線がずれることがあります。横幅をきっちり揃えたいときは、半角扱いが安定している ─ や ⸺ を連結部に使うか、欧文フォントを明示的に当てると崩れにくくなります。
2つめは フォント依存 です。補助多言語面の記号や宗教記号は、本文セリフ体だと豆腐（□）として表示される環境があります。確実に表示させたいなら、上のサンプルで使った範囲（花形ハート、ダンバット、基本的な幾何記号）に絞るのが安全です。本番に入れる前に、対象ブラウザと実際のフォントで必ず確認しましょう。
4. 本格派 ― OpenTypeの ornament() を使う
「Unicodeに無い、フォント固有のフルーロン」を使いたい場合は、OpenTypeの装飾機能を呼び出す方法があります。@font-feature-values で人間が読みやすい名前を定義し、font-variant-alternates の ornament() 関数から参照する、という流れです。
/* フォントが持つ装飾字形に名前を付ける */
@font-feature-values "Your OpenType Font" {
@ornaments {
leaf: 1; /* 1 はフォントが装飾字形に割り当てたインデックス */
}
}
.divider {
font-family: "Your OpenType Font";
/* 上で定義した名前で装飾字形を呼び出す */
font-variant-alternates: ornament(leaf);
}
この仕組みのよいところは、フォントが内部で使っているインデックス番号を知らなくても、付けた名前（leaf など）でCSS側から装飾字形を有効にできる点です。font-variant-alternates は2023年以降主要な主要ブラウザで利用可能になっており、対応フォントさえあれば実用段階にあります。ただし、その装飾字形を持つOpenTypeフォントが前提になる点には注意してください。
⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡ ⧫ ⊰⟡⊱ ⧫ ⟡
まとめ
- フルーロンは、花や葉を様式化した装飾用の活字。語源は古フランス語の floron（花）。
- 正式なグリフとしては16世紀に確立し、金属活字として鋳造され、反復させてボーダーを組んだ。
- 代表は蔦の葉「ヘデラ」。Unicodeには
❦ ❧ ☙をはじめ約30種が収録されている。 - Webでは、擬似要素の
contentに入れるのが手軽。横幅のずれとフォント依存にだけ注意。 - フォント固有の装飾字形を使うなら、
@font-feature-values＋font-variant-alternates: ornament()が本筋。
ただの区切り線をフルーロンに置き換えるだけで、ページの印象はぐっと変わります。まずはコピペのサンプルから試してみてください。
画像クレジット
本記事の画像はいずれもWikimedia Commonsで公開されているパブリックドメインの素材です。
- アザミのフルーロン: A complex Fleuron with thistle, 1870 American Edition. Facsimile. Poems, Chiefly in the Scottish Dialect（Public Domain Mark 1.0）
- 扉ページ: Michael Praetorius, Missodia Sionia (1611)（パブリックドメイン）
※ いずれもWikimedia Commonsの該当ファイルページから取得できます。ブログに掲載する際は、画像を自サイトにアップロードして配信する（ホットリンクを避ける）ことを推奨します。