CSSフレームワーク

サイト制作が早くなる!Bootstrapの特徴


サイト制作のスピードを上げたい、そんな方に。
6、7年くらい前にこのBootstrapというものを知り、
使い方がわからずスルーしていましたが、
先日学び直したら、すごく便利なことに驚きました。爆速で作れる、とまでは言いませんが、覚えてしまえば綺麗なサイトが作れるようになります。
使い方はいたってシンプル。デザインを当て込みたいパーツ(タグ)にクラス(class)を振っていくだけ。
そうすると、勝手にデザインされたものが出来上がります。CSSを書かなくても、前もってCSSを作ってあるので、
classを振るだけで良い。この作られたCSSのことをCSSフレームワークと言います。
HTMLとCSSを勉強していたら、割とすぐに理解できると思います。
ただし、最初とっつきにくいので、実際に手を動かして作っていくのが良いと思います。
Bootstrapができると、サイト制作スピードが格段に上がりますし、クオリティーも上がります。

スポンサードリンク

必要事項
HTML&CSSの知識が必要になります。
この知識があれば、すぐに習得することができます。

Boostrapでできること

Bootstrapがわかると、それなりのデザイン性を持ったサイトが作れるようになります。
ただのwebサイトだけではなくアプリ開発にも応用できるようです。
JQueryをいじってわざわざゴリゴリと書いていたコードも、
Bootstrapでは数行で終わってしまうから、マジックのようです。
Bootstrap 4公式サイト

Bootstrap4の特徴

バージョン4でフラットデザインに変わりました。

以前、こんな記事も書きました

簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

CSSフレームワークについて

Bootstrapは一つのフレームワークで、色々なものがあります。CSSフレームワークの種類をご紹介しています。

押さえておきたい!代表的なCSSフレームワークまとめ

bootstrapの使い方の例

Bootstrapには、レイアウトとコンテント(内容)、部品、ユーティリティ、などに機能が分類されて、それぞれを駆使しながら、サイトを組み立てます。

ボタンの場合

ボタンは、コンポーネント(部品)に分類されます。
ボタンを作りたかったらaタグやinputタグにクラス「btn」を振るだけ。簡単ですね。
色をつけたかったら新たにクラスを加えるスタイルです。ちなみに色の名前はprimaryとなっており、そのままの色の名称になってないので、
公式サイトでチェックしてみてください。

ここにBootstrapのボタンの作り方が書いてあります。

カードの場合

Bootstrap4の新たな機能で、カードレイアウトできるようになりました。あとでデモで利用しているのでご紹介します。
カード

私が学んだUDEMYの動画


英語ですが、ハンズオン(実際に作っていく体験学習)で進めていき、とてもわかりやすいです。
Web用語なので、割と英語もわかりやすいです。
Bootstrap 4 from scratch(Udemy動画)

実際に作ってみた。

勉強した後、サクッと作ってみました。今流行りのカードレイアウトを使いました。勉強すればこれもささっと作れるようになります。
DEMO

最後に

いかがでしたか?Bootstrapをご紹介しました。無料でダウンロードできるので、ぜひ始めてみて下さい。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  3. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  4. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  5. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!

    皆さんこんにちは、mayukouです。先日、スライダーに便利で簡単な…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。
  2. Mac

    Marvericksアップデート時のPhotoshopのバグが直りました
  3. ipadmini

    Mac

    iPad mini retinaとcookpadがいい感じ
  4. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  5. カメラ

    ブロガーの味方?高級コンデジ、Panasonic LX9を買いました。
PAGE TOP