みなさん、Bootstrapってご存じですか？
CSSにもフレームワークがあるんですよ。
早速ご紹介します！
何がいいの？
はい、みなさん、Webページ作成する時って
フォントの大きさ、ボタンの色、テーブルの枠線の太さなど
cssファイルに自分で記載していましたよね。
しかも、自分で色を決めると「なんかセンス無いな〜」って
感じの配色になっていしまいます。
そこでBootstrapを使うと、ボタンデザインやテーブルなどが
オシャレに定義してあるので、そのclassを使うだけであなたの
Webページも簡単にオシャレページに早変わりします。
使い方も、とっても簡単！
早速、オシャレページヘの変身方法をご紹介致します。
はじめに
まずは、Bootstrapをダウンロードしましょう。
下記ページにアクセスしてダウンロードボタンを押して
移動したページからダウンロードして下さい。
次にダウンロードしたzipファイルを解凍するとそのフォルダ配下に
「css」、「font」、「js」があります。
これを使います。
使ってみましょう
ちょうど、手元にセンスのないWebページがあったので
簡単にオシャレにしてみます。
下記のWebページをオシャレにします
【Java JSP サンプル 】DBのデータ取得結果を画面にList表示する – フリーランス チャレンジ！！
まずは、解凍したBootstrapをjspと同じ階層にコピーします。
次に、index.jspを修正します。
gist1d041315dd39516061718729206ea94c
•１１〜１８行目を追加
•２５、４１行めを追加
•２６行目を修正（クラスを追加しています）
これでページを表示すると・・・
修正前
修正後
なんということでしょう！
テーブルに線が追加され、１行ごとに背景色が変わっています。
index.jspの１１〜１８行目でBootstrapを使う宣言をして、後は
Bootstrapに定義されているclassを使えば、自由自在に配色を
オシャレに変えてくれます。
匠の細やかな気遣いでなんとも見やすい表に早変わり。
この後も２つほどクラスを追加しました。
後、必要な定義があれば自分で書けばOKです。
この通り、簡単に色をオシャレに変更できますね！！
コメント