Excel(エクセル)PowerPoint(パワーポイント)ゲームプランニングSpriteStudioマスターデータ入力/作成Unityキャラクターデザインゲームシナリオレベルデザインゲーム分析3DCGイラスト制作CG/アニメーションホームWeb開発HTML/CSS/JavaScript便利なBootstrapデザイン2016-07-07カテゴリ:HTML/CSS/JavaScript便利なBootstrapデザインこの記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。rickNo40です。管理画面デザインをデザイナーが作ることはあまりないので、各ブラウザの調整など苦労したりします。そこで、簡単に綺麗な管理画面が作成できるのがBootstrapです。「col-md-?」?部分は1~12の数字になります。これは、1つのブロックを12分割し指定した分割分の領域を使用します。入力フォームの幅を調整したり、1行に幾つか要素を置くときに2,4,2,4で分割したりと便利です。左寄せ・中央寄せ・右寄せですね。使いたい時に、あぁまたcss設定しなきゃなんてならず、class名指定するだけなので楽です。「table」テーブルの基本デザイン管理画面の大抵の画面がこれを使用して作ればいいです。「table-striped」テーブルで1行毎に色を変えてくれます。縦結合する場合はだめですが、一覧表示するときは良い感じです。「table-bordered」テーブルの枠を表示します。線があると無いとではやっぱり引き締まり具合が違います。提供する管理画面なんかだったらborderはつけたが方がいいかと自分は思います。「table-condensed」テーブルの余白を縮めますbootstarp基本的に余白多いんですよね。1画面に収める量を増やしたい場合は、つけたほうがいいです。入力フォームの前や後ろに単位などをつけたりできます。普通に書くと入力フォームと高さが微妙に違ってたりなんてことがあるので結構便利です。こんな感じでルールが決まっているとそれを設定するだけなのでとても楽です。試してみるのもいいかと思います。viewsTweetこの記事を書いた人rickはじめまして。新人プログラマーのrickです。「いいね!」するとDoRubyの最新記事を受け取ることができます。