カテゴリー別アーカイブ: Bootstrap

Bootstrap4で改行brをスクリーンサイズで表示非表示

全て表示(初期値)    br class=”d-block”
XSサイズのみ表示    br class=”d-block d-sm-none”
SMサイズのみ表示    br class=”d-none d-sm-block d-md-none”
MDサイズのみ表示    br class=”d-none d-md-block d-lg-none”
LGサイズのみ表示    br class=”d-none d-lg-block d-xl-none”
XLサイズのみ表示    br class=”d-none d-xl-block”

全てのサイズで非表示    br class=”d-none”
XSサイズのみ非表示    br class=”d-none d-sm-block”
SMサイズのみ非表示    br class=”d-sm-none d-md-block”
MDサイズのみ非表示    br class=”d-md-none d-lg-block”
LGサイズのみ非表示    br class=”d-lg-none d-xl-block”
XLサイズのみ非表示    br class=”d-xl-none”

ブラウザチェック用 App

HP制作では、色々な環境で動作チェックをする必要があります。
PC以外(スマホ、タブレット等)の画面サイズチェックは、以前 miyakawa が紹介していましたが、今回はOS毎の各ブラウザチェックに便利なアプリをご紹介します。

Sauce
Mac App Store で紹介されている無料アプリです。(全機能を使う場合は有料)
https://itunes.apple.com/jp/app/sauce/id564308477?mt=12

Sauce

閲覧したいURL、OS、ブラウザ、画面サイズを選択してNavigateをクリック!(画面はお試し使用時)

使い心地は…というと、上記URLのレビューにもある通り「重い」。
でも、画面チェックとしてはかなり使えると思います。
ちなみに、全機能を使うならユーザー登録(無料 or 有料)が必要みたいですが、IE6〜10なら登録をしない「お試し」でもチェック出来ました。
ちなみにNavigateボタンをクリックした後、「Connecting…」画面の画像が動かないため、一瞬「フリーズか!?」と焦りました(笑)

販売元: SAUCE LABS INC

Bootstrap アイコン

Bootstrapは標準で140のアイコンが簡単な指定で表示できます。
黒のアイコンなら  <i class=”icon-arrow-up“></i>
白のアイコンなら  <i class=”icon-arrow-up icon-white“></i>
赤字のそれぞれ入れればOKで簡単です。

さらに多くのアイコンを使用したい場合に2つのサイトを紹介します。

■Elusive Icons
271のアイコンがあります。

http://aristath.github.com/elusive-iconfont/

■Font Awesome
249のアイコンがあります。

設置方法:ダウンロードした中のCSS「font-awesome.min.css」と「font-awesome-ie7.min.css」をCSSフォルダーに入れる。
「font」フォルダーをそのまま、index.htmlと同じ階層にそのまま入れる。
index.htmlに下記の記述を追加する。
<link href=”css/font-awesome.min.css” rel=”stylesheet”>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css“>
<![endif]–>
赤字は置いてある場所を確認して変更する。

後は使用したいアイコンをそれぞれ指定をする。
<p><i class=”icon-camera-retro“></i> icon-camera-retro</p>
<p><i class=”icon-circle-arrow-down icon-large“></i> icon-circle-down</p>
<p><i class=”icon-circle-arrow-right icon-2x“></i> icon-circle-right</p>
<p><i class=”icon-circle-arrow-left icon-3x“></i> icon-circle-left</p>
<p><a href=”#t”><i class=”icon-circle-arrow-up icon-4x“></i> icon-circle-arrow-up</a></p>
<p><i class=”icon-spinner icon-large icon-spin“></i> Spinner icon</p>

サイズを変更なら「icon-large、icon-2x、icon-3x、icon-4x」
回転させるなら「icon-spin」
をスペースの後に追加する。

http://fortawesome.github.com/Font-Awesome/