Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

CSSフレームワークBootStrapをCodePenで使ってみた

f:id:sgwshu:20170904091121j:plain

こんにちは。今日はBootStrapをCodePenで練習がてらに使ってみたのでレビューと使い方を少しまとめて行きたいと思います。

 

BootStrapとは

Bootstrap - Wikipedia

簡単に言うとそこまで深い知識なくても普通におしゃれなサイト使えるよーって感じです。ただデメリットとしては見栄えが他のBootStrapを使って作られた物に似ちゃう時があるみたい。あとBootstrapの書き方を覚え直すのが、結構めんどくさいなって思った。それとざっと日本語で書かれた記事ですが読んでみたらCSSフレームワークって言う物自体に否定的な人が多いみたい。でも求人サイトとかをみるとBootStrap持ってる方を欲しがってるとこもちょこちょこ。

 

CodePenで使ってみる

ノートパソコンでやってるのでエディタとブラウザ開いて編集すると画面移動がめんどくさいのでできる限りcodepenとかで練習したい。ってことで調べたところcodepenでもbootstrapが使えるみたい。

ローカルでの、導入方法は他のサイトにも載ってて結構簡単にできるのでCodepenではなくローカルで使いたい場合はそちらを参考にしてみてください。

まずは普通に新規ペンを作ります。

印つけ忘れてました。。。右上のSettingをクリックします。

f:id:sgwshu:20170904083634p:plain

その後こんな感じになるのでCSSをクリックします。

f:id:sgwshu:20170904083638p:plain

そして下の方のQuick AddをクリックしてBootstrapを選びます。ちなみに今回はBootstrap3を使います。からのSave。

f:id:sgwshu:20170904083630p:plain

BootStrapのコードに関しても触れようと思ってたんですが時間がないので今日はこの辺で。

 実際にCodePenで使って見たのでURL載せておきます。

 

SeeYaaaa!!!