*

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

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

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

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

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

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

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

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

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

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

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

著者について

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

フォローはこちら

       

       
大滝鍾乳洞
トロッコに乗って鍾乳洞へ!東海地方最大級の岐阜県「大滝鍾乳洞」を探索

岐阜県郡上市にある東海地方最大級という鍾乳洞「大滝鍾乳洞」へ行

ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

→もっと見る