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

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  2. Web Design

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

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  3. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  4. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  5. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

  6. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. illustration

    インスタ映えな挿絵が描ける!ステキな水彩画イラストの描き方本に出会いました。
  2. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
  3. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
  4. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  5. Mac

    仕事のBGMに!Apple Music始めてみました。使用感をご紹介
PAGE TOP