固定フッターメニューを作る方法
固定フッターメニューを作る方法を紹介します。本記事では、HTMLとCSSを使って、画面下部に固定表示されるシンプルなフッターメニューを作成します。ページをスクロールしてもメニューが下部に残るため、主要ページへの移動を分かりやすくできます。
このサンプルコードでは、position:fixed; を使ってフッターメニューを画面下部に固定します。ホーム、検索、お気に入り、通知、マイページのような基本メニューを横並びで配置し、スマホ向けのナビゲーションとして使いやすい形にしています。
固定フッターメニューは、スマホ向けサイト、アプリ風レイアウト、会員サイト、ECサイト、ブログなどでよく利用されます。常に表示しておきたいメニューを下部に配置したい場合に便利な基本レイアウトです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>固定フッターメニューを作る方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページ全体 -->
<div class="fixed-footer-menu_wrap">
<!-- タイトル -->
<h1 class="fixed-footer-menu_title">
固定フッターメニュー
</h1>
<!-- コンテンツ -->
<main class="fixed-footer-menu_content">
<p>スクロールしてもフッターメニューは画面下部に固定表示されます。</p>
</main>
</div>
<!-- フッターメニュー -->
<nav class="fixed-footer-menu_nav">
<a href="#" class="fixed-footer-menu_item">
<!-- ホームアイコン -->
<svg viewBox="0 0 24 24" fill="none">
<path d="M3 10L12 3L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>ホーム</span>
</a>
<a href="#" class="fixed-footer-menu_item">
<!-- 検索アイコン -->
<svg viewBox="0 0 24 24" fill="none">
<circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"/>
<path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>検索</span>
</a>
<a href="#" class="fixed-footer-menu_item">
<!-- お気に入りアイコン -->
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
<span>お気に入り</span>
</a>
<a href="#" class="fixed-footer-menu_item">
<!-- 通知アイコン -->
<svg viewBox="0 0 24 24" fill="none">
<path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>通知</span>
</a>
<a href="#" class="fixed-footer-menu_item">
<!-- マイページアイコン -->
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
<path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>マイページ</span>
</a>
</nav>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにフッターメニューを配置し、CSSで画面下部へ固定表示するレイアウトを作成します。アイコンはHTMLへ直接記述したSVGを使用しています。
sample/
├── index.html
└── style.css
2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。フッターメニューを画面下部へ固定表示するには、position:fixed;、bottom:0;、width:100%; を指定します。
コメント