th_PAK89_harisenbon20140719

BootstrapのNavbarメニューがスマホでボタン化されちゃうのを防ぐ方法!

 
どうもpei(@pei_babo)です。

ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。
画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。

各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。

今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Navbarの動きをこう変えたい!

前述のとおり、BootstrapのNavbarのメニューは画面サイズが小さくなると全て表示しきれない関係上、下記のようにボタン化されますね。

 
  PCでの表示
01_BootstrapのNavbarの使い方デモ

  スマホでの表示
03_BootstrapのNavbarの使い方デモ

 
とても嬉しい機能ですが、例えばリンクが一つしかない場合などはボタン化されると逆にユーザビリティが低下しそうですよね。
ですので、この機能をスマホでの表示でも下記のようにボタン化せずにそのままのリンクになるようにしたいのです。

 
  スマホでもボタン化されない!
05_BootstrapのNavbarの使い方デモ

 

スマホでもボタン化させないCSSコード

CSSコードでちょっと上書きするだけで実装可能ですので、四の五の言わずにコードを書いていきます。

このコードをBootstrapのCSSより後ろで読みこめば大丈夫だと思います。
いちおうデフォルトの動きと今回の対応をしたデモページを用意しましたので、ブラウザの画面サイズを変更しながら確認してみてくださいね。

 

まとめ

ノンデザイナーな私やみなさんはBootstrapの素晴らしい恩恵を受けながら、ちょっとずつ自分なりにカスタマイズしていくとどんどんWeb制作が楽しくなりますよね。
今後もちょっとしたBootstrapカスタマイズtipsも投稿していければと思っていますのでよろしくです。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA