サイタ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まで丁寧に解説します

新着記事

ウェブサイトを作成すると、今度は実際にサーバーにアップロードするという作業があります。 ウェブサイトを全世界に公開してみんなが見れるようにするわけですね。 レッスンに来ていただいてご希望であれば一定期間使えるサーバーをお貸し致します。 ※ドメインやアドレスは決められません。 ※...

HTML, CSSを一通りマスターしたら挑戦してみたいSass。 Sassって何? という方はいいところに来ましたw CSSをもっと楽に書きたくありませんか? そう思ったらSassです。 SassはCSSを楽に作るための言語です。 短く、効率的に書いてCSSを作っち...

最近よく「Wordpress1日講座」というのを見かけます。 「Wordpressでサイトが1日で完成しちゃう」 「独自テンプレートを使って1日でサイト完成」 という謳い文句で講座を開いている団体さんや、個人の方を見かけます。 Wordpressの全貌や、何ができるかをざっくり...

先々週からこちらで講義開始いたしまして、体験レッスンの申し込みいただき大変ありがたく思います。 普段も講義(大人数)を行っているのですが、 サイタではプライベートレッスンのため、生徒さんのペースに合わせることができるので、 「ピンポイントにわからないところを教えられる」 という実感...

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

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

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

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ