最近知った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の注意点

Design

Transcript of 最近知ったBootstrapの注意点