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

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  2. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  3. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  4. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  5. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  6. Web Design

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. jQuery

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

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました…
  3. Illustrator

    助かった!Illustratorが重たい時の対処方法
  4. Mac

    macbook “12 goldが届きました。使用感、メリット・デメ…
  5. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
PAGE TOP