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

縦書き氏名・肩書きの名刺風プロフィールカード

丸いプロフィール写真の横に、氏名と肩書きを縦書きで並べた名刺のようなカード見本です。WordPressの会社概要ページや代表挨拶コーナーのプロフィール表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-11-card">
          <div class="d02-13-11-photo"></div>
          <div class="d02-13-11-info">
            <p class="d02-13-11-name">山田 花子</p>
            <p class="d02-13-11-role">代表取締役 / デザイナー</p>
          </div>
        </div>

CSS

.d02-13-11{background:#fdfaf5}
        .d02-13-11-card{display:flex;flex-direction:row-reverse;align-items:center;gap:16px;background:#fff;border:1px solid #eee6d8;border-radius:10px;padding:18px 22px;box-shadow:0 2px 8px rgba(30,20,0,.06)}
        .d02-13-11-photo{width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#f4a261,#e76f51)}
        .d02-13-11-info{display:flex;flex-direction:row-reverse;gap:10px;align-items:stretch}
        .d02-13-11-name{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:18px;font-weight:700;letter-spacing:.15em;color:#2b2b2b;margin:0}
        .d02-13-11-role{writing-mode:vertical-rl;text-orientation:upright;font-size:10.5px;letter-spacing:.1em;color:#a8763e;margin:0}

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