Styledex

デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。

曲線あしらいの見出し（エディトリアル区切り）

様式名: エレガント・エディトリアル / あしらい

あしらい曲線見出し明朝セクション区切りエディトリアル
⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

  • 直線の下線ではなく、見出しの脇を通り抜ける緩やかな曲線を1本だけ添える。誌面デザインが持つ『手が入った』温度を、装飾を増やさずに出せる
  • 曲線が見出しの真下ではなく『脇を通す』軌道を取ることで、下線的な機能装飾ではなく余白の一部として見える。真下に置くと即座に強調下線に見えてしまい様式が崩れる
  • eyebrow（章立てラベル）とセットで使うことで『雑誌の柱』らしい編集の文脈が出る。単体の曲線だけだと単なる飾り線に見える
  • 曲線の不透明度を上げすぎると『間違って引いた線』に見える。.5前後が『添えた』と感じる上限で、05_editorial_hero の透かし文字（.05）とは逆に、線は多少はっきり見せてよい

実装メモ — 踏んだ罠

  • 曲線は SVG path の3次ベジェ（C）1本のみ。stroke-width 1.1px・opacity .5・マルーン#7a1f2b。viewBox に preserveAspectRatio="none" を指定しないと、コンテナ幅が変わったときに曲線の弧の高さが伸縮せず見出しと噛み合わなくなる
  • SVG を見出しの絶対配置で重ねる際、position:absolute の親に position:relative が無いとページ全体を基準に浮いてしまう罠を最初に踏んだ。.flourish-wrap に relative を明示
  • 見出し文字と曲線が交差する箇所は z-index で見出し側を上に固定（h2 に z-index:1、svgに z-index:0）。無指定だとDOM順で svg が後勝ちし文字に重なって読みにくくなる
  • 紙の粒子背景は 05_editorial_hero と同一の feTurbulence data URI を流用。04様式の地はこの1パターンに統一してよく、パーツごとに作り直す必要はない
  • 和文の行長は em で確保（p.lead は max-width:24em）。ch は半角基準で和文には合わないため使わない

使いどころ / 使ってはいけない場面

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
見出し(通常部分)#1c263a#f4efe4#f4efe413.20:1AA 合格
見出し(em・差し色)#7a1f2b#f4efe4#f4efe48.90:1AA 合格
eyebrow#7a1f2b#f4efe4#f4efe48.90:1AA 合格
本文(lead)#3a3226#f4efe4#f4efe411.00:1AA 合格

アクセシビリティ

スマホへの落とし方

ブラウザ対応

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>曲線あしらいの見出し デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  min-height:340px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 50% 40% at 82% 12%, rgba(30,40,64,.06), transparent 60%),
    #f4efe4;
}
/* 紙の粒子。05_editorial_hero と同じ手法（feTurbulence・暖色・低opacity） */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.inner{position:relative;z-index:1;padding:38px 46px 34px}
.eyebrow{
  display:inline-block;font-family:system-ui,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.3em;color:#7a1f2b;
}
.flourish-wrap{position:relative;margin-top:6px}
/* 曲線あしらい：見出しの下ではなく「脇を通す」1本。直線の下線だと様式04ではなくフラットに寄る */
svg.flourish{
  position:absolute;left:-28px;top:8px;width:calc(100% + 56px);height:64px;
  overflow:visible;pointer-events:none;z-index:0;
}
h2{
  position:relative;z-index:1;margin-top:14px;font-size:clamp(24px,5vw,36px);font-weight:600;
  color:#1c263a;line-height:1.55;letter-spacing:.01em;
}
h2 em{font-style:italic;color:#7a1f2b}
/* 和文の行長は em で取る（ch は半角基準で和文には合わない） */
p.lead{position:relative;z-index:1;margin-top:20px;max-width:24em;font-size:13px;line-height:2;color:#3a3226}
</style></head><body>
<div class="inner">
  <span class="eyebrow">CHAPTER — 曲線のあしらい</span>
  <div class="flourish-wrap">
    <svg class="flourish" viewBox="0 0 520 64" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,46 C 140,4 260,58 520,18" fill="none" stroke="#7a1f2b" stroke-width="1.1" opacity=".5"/>
    </svg>
    <h2>言葉の余白に、<br><em>曲線</em>をひとつ、添える。</h2>
  </div>
  <p class="lead">直線の下線ではなく、緩やかな曲線を1本だけ忍ばせる。飾りすぎずに、誌面らしい「手が入った」温度を足す。</p>
</div>
</body></html>
出典・参考: STYLE_AXIS.md の様式定義（明朝系＋曲線あしらい）と伊藤翔真の手癖（明朝見出し・マルーン差し色・大判の有機的な色面ではなく線としての曲線）に基づく自作実装。05_editorial_hero がヒーロー部位だったため、今回は未着手だった『あしらい』部位を埋めた