*

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

公開日: : 最終更新日: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

おすすめトピックス

関連記事

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

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

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

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

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

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

著者について

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

フォローはこちら

       

       
スーパーラウンジ
新千歳空港のスーパーラウンジに入るための条件、中には何があるのか?

空港には飛行機のフライト前の空いた時間に活用できる特別な待合室

新千歳空港からも近い苫小牧市にある馬と美しい公園のノーザンホースパーク

北海道苫小牧市にあるノーザンホースパークは新千歳空港からも車で

北一条地下駐車場
大通公園の駐車場として使える北一条地下駐車場の入口はどこか?

札幌の大通公園と言えば札幌の代名詞とも言える特殊公園です。長さ

旭川で本格ふわふわかき氷ならお洒落で落ち着くカフェ「ヒフミ(hifumi)」

北海道の旭川にとっても美味しい本格かき氷のお店があるという口コ

本格ネパールカレーの栗山町「earth」はお洒落で入りやすくてナンカレーが美味

北海道の栗山町にある earth(アース)は本格ネパールカレー

→もっと見る