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

SNSアイコン横並びナビ

SNSアイコンだけをシンプルに横一列に並べた静止ナビです。WordPressサイトのフッターに置くソーシャルリンク集の定番見た目です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-09-nav">
          <a href="#" onclick="return false" aria-label="X">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M18.9 3H22l-7.6 8.6L23 21h-7l-5.5-6.6L4 21H1l8.1-9.2L1 3h7.2l5 6z"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="Facebook">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9c0-.6.4-1 1-1z"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="Instagram">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="YouTube">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="2.5" y="6" width="19" height="12" rx="3"/><path d="M10.5 9.5l5 2.5-5 2.5z" fill="currentColor" stroke="none"/></svg>
          </a>
        </nav>

CSS

.d03-13-09-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
        .d03-13-09-nav a{
          display:flex;align-items:center;justify-content:center;
          width:36px;height:36px;
          color:#1f2937;text-decoration:none;
        }

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