最近知ったBootstrapの注意点

最近知った
BOOTSTRAPの
注意点
川路正樹 from トリックスタジオ 2015/05/20

自己紹介
川路正樹（かわじまさき）
●株式会社トリックスタジオ
●デザイナー／アートディレクター
＜経歴＞
・建築設計 3年
・個人事務所や制作会社でDTP・印刷物
・ジョブダイレクトなどでWEBデザイン
・現在に至る

直近の案件で発見した
Bootstrapの注意点を
ご紹介します
はじめに

もし気づいていなかったら
ご注意ください

印刷時にリンクURLが表示される
Bootstrap を使っていると、プリント時にリンク箇所のURLが表示されます。
ページ印刷する際、レイアウトが大きく崩れる結果になります。
＜プリントプレビューの例＞

印刷時にリンクURLが表示される
bootstrap.css（v3.3.2）では、192行目付近に@media print 設定があります。
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
これを打ち消す設定（もしくは削除）をすれば、URLは表示されません。
a[href]:after {
content: " " !important;
}
abbr[title]:after {
content: " " !important;
}
＜before＞＜after＞

DROPDOWNのタップ不具合
スマホ・タブレットで表示確認していたところ、Dropdowns （ドロップダ
ウンメニュー）の挙動がおかしいのを発見しました。
＜例: Bootstrap 公式サイト http://getbootstrap.com/components/ ＞
1・「Default」メニューをタップしてドロップダウンメニューが表示される
2・次に「Primary」メニューをタップする。
3・すると開いていた「Default」は消えるが、タップした「Primary」が表示されない
4・もう一度「Primary」をタップするとドロップダウンメニューが表示される。
余計なワンアクションが必要な状態です。

DROPDOWNのタップ不具合
次のCSSを一行追加するだけで問題解決！
.dropdown-backdrop { position: static; }
スマホ・タブレットでドロップダウンメニューを表示している場合は
注意しましょう！

もうすぐサポート終了するIE7。
まだ「対象ブラウザです」と
言われるの場合も…。
※2016年1月で、IE７，IE8の公式サポートは終了！
もう少しの我慢です。
IE7対応してみました

bootstrap-ie7.cssとboxsizing.htc
Bootstrap 3 for IE7
https://github.com/coliff/bootstrap-ie7
上段は、bootstrap 3をIE7対応させるCSS、見つけました。
下段は、IE７で boxsizingを有効化します。
A CSS box-sizing: border-box polyfill for IE 6/7
https://github.com/Schepp/box-sizing-polyfill

IE7は非レスポンシブ

IE7専用CSSを用意して、bootstrapのcssを上書きします。
PCブラウザなので、レスポンシブ表示である必要ありません、よね。
.container {
width : 980px !important;
}
.container に数値指定すれば、固定レイアウトに。
【参照】http://getbootstrap.com/getting-started/#disable-responsive

Glyphiconsはjqueryで書き換え

IE7ではアイコンフォントがうまく表示されません。
そこで Jqueryを用いて、該当するアイコンの文字コード（unicode）を
の中に生成します。
$('span.glyphicon-triangle-right').removeClass(‘glyphicon-triangle-right‘).html('' );
 
＜before＞
＜after＞
使用してる分、用意してください。

補足
Glyphicons の文字コード（unicode）は http://glyphicons.com/ で確認することが
できます。Bootstrapで利用しているのは、“halflings”です。

まとめ
・プリントやタブレットでの操作など、
確認をちょっとおろそかにしがちな部分で発見しました。
みなさん気をつけましょう。
・IE7が対象ブラウザにあっても、
Bootstrapの利用をあきらめる必要ありません。

ご清聴ありがとうございました

最近知ったBootstrapの注意点

More Related Content

最近知ったBootstrapの注意点