SNSリンク付きドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

SNSリンク付きドロワーメニューを作る方法

SNSリンク付きドロワーメニューを作る方法を紹介します。このサンプルでは、通常のメニュー項目に加えて、X（旧Twitter）、Instagram、YouTube、FacebookなどのSNSリンクをドロワーメニュー内へまとめて配置するレイアウトをHTML・CSS・JavaScriptで実装します。「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、サイト内メニューとSNSリンクをまとめて確認できます。

SNSへの導線を分かりやすく配置することで、サイト訪問者が公式アカウントへアクセスしやすくなります。企業サイト、ブログ、ポートフォリオサイト、ECサイトなど、SNSを活用しているWebサイトで利用しやすい構成です。

SNSアイコン、SNS名、リンク先URL、メニュー項目、配色、ドロワーメニューの横幅、余白、角丸、影、表示アニメーションの速度などを自由に変更できます。画面幅640px以下では画面幅いっぱいに表示されるため、スマートフォン・タブレット・PCでも快適に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

「メニューを開く」をクリックすると、通常のメニュー項目とLINE、Facebook、X、Instagramへのリンクをまとめたドロワーメニューが表示されます。「閉じる」ボタンまたは背景部分をクリックすると閉じます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">

<head>

  <!-- 文字コードをUTF-8に設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンで適切な表示サイズにする -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ブラウザのタブに表示するページタイトル -->
  <title>SNSリンク付きドロワーメニュー</title>

  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- ページの案内エリア -->
  <main class="sns-links-drawer-menu_wrap">

    <!-- 案内エリアのタイトル -->
    <div class="sns-links-drawer-menu_title">
      SNSリンク付きドロワーメニュー
    </div>

    <!-- ドロワーメニューの説明文 -->
    <p class="sns-links-drawer-menu_text">
      通常のメニュー項目とSNSリンクをまとめて表示できます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="sns-links-drawer-menu_open"
      type="button"
      data-sns-links-drawer-open>
      メニューを開く
    </button>

  </main>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="sns-links-drawer-menu_overlay"
    data-sns-links-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <aside
      class="sns-links-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="sns-links-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="sns-links-drawer-menu_drawer-title"
        id="sns-links-drawer-menu-title">
        メニュー
      </div>

      <!-- 通常のメニューリンク一覧 -->
      <nav
        class="sns-links-drawer-menu_nav"
        aria-label="メインメニュー">

        <!--
          href属性の#をホームページのURLへ変更する
          「ホーム」を表示したいメニュー名へ変更できる
        -->
        <a href="#">ホーム</a>

        <!--
          href属性の#をサービスページのURLへ変更する
          「サービス」を表示したいメニュー名へ変更できる
        -->
        <a href="#">サービス</a>

        <!--
          href属性の#をお知らせページのURLへ変更する
          「お知らせ」を表示したいメニュー名へ変更できる
        -->
        <a href="#">お知らせ</a>

        <!--
          href属性の#をお問い合わせページのURLへ変更する
          「お問い合わせ」を表示したいメニュー名へ変更できる
        -->
        <a href="#">お問い合わせ</a>

      </nav>

      <!-- SNSリンク一覧 -->
      <div class="sns-links-drawer-menu_sns">

        <!-- SNSリンク一覧の見出し -->
        <div class="sns-links-drawer-menu_sns-title">
          公式SNS
        </div>

        <!--
          href属性の#をLINEのURLへ変更する
          src属性はLINEアイコンの画像URL
          alt属性には画像の内容が分かる「LINE」を指定する
          「LINE」を表示したいリンク名へ変更できる
        -->
        <a href="#" aria-label="LINEを開く">
          <img
            src="http://maruhinoto.com/wp-content/uploads/2026/07/Line.png"
            alt="LINE">
          <span>LINE</span>
        </a>

        <!--
          href属性の#をFacebookのURLへ変更する
          src属性はFacebookアイコンの画像URL
          alt属性には画像の内容が分かる「Facebook」を指定する
          「Facebook」を表示したいリンク名へ変更できる
        -->
        <a href="#" aria-label="Facebookを開く">
          <img
            src="http://maruhinoto.com/wp-content/uploads/2026/07/facebook.png"
            alt="Facebook">
          <span>Facebook</span>
        </a>

        <!--
          href属性の#をXのURLへ変更する
          src属性はXアイコンの画像URL
          alt属性には画像の内容が分かる「X」を指定する
          「X」を表示したいリンク名へ変更できる
        -->
        <a href="#" aria-label="Xを開く">
          <img
            src="http://maruhinoto.com/wp-content/uploads/2026/07/X.png"
            alt="X">
          <span>X</span>
        </a>

        <!--
          href属性の#をInstagramのURLへ変更する
          src属性はInstagramアイコンの画像URL
          alt属性には画像の内容が分かる「Instagram」を指定する
          「Instagram」を表示したいリンク名へ変更できる
        -->
        <a href="#" aria-label="Instagramを開く">
          <img
            src="http://maruhinoto.com/wp-content/uploads/2026/07/instagram.png"
            alt="Instagram">
          <span>Instagram</span>
        </a>

      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="sns-links-drawer-menu_close"
        type="button"
        data-sns-links-drawer-close>
        閉じる
      </button>

    </aside>

  </div>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>

</body>

</html>

/* =========================================
   共通設定
========================================= */

/* すべての要素と疑似要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ内のボタン */
button{
  font:inherit; /* 親要素と同じフォントを使用 */
}

/* =========================================
   案内エリア
========================================= */

/* ページの案内エリア */
.sns-links-drawer-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小表示 */
  max-width:700px; /* 最大横幅。値を大きくすると案内エリアが広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 案内エリアの枠線 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 案内エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
}

/* 案内エリアのタイトル */
.sns-links-drawer-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#1f2937; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 案内エリアの説明文 */
.sns-links-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* =========================================
   開くボタン
========================================= */

/* ドロワーメニューを開くボタン */
.sns-links-drawer-menu_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}

/* 開くボタンへマウスを重ねた状態 */
.sns-links-drawer-menu_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* =========================================
   背景オーバーレイ
========================================= */

/* ドロワーメニュー表示時の背景 */
.sns-links-drawer-menu_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:stretch; /* ドロワーメニューを画面の高さへ伸ばす */
  justify-content:flex-start; /* ドロワーメニューを画面左側へ配置 */
  background:rgba(0,0,0,.45); /* 半透明の背景色。.45を大きくすると暗くなる */
}

/* ドロワーメニューの表示状態 */
.sns-links-drawer-menu_overlay.is-active{
  display:flex; /* 表示用クラスが付いたときに表示 */
}

/* =========================================
   ドロワーメニュー本体
========================================= */

/* ドロワーメニュー本体 */
.sns-links-drawer-menu_drawer{
  width:340px; /* ドロワーメニューの横幅。値を大きくすると広がる */
  max-width:90%; /* 小さい画面で画面幅を超えない最大横幅 */
  height:100%; /* ブラウザ画面と同じ高さにする */
  padding:24px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示 */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:10px 0 30px rgba(0,0,0,.18); /* ドロワーメニュー右側の影 */
  animation:sns-links-drawer-menu-slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくすると遅くなる */
}

/* ドロワーメニューのタイトル */
.sns-links-drawer-menu_drawer-title{
  margin:0 0 20px; /* 下側20pxの余白 */
  color:#1f2937; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* =========================================
   通常のメニューリンク
========================================= */

/* 通常のメニューリンクを並べるエリア */
.sns-links-drawer-menu_nav{
  display:flex; /* メニューリンクを並べる */
  flex-direction:column; /* メニューリンクを縦方向へ配置 */
  gap:8px; /* メニューリンク同士の間隔 */
}

/* 通常のメニューリンク */
.sns-links-drawer-menu_nav a{
  display:block; /* リンク全体をクリックできるようにする */
  min-height:44px; /* タップしやすい最小高さ */
  padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  border-radius:8px; /* リンクの角丸 */
  color:#1f2937; /* リンクの文字色 */
  font-size:16px; /* リンクの文字サイズ */
  font-weight:600; /* リンク文字の太さ */
  line-height:1.5; /* リンク文字の行間 */
  text-align:left; /* リンク文字を左揃え */
  text-decoration:none; /* リンクの下線を削除 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 通常のメニューリンクへマウスを重ねた状態 */
.sns-links-drawer-menu_nav a:hover{
  background:#f1f5f9; /* ホバー時の背景色 */
}

/* =========================================
   SNSリンク
========================================= */

/* SNSリンク一覧 */
.sns-links-drawer-menu_sns{
  display:grid; /* SNSリンクを縦方向へ並べる */
  gap:12px; /* SNSリンク同士の間隔 */
  margin:28px 0 0; /* 上側28pxの余白 */
  padding:20px 0 0; /* 上側20pxの内側余白 */
  border-top:1px solid #e5e7eb; /* 通常メニューとの区切り線 */
}

/* SNSリンク一覧の見出し */
.sns-links-drawer-menu_sns-title{
  margin:0 0 2px; /* 下側2pxの余白 */
  color:#64748b; /* 見出しの文字色 */
  font-size:14px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出し文字を太字にする */
  line-height:1.5; /* 見出しの行間 */
  text-align:left; /* 見出し文字を左揃え */
}

/* 各SNSリンク */
.sns-links-drawer-menu_sns a{
  display:flex; /* アイコンとSNS名を横並びにする */
  align-items:center; /* アイコンとSNS名を上下中央に揃える */
  gap:12px; /* アイコンとSNS名の間隔 */
  min-height:52px; /* タップしやすい最小高さ */
  padding:10px 14px; /* 上下10px・左右14pxの内側余白 */
  border:1px solid #e5e7eb; /* SNSリンクの枠線 */
  border-radius:10px; /* SNSリンクの角丸 */
  background:#ffffff; /* SNSリンクの背景色 */
  color:#1f2937; /* SNS名の文字色 */
  font-size:16px; /* SNS名の文字サイズ */
  font-weight:700; /* SNS名を太字にする */
  line-height:1.5; /* SNS名の行間 */
  text-decoration:none; /* リンクの下線を削除 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* SNSリンクへマウスを重ねた状態 */
.sns-links-drawer-menu_sns a:hover{
  background:#f8fafc; /* ホバー時の背景色 */
}

/* SNSアイコン画像 */
.sns-links-drawer-menu_sns img{
  display:block; /* 画像下部の余分な隙間を削除 */
  width:32px; /* アイコン画像の横幅。値を大きくすると画像が大きくなる */
  height:32px; /* アイコン画像の高さ。値を大きくすると画像が大きくなる */
  flex-shrink:0; /* 横幅が狭い場合でも画像を縮めない */
  object-fit:contain; /* 画像全体を縦横比を維持して表示 */
}

/* =========================================
   閉じるボタン
========================================= */

/* ドロワーメニューを閉じるボタン */
.sns-links-drawer-menu_close{
  width:100%; /* ドロワーメニューの横幅いっぱいに表示 */
  min-height:48px; /* タップしやすい最小高さ */
  margin:24px 0 0; /* 上側24pxの余白 */
  padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#1f2937; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 閉じるボタンへマウスを重ねた状態 */
.sns-links-drawer-menu_close:hover{
  background:#374151; /* ホバー時の背景色 */
}

/* =========================================
   表示アニメーション
========================================= */

@keyframes sns-links-drawer-menu-slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始 */
    transform:translateX(-100%); /* 画面左側の外から開始 */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:translateX(0); /* 元の位置へ移動 */
  }

}

/* =========================================
   スマートフォン対応
========================================= */

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
  }

  /* スマートフォン用の案内エリア */
  .sns-links-drawer-menu_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用の開くボタン */
  .sns-links-drawer-menu_open{
    width:100%; /* ボタンを案内エリアの横幅いっぱいに表示 */
  }

  /* スマートフォン用のドロワーメニュー */
  .sns-links-drawer-menu_drawer{
    width:100%; /* ドロワーメニューを画面幅いっぱいに表示 */
    max-width:100%; /* 最大横幅を画面幅に合わせる */
    padding:24px 20px; /* 内側余白を調整 */
  }

}

// ドロワーメニューを開くボタン
const snsLinksDrawerOpen=document.querySelector(
  "[data-sns-links-drawer-open]"
);

// ドロワーメニューを閉じるボタン
const snsLinksDrawerClose=document.querySelector(
  "[data-sns-links-drawer-close]"
);

// 背景オーバーレイ
const snsLinksDrawerOverlay=document.querySelector(
  "[data-sns-links-drawer-overlay]"
);

// =========================================
// ドロワーメニューを閉じる
// =========================================
function closeSnsLinksDrawer(){

  // 表示用クラスを削除して非表示にする
  snsLinksDrawerOverlay.classList.remove("is-active");

  // アクセシビリティ用の状態を非表示へ変更
  snsLinksDrawerOverlay.setAttribute(
    "aria-hidden",
    "true"
  );

}

// =========================================
// 開くボタンをクリック
// =========================================
snsLinksDrawerOpen.addEventListener("click",function(){

  // 表示用クラスを追加する
  snsLinksDrawerOverlay.classList.add("is-active");

  // アクセシビリティ用の状態を表示へ変更
  snsLinksDrawerOverlay.setAttribute(
    "aria-hidden",
    "false"
  );

});

// =========================================
// 閉じるボタンをクリック
// =========================================
snsLinksDrawerClose.addEventListener(
  "click",
  closeSnsLinksDrawer
);

// =========================================
// 背景クリックで閉じる
// =========================================
snsLinksDrawerOverlay.addEventListener(
  "click",
  function(event){

    // 背景部分をクリックした場合だけ閉じる
    if(event.target===snsLinksDrawerOverlay){

      closeSnsLinksDrawer();

    }

  }
);

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。通常のナビゲーションに加えて、LINE、Facebook、X、Instagramへのリンクをドロワーメニュー内へまとめて配置できるレイアウトです。HTMLでメニューとSNSリンクを配置し、CSSでレイアウトやデザインを整え、JavaScriptでドロワーメニューの開閉処理を行っています。

サイト内ページへの導線とSNSへの導線を1つのメニューへまとめられるため、企業サイト、ブログ、ポートフォリオ、ECサイトなど幅広いWebサイトで利用できます。SNSアイコン画像を変更するだけで、他のサービスにも簡単に対応できます。

メニュー項目、SNSリンク、リンク先URL、アイコン画像、配色、横幅、余白、角丸、影、背景の暗さ、表示アニメーションの速度などを自由に変更できます。画面幅640px以下では画面幅いっぱいに表示されるため、スマートフォン・タブレット・PCでも利用できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
ドロワーメニュー全体の構造、通常メニュー、SNSリンク、アイコン画像、開閉ボタンを配置しています。メニュー名、SNS名、リンク先URL、画像URLを自由に変更できます。

style.css
ページ全体、背景オーバーレイ、ドロワーメニュー、通常メニュー、SNSリンク、アイコン画像、ボタン、表示アニメーション、レスポンシブ表示を設定しています。色、余白、横幅、角丸、影などのデザインを変更できます。

script.js
「メニューを開く」ボタン、「閉じる」ボタン、背景クリックによるドロワーメニューの開閉処理を行っています。

設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを同じ階層へ配置します。sample/index.htmlをブラウザで開き、「メニューを開く」をクリックすると通常メニューとSNSリンクをまとめたドロワーメニューを確認できます。

カスタマイズできる内容
index.htmlではメニュー項目、SNS名、リンク先URL、アイコン画像URL、ボタンの文字を変更できます。SNSリンクは同じ形式のaタグを追加・削除するだけで自由に増減できます。

style.cssでは背景色、文字色、ボタン色、ドロワーメニューの横幅、余白、角丸、影、SNSリンクのデザイン、背景の暗さ、アニメーション速度を変更できます。

script.jsではドロワーメニューを開閉する処理や背景クリックで閉じる動作を変更できます。

数値調整
style.cssのwidth:340px;はドロワーメニューの横幅です。padding:24px;は内側余白、gap:12px;はSNSリンク同士の間隔です。background:rgba(0,0,0,.45);の.45は背景の暗さを表し、値を大きくすると暗く、小さくすると背景が透けます。animation:sns-links-drawer-menu-slide .35s ease forwards;の.35sは表示アニメーション時間です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

レスポンシブ対応
style.cssではwidth:100%、max-width:100%、overflow-y:auto、@media screen and (max-width:640px)を使用しています。スマートフォンではドロワーメニューを画面幅いっぱいに表示し、開くボタンも横幅いっぱいへ広げています。タブレット・PCでも画面サイズに合わせて快適に利用できます。