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. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  2. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

    みなさんこんにちは、mayukouです。さて、今回はwordpres…

  3. Web Design

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

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

  4. jQuery

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

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

  5. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  6. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. jQuery

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

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書
  3. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
  4. Illustrator

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

    ヒーローヘッダーに使えるスライダーjQueryプラグインSlickの使い方
PAGE TOP