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

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  2. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  3. jQuery

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

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

  4. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  5. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法
  2. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット
  3. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法
  4. ブログ

    ポートフォリオサイトをリニューアルしました
  5. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
PAGE TOP