フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

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

f:id:ksakae1216:20160616145102p:plain

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

 

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

早速ご紹介します!

 

何がいいの?

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

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

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

 

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

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

 

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

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

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

 

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

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

 

はじめに

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

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

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

http://getbootstrap.com

 

f:id:ksakae1216:20160616150148p:plain

 

f:id:ksakae1216:20160616150336p:plain

 

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

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

これを使います。

 

使ってみましょう

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

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

 

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

※過去記事挿入予定

 

 

 

まずは、解凍した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です。

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