みなさん、Bootstrapってご存じですか?
CSSにもフレームワークがあるんですよ。
早速ご紹介します!
何がいいの?
はい、みなさん、Webページ作成する時って
フォントの大きさ、ボタンの色、テーブルの枠線の太さなど
cssファイルに自分で記載していましたよね。
しかも、自分で色を決めると「なんかセンス無いな〜」って
感じの配色になっていしまいます。
そこでBootstrapを使うと、ボタンデザインやテーブルなどが
オシャレに定義してあるので、そのclassを使うだけであなたの
Webページも簡単にオシャレページに早変わりします。
使い方も、とっても簡単!
早速、オシャレページヘの変身方法をご紹介致します。
はじめに
まずは、Bootstrapをダウンロードしましょう。
下記ページにアクセスしてダウンロードボタンを押して
移動したページからダウンロードして下さい。

次にダウンロードしたzipファイルを解凍するとそのフォルダ配下に
「css」、「font」、「js」があります。
これを使います。
使ってみましょう
ちょうど、手元にセンスのないWebページがあったので
簡単にオシャレにしてみます。
下記のWebページをオシャレにします
【Java JSP サンプル 】DBのデータ取得結果を画面にList表示する – フリーランス チャレンジ!!
まずは、解凍したBootstrapをjspと同じ階層にコピーします。
次に、index.jspを修正します。
gist1d041315dd39516061718729206ea94c
•11〜18行目を追加
•25、41行めを追加
•26行目を修正(クラスを追加しています)
これでページを表示すると・・・
修正前
修正後
なんということでしょう!
テーブルに線が追加され、1行ごとに背景色が変わっています。
index.jspの11〜18行目でBootstrapを使う宣言をして、後は
Bootstrapに定義されているclassを使えば、自由自在に配色を
オシャレに変えてくれます。
匠の細やかな気遣いでなんとも見やすい表に早変わり。
この後も2つほどクラスを追加しました。
後、必要な定義があれば自分で書けばOKです。
この通り、簡単に色をオシャレに変更できますね!!
コメント