パーツ番号 02-13-01 ・ CSSのみ

縦書き見出し×横書き本文レイアウト

縦書きの大見出しと横書き本文を左右に並べた組み合わせレイアウトです。WordPressの企業サイトトップやブランドストーリーページの導入部に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-01-wrap">
          <div class="d02-13-01-vh">和の心を、現代へ。</div>
          <div class="d02-13-01-body">
            <p>伝統と革新が交わる場所で、私たちは新しいものづくりに挑戦し続けています。長く愛される価値を、丁寧に届けます。</p>
          </div>
        </div>

CSS

.d02-13-01{background:#fff;align-items:center}
        .d02-13-01-wrap{display:flex;gap:20px;align-items:stretch;max-width:320px}
        .d02-13-01-vh{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:20px;font-weight:700;letter-spacing:.1em;color:#1a1d24;border-right:2px solid #1a1d24;padding-right:14px}
        .d02-13-01-body{display:flex;align-items:center}
        .d02-13-01-body p{margin:0;font-size:12.5px;line-height:1.9;color:#64748b}

クラス名 .d02-13-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。