中央に大きなボタンがある固定フッターメニューを作る方法
中央に大きなボタンがある固定フッターメニューを作る方法を紹介します。本記事では、HTMLとCSSを使って、画面下部へ固定表示するフッターメニューの中央に、ひと回り大きなボタンを配置するレイアウトを作成します。通常のフッターメニューよりも中央のボタンを目立たせられるため、検索や新規作成など、よく利用する機能を強調したい場合に適したデザインです。
このサンプルコードでは、中央のボタンだけサイズを大きくし、フッターメニューより少し上へ浮かせたデザインを実装します。左右には通常サイズのメニューを配置し、中央ボタンだけを視覚的に強調できるため、スマホアプリのような操作性を再現できます。シンプルなHTMLとCSSだけで実装できるため、既存サイトへ導入しやすい構成です。
このようなレイアウトは、スマホ向けサイト、アプリ風Webサイト、会員サービス、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="large-center-button-footer-menu_wrap">
<!-- タイトル -->
<h1 class="large-center-button-footer-menu_title">
中央に大きなボタンがある固定フッターメニュー
</h1>
<!-- コンテンツ -->
<main class="large-center-button-footer-menu_content">
<p>中央に大きな検索ボタンを配置した固定フッターメニューのサンプルです。</p>
</main>
</div>
<!-- フッターメニュー -->
<nav class="large-center-button-footer-menu_nav">
<a href="#" class="large-center-button-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="large-center-button-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>
<div class="large-center-button-footer-menu_center-wrap">
<a href="#" class="large-center-button-footer-menu_center">
<!-- 検索アイコン -->
<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>
</a>
<span>検索</span>
</div>
<a href="#" class="large-center-button-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="large-center-button-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で画面下部へ固定表示するレイアウトと、中央に大きなボタンを配置するデザインを設定します。中央ボタンは通常のメニューより大きく表示し、上方向へ少し浮かせることで、目立つデザインを実現しています。
sample/
├── index.html
└── style.css
2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。フッターメニューは position:fixed; で画面下部へ固定し、中央ボタンはサイズを大きくして margin-top を利用して上方向へ配置することで、浮き上がったようなデザインになります。
コメント