サイタWeb・デザインスクールHTML/CSS入門講座東京 HTML・CSS・Wordpress講座 スクールブログ Bootstr...

Bootstrapなどのフレームワークについて

本日はどんよりな都内でございます。ムシムシしますね〜

本日はHTML,CSSのフレームワークと呼ばれるBootstrapについて。

Bootstrap Ver.4が先ごろ出ましたが、HTML、CSSなどを勉強しているとよく出てくる
Bootstrapってなんでしょうか?

ある程度たくさんページを作っていくと良く出てくるパーツがあります。
例えば、
・ボタン
・ナビゲーション
・パンくずリスト
・スマホサイト用の折りたたみメニュー
etc...

こういったパーツは、新しいサイトごとに1から作っていると大変です。

またこんなケースもあります。
「このレイアウトのやり方、前にも似たようなのを作ったぞ…」

こういうシチュエーションに対応してくれるのがBootstrapなんですね。

ボタンとかナビゲーションとか汎用的なパーツは使い回す場合も多いので、
予めHTMLとCSSのコードを用意しておきます。
もちろん自分で用意する場合もありますが、
Bootstrapはそんなよく使うパーツやパターンをギュッとたくさん集めたものなんですね!

言ってしまえば誰かが作って準備してくれたものを利用するということなので、
いささかオリジナリティには欠けますが、デザイン、コーディングのスピードはググッとアップするわけです。

ちょっと被りますが、どんなものがあるかというと、
・ボタン
・ナビゲーション
・パンくずリスト
・スマホサイト用折りたたみメニュー
・フレキシブル段組みレイアウト
・カード型レイアウト
・メディア型レイアウト
・レスポンシブ対応
・アイコンフォント
・スライダー
・モーダルウィンドウ
・ポップアップ
and more!
(実のところBootstrapはHTML,CSS,JavaScript(jQuery)でできています)

とくにスピードを重視されている方や、あまりデザインが得意ではないエンジニアの方など
重宝されている方はたくさんいます。

かく言う私ももちろん一ユーザでございます。


BootstrapはHTML・CSSフレームワークとも言われております。

フレームワーク=既存の枠組み、仕組み

ってな解釈でございます。

この枠組みには前人の知恵と努力が詰まっているので出来栄えも素晴らしいです。
それでいてかつサクッと使うことができる優れもの。
サイト制作には是非活かしたいものですね☆

余談ですが、Bootstrapにはあまりにたくさんの機能が凝縮されているので、
もっと軽快なものを目指して後発のフレームワークがたくさん登場しております。

・Foundation
・Bulma CSS(★おすすめ)
・Spectre CSS

この辺などが自分も案件で利用したりするフレームワークです。

それではまたー

 

(2018年7月12日(木) 12:30)

前の記事

次の記事

この記事を書いたコーチ

業界経験20年!現役ウェブデザイナーが1から10まで丁寧に解説します

新着記事

猛暑が続いてる日本列島。 水分補給しつつ日々コーディングをやっております。 本日はWordpressのテーマづくりについて WordpressはHTML・CSSがわからない初心者〜プログラムをゴリゴリ書ける上級者まで様々なレベルの人が使っています。世界中の30〜40%のサイトはW...

本日はどんよりな都内でございます。ムシムシしますね〜 本日はHTML,CSSのフレームワークと呼ばれるBootstrapについて。 Bootstrap Ver.4が先ごろ出ましたが、HTML、CSSなどを勉強しているとよく出てくる Bootstrapってなんでしょうか? あ...

今日は昨日に比べカラッと晴れているので洗濯物がよく乾きそうです。 都内は32度超えですが… 今日はスマホサイトのデザインの話。 <i style="font-weight: bold; font-style: oblique; font-size: 1.25rem;">「スマホ用...

今日は妙な天気な東京でございます。 暑いことには変わりはないですが(;´∀`) さてレッスン会場についてですが、 サイタではカフェや講師自宅がメインのレッスン場所というパターンが多いですよね。 私のレッスンでは現在、新宿、川崎であれば当方のレンタルオフィスがあるので そこのラ...

都内は晴れて今日はとても暑いですね (;´Д`)<あち〜 今日はホームページを作るときの2つのアプローチ 1.作りたいものがすでにある 2.ホームページ作成を基礎からしっかり学びたい それぞれ学習のスタンスが違ってくると思います。 ==============...

レッスン無料相談窓口のご案内

サイタでは、HTML/CSSレッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ