パーツ番号 03-13-07 ・ CSSのみ

ツールバー風アイコングループ

区切り線でグループ分けした編集ツールバー風のアイコン列です。WordPressブロックエディタのカスタムツールバーの見た目見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-13-07-group">
          <a href="#" onclick="return false" aria-label="太字">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4h7a4 4 0 010 8H6zM6 12h8a4 4 0 010 8H6z"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="斜体">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 4h6M6 20h6M14 4L10 20"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="下線">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4v7a6 6 0 0012 0V4M4 20h16"/></svg>
          </a>
        </div>
        <span class="d03-13-07-sep"></span>
        <div class="d03-13-07-group">
          <a href="#" onclick="return false" aria-label="左寄せ">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h10M4 18h14"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="中央寄せ">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M5 18h14"/></svg>
          </a>
        </div>

CSS

.prev.d03-13-07{gap:10px}
        .d03-13-07-group{
          display:flex;gap:4px;
          background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:4px;
        }
        .d03-13-07-group a{
          display:flex;align-items:center;justify-content:center;
          width:32px;height:32px;border-radius:6px;
          color:#334155;text-decoration:none;
        }
        .d03-13-07-sep{width:1px;height:26px;background:#e2e8f0}

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