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

CSS

f:id:ksakae1216:20160616145102p:plain

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

 

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

早速ご紹介します!

 

何がいいの?

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

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

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

 

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

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

 

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

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

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

 

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

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

 

はじめに

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

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

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

Bootstrap
The most popular HTML, CSS, and JS library in the world.

 

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をコピーしました