*

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

公開日: : 最終更新日:2016/12/04 ノウハウ

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブデザインが理想です。

スマートフォンサイトでは表示できる情報量が少ない為に、パソコン用サイトにあるようなグローバルナビゲーションは通常上にありますがスマートフォンサイトでは下部(フッター)にある事が多いです。上部にある場合はメニューボタンを押さないと出てこないようになっている事がほとんどです。

そこで、今回の本題はスマートフォンサイトのフッターメニューの作り方です。

スマホ用フッターメニュー

スマートフォンサイトのフッターメニューとは主にこのような形式です。よく見かけるのではないでしょうか。リンクを押しやすいように高さも十分に取る事が重要です。

html5 部分から見てみましょう。

html部分

<nav>
<ul>
   <li>ホーム</li>
   <li>製品情報</li>
   <li>お問合せ</li>
   <li>通信販売</li>
   <li>このページの先頭へ</li>
</ul>
</nav>

スマートフォンサイトのフッターメニューの基本はこれです。リンクするための a タグはわかりやすくする為に省略しています。ul li タグのリストでメニューを構成しています。パソコン用サイトと同様の手法ですね。ここから css でスマートフォン用に装飾します。

CSS部分

nav,
nav ul{
   width:100%;
   padding:0px;
}

nav ul li{
   width:50%;
   float:left;
   list-style-type:none;
   border-right:1px solid #ccc;
   border-bottom:1px solid #ccc;
   box-sizing: border-box;
   background:url("URL") no-repeat 5px 50%;
}

nav ul li:nth-child(even){
   border-right:0px;
}

nav ul li:last-child{
   width:100%;
}

nav ul li a{
   display:block;
   padding:13px 0px 13px 30px;
   color:#fff;
}

スマートフォンサイトのフッターメニューを作る上ではまって困る所は、メニューがはみ出ちゃって横並びにできないという所だと思います。その原因は親要素の横幅が100%、li の横幅は50%としているので1pxの線を入れるだけでも100%を越えてしまう為です。

だからといって li の横幅を49%にすると画面にピッタリはまりません。ここで肝となるのは「box-sizing: border-box;」という CSS プロパティです。これを指定すると線と余白(padding)を横幅に含めなくなります。つまり線を入れても横幅50%に収まりはみ出ずに画面にピッタリと横並びにできるというわけです。

ちなみにモバイル向けブラウザ iPhone での Safari、Android 用 Chrome で対応しているので問題なく使えます。

補足説明

フッターメニューの項目数が奇数になる場合は last-child という最後の要素を指定する擬似クラスで、最後の li だけ幅を100%にする事で画面いっぱいの横長にできます。

「nav ul li:nth-child(even)」という所では、li の偶数番目の要素だけ右側の線をなしにしています。真ん中の線だけあれば十分ですから。

メニューの高さを設定しているのは「nav ul li a」の中の padding です。上と下の padding の高さを増やすとメニューの高さが広がります。

「nav ul li」の background で指定している背景画像は左側にあるリストマークです。リストマークがある方がメニューとして認知しやすいですし、わかりやすいです。

関連記事

プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】
近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォ

上部広告

  • Pocket

おすすめトピックス

関連記事

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

html5 audio
ChromeではHTML5のaudioタグは1ページに6つまでしか使えないみたいだよ

HTML5 から新しく追加された要素の audio タグはプラグイン不要でブラウザ上で音声を再生する事ができます。従来ではウェブサイトで音声を再生させようとする場合、Quicktime や Windows Media P […]

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
つるやパンの2号店!ふわふわまるい食パン専門店が長浜駅前にオープン

つるやパンと言えば聞いたことがある方も多いかもしれません。つる

コンビニ受け取り
不在がちでもAmazonの注文の品をコンビニで受け取る事ができます【ファミリーマート編】

ネットショッピングは今では物を購入する手段としてメジャーな存在となりま

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

→もっと見る