カテゴリー:
Rails
タグ:
 メモ Bootstrap Rails4

このエントリーをはてなブックマークに追加
更新日時:
2014年04月28日(月)
作成日時:
2014年04月28日(月)

前の記事 / 次の記事

※この記事は作成途中です

Rails4でbootstrap3を使う時によく分からなかったことのメモです。

この記事中のhtmlとcssは特に断りのない限りhamlとsassとCoffeeScriptとjQueryで記述します。
そして特に断らないので全てをhamlとsassとCoffeeScriptとjQueryで記述します。

bootstrap

ナビゲーションバーの設定(.navbar)

Navbar

breakpoint

bootstrap3がレスポンシブデザインに対応しているのはいいんだけど、
そのせいでナビゲーションバーのつくり方によっては二段目が発生することがあったり、
レスポンシブするタイミングが悪かったりする。

そういう時はbreakpointを設定すれば任意の幅の時に
ナビゲーションバーの形状を変えることができる。

$grid-float-breakpoint: 992px
@import "bootstrap"

デフォルトは768pxで、
つまりデフォルトではタブレット端末以下の画面サイズのデバイスで閲覧された時、
ナビゲーションバーが変形することが想定されている。

.navbar-fixed-topでのセンタリング

サンプルだと.container-fluidに内包されてるけど、
.containerに内包されるようにすればセンタリングされる。

navの直下に.containerを配置して内包させる。

.navbar-btn, .navbar-text, .navbar-link

button には .navbar-btn を
text には .navbar-text を
link には .navbar-link を

付与せよって書いてあって、最初何の為に付与するのかよく分からなかったんだけど、
これは色の設定に影響を与える。

ナビゲーションバー内の色の付き方はそれ以外の場所での色の付き方と違うのだけど、
ナビゲーションであるリンク( .navbar > li > a )は自動的に特別な色の付き方を
するけど、それ以外のは判定してないから同じような色の付き方させたかったら
要素に応じてクラスを付与してねっていうことらしい。

ナビゲーションバーの幅

ナビゲーションバーに限ったことじゃないんだけど、
bootstrap3では幅を指定しない方が面倒くさくない、
というか幅を指定しようとした瞬間に面倒くさくなる、

のでレスポンシブを捨てるんでなければ
幅を指定しないで頑張る方がいいんだろうと今のところ。

コンテナーの調整

iPhone横とiPad横用のCSSを定義する

bootstrapではiPhone縦とiPad縦での利用は想定されているが、
iPhone横とiPad横の利用は想定されてはいるけどそれ用の定義は用意されていない。

$screen-xsが320pxでiPhone縦を想定、
$screen-smが768pxでiPad縦を想定したものと思われるが、

iPhone横は$screen-xsとして、iPad横は$screen-mdとして扱われ、
特にiPhoneの場合は、横で使われる場合は縦状態と較べてかなり余裕をもって
レイアウトできるので、縦と横は別の定義として扱いたい。

で、iPhone横は568px、iPad横は1024pxなので、
例えばそれぞれ次のように定義する。
(iPhoneはiPhone5、iPadは第3世代移行を想定。2014/05/11)

@media (min-width: 568px)
  .hidden-hrizontal-xs
    display: none
@media (min-width: 1024px)
  .hidden-horizontal-sm
    display: none

タッチ端末にジャストフィットしない問題

.containerクラスを付与すると
ウィンドウのサイズに応じていい感じにセンタリングしてくれる。

左寄せにするのでなければ基本的に.containerクラスを付与した
コンテナの中にコンテンツを記述することになると思う。

で、ここで微妙な問題。

PCの画面でブラウザのサイズを広げたり縮めたりしている時は問題ないのだけど、

iPhoneやiPadで表示させようとした場合、特にiPad。iPadじゃなくてもいいんだけど
$screen-xs として扱われないサイズのデバイスでかつスクロールバーの出ない端末
において、 画面の左右のマージンが少しだけ余る という問題が発生する。

最初なんで変なマージンが付いてるのかよく分からなかったのだけど、
これはbootstrapが縦スクロールバーの発生を考慮して確保しているマージンである。

例えば、
$screen-lgのmin-widthは1200pxだけど、.containerの幅は1170pxで、
$screen-mdのmin-widthは992pxだけど、.containerの幅は970pxである。

それぞれおよそ30px分を縦スクロールバーの表示領域として確保している。
この縦スクロールバー分の表示領域を確保させないようにするとどうなるかというと、

iPhoneやiPadではコンテンツがジャストフィットするようになるが、
PC等縦スクロールバーの発生するデバイスで閲覧した時に、
縦スクロールバーが発生すると横スクロールバーも発生するようになる。
縦スクロールバー分幅がはみ出すので横スクロールバーが発生する。

なので縦スクロールバー分に確保されている領域を削ってはいけない。

じゃあどうすんのかって考えたんだけどとりあえずJavaScriptで頑張ることにしてみた。

JavaScriptで端末を判定し、iPhoneまたはiPadの時に限り、
min-widthと.containerの値をイコールにさせる。

実際には最小のデバイスとして判定された場合は.containerに幅が設定されない、
つまり常にジャストフィットする、ので今のところ最小のデバイスとして判定される
iPhoneについては考慮しない。

JavaScript

$(document).ready ->
  agent = navigator.userAgent
  if agent.search(/iPhone/) != 1
    $(".container").addClass("iPhone")

CSS

// iPad縦
@media (min-width: 768px)
  .container.iPad
    width: 768px
// iPad横
@media (min-width: 1024px)
  .container.iPad
    width: 1024px

Responsive utilities の扱い

Responsive utilities

visible と hidden の効果は非対称

基本的にはvisible-xxで表示させ、hidden-xxで非表示にする対照的な機能を持つが、
インライン要素に対してvisibleするとブロック要素になるので注意が必要。

例えば visible-xs と hidden-xs のソースを見ると、それぞれ

.visible-xs
  display: block !important
.visible-xs
  display: none  !important

となっており、visible-xs が付与された要素は、
その要素がインライン要素であってもブロック要素になってしまう。

インライン要素がブロック要素になると何が困るのかというと、
インライン要素を連続して使っている場合、そこで意図しない改行が発生してしまう。

例えば大きな画面(screen-lg)では

ドラゴンクエスト2(発売日:1987年1月26日)[エニックス]

と表示し、それ未満のサイズの画面では

ドラゴンクエスト2[エニックス]

と表示させようとして次のような記述をした場合、

%span ドラゴンクエスト2
%span.visible-lg (発売日:1987年1月26日)
%span [エニックス]

大きな画面(screen-lg)では

ドラゴンクエスト2
(発売日:1987年1月26日)
[エニックス]

と表示され、それ未満のサイズの画面では

ドラゴンクエスト2
[エニックス]

と表示されてしまう。
この場合、面倒でも次のように表示させる画面ではなく、
表示させない画面を定義する必要がある。

%span ドラゴンクエスト2
%span.hidden-md.hidden-sm.hidden-xs (発売日:1987年1月26日)
%span [エニックス]

それかそもそもResponsive utilitiesを適用する要素は
必ずブロック要素っていう決めにして、

.clearfix
  .pull-left ドラゴンクエスト2
  .pull-left.visible-lg (発売日:1987年1月26日)
  .pull-left [エニックス]

とするのもいいかも知れない。
けど個人的には極力フロートさせたくないので前者の方法で頑張りたい。

これで、それぞれ

ドラゴンクエスト2(発売日:1987年1月26日)[エニックス]
ドラゴンクエスト2[エニックス]

と表示される。

参考