はじめてのBootstrap (CSSフレームワーク)

CSS

f:id:ksakae1216:20160616145102p:plain

みなさん、Bootstrapってご存じですか?

 

CSSにもフレームワークがあるんですよ。

早速ご紹介します!

 

何がいいの?

はい、みなさん、Webページ作成する時って

フォントの大きさ、ボタンの色、テーブルの枠線の太さなど

cssファイルに自分で記載していましたよね。

 

しかも、自分で色を決めると「なんかセンス無いな〜」って

感じの配色になっていしまいます。

 

そこでBootstrapを使うと、ボタンデザインやテーブルなどが

オシャレに定義してあるので、そのclassを使うだけであなたの

Webページも簡単にオシャレページに早変わりします。

 

使い方も、とっても簡単!

早速、オシャレページヘの変身方法をご紹介致します。

 

はじめに

まずは、Bootstrapをダウンロードしましょう。

下記ページにアクセスしてダウンロードボタンを押して

移動したページからダウンロードして下さい。

Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...

 

f:id:ksakae1216:20160616150148p:plain

 

f:id:ksakae1216:20160616150336p:plain

 

次にダウンロードしたzipファイルを解凍するとそのフォルダ配下に

「css」、「font」、「js」があります。

これを使います。

 

使ってみましょう

ちょうど、手元にセンスのないWebページがあったので

簡単にオシャレにしてみます。

 

下記のWebページをオシャレにします

【Java JSP サンプル 】DBのデータ取得結果を画面にList表示する – フリーランス チャレンジ!!

 

まずは、解凍したBootstrapをjspと同じ階層にコピーします。

f:id:ksakae1216:20160616151103p:plain

 

次に、index.jspを修正します。

gist1d041315dd39516061718729206ea94c

 

•11〜18行目を追加

•25、41行めを追加

•26行目を修正(クラスを追加しています)

 

これでページを表示すると・・・

 

修正前

f:id:ksakae1216:20160616150830p:plain

 

修正後

f:id:ksakae1216:20160616151702p:plain

 

なんということでしょう!

 

テーブルに線が追加され、1行ごとに背景色が変わっています。

index.jspの11〜18行目でBootstrapを使う宣言をして、後は

Bootstrapに定義されているclassを使えば、自由自在に配色を

オシャレに変えてくれます。

 

匠の細やかな気遣いでなんとも見やすい表に早変わり。

 

この後も2つほどクラスを追加しました。

f:id:ksakae1216:20160616153039p:plain

 

後、必要な定義があれば自分で書けばOKです。

この通り、簡単に色をオシャレに変更できますね!!

コメント

タイトルとURLをコピーしました