BootStrap UI・UX・CSS

業務システムの管理画面でBootstrapを使う

投稿日:

業務システムでBootstrapを使う理由

  • レスポンシブ対応(モバイル対応)
  • HTML5対応
  • 洗練されたデザインを簡単に作れる

である。

なんとなく「ゆくゆくはモバイル(ipadなど)でも見れるように」とか言われてるモック作成者はいませんか?Bootstrapを使っておくと良いです。

「洗練された」と言えるかは分かりませんが、htmlを手打ちでしこしこ作ってデザインを作っていくよりは、美しい画面になります。デザイナーはいないけど、なんとか画面を美しくしたいという場合は、Bootstrapが最適です。ださすぎる業務システムの画面をなんとかしましょう。

グリッドシステムは、テーブル構造のようなもので、少し勉強すれば簡単にレイアウトをすることができます。

チュートリアル

基本ルール

1.class=”container”か”container-fluid”の中に
2.class=”row”の中に
3.class=”col-{prefix}-{columns}”の形式で
4.{columns}は合計値が12になるように指定

https://techacademy.jp/magazine/6270

このルールに従うことで、Bootstrapのグリッドシステムが使用でき、画面が適切に分割される。

覚えるのはこのcontainer,row,colの3つだけである。

class=”container”か”container-fluid”どっち使う?

fluidとは流動的という意味であり、container-fluidは画面サイズに合わせて流動的にリサイズされる。

containerは固定幅であり、container-fluidは可変幅である。スマホを横に傾けたときに、container-fluidにしておくと、画面の横幅いっぱいに表示される。

【鉄則】コンテナクラスを確実に置こう

グリッドシステムはclass=”container”か”container-fluid”この中での機能する。containerクラスの中で、rowクラスとcolクラスが機能するのである。

 

<参考>

Bootstrapの無料テーマ

ネットではBootstrapをそのまま使うと、「bootstrap臭がすると嫌われているようです。」確かにそう言われてみればそうかもしれませんね。

デフォルトテーマを変えることで、少しはbootstrap臭を消すことが可能です。

総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト

 

-BootStrap, UI・UX・CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

テーブルヘッダーを固定で、画面サイズに合わせて可変伸縮させる

技術要素 ウインドウサイズが変わったとき $(window).on(‘load resize’, function(){     // 処理を記載 }); ウインドウの幅を取得 $ …

no image

業務システムに使える基本的なHTML5レイアウトのテンプレート

デザインが軽視されがちな業務システムの管理画面。モック作成も担当範囲であれば、どのようなテンプレートを使うべきだろうか。 HTMLテンプレ―トによって見た目の制御が容易になるので、ぬかりなくやっておこ …

no image

ブロック要素は縦に並び、インライン要素は横に並ぶ

CSS3にdisplay要素がある。 display:block → 次要素は下に来る(縦並び) display:inline → 次要素は右に来る(横並び) このようになる。

no image

業務システムにBootstrapは多分いらない

「モダンな画面が簡単にできるんですよ」なんて誰が言った? 俺が言った。誤りだった。取り消したい。 div地獄 試しに作っていて驚いた。divが10階層くらいになっている。 多分、自分の使い方が悪い。で …

no image

業務システムのUIデザイン設計は質素でよいのか?

業務システムだからと言って 業務要件を満たせる項目が並んでいればいいのでしょうか? そういう人は成功しませんね。 UX(ユーザー体験)もしっかり設計しないと、良いサービスは生まれませんよ。 「一般人が …