Web開発に超便利!簡単に美しいデザインを作れる「Bootstrap」の使い方

シェアする



URLをコピーする
Web開発に超便利!簡単に美しいデザインを作れる「Bootstrap」の使い方
https://fwww7.com/2016/11/20/web-framework-bootstrap/

どうもこんにちは、Web開発大好きマンのヨッシーです( ˘ω˘ )

今回はあなたもご存知のあの有名サイトでも使われているWeb開発用フレームワーク「Bootstrap(ブートストラップ)」の特徴&使い方をまとめてみたいと思います。

スポンサーリンク

Bootstrapとは?

Bootstrapは、昔、Twitterの社内で開発されたデザイン用のCSSでした。それが発展して、外部に公開されるようになり、Bootstrapバージョン2から名称が「Twitter Bootstrap」から、「Bootstrap」のみに変更されました。

BootstrapはjQueryとCSSから成り立つフレームワークです。現在はBootstrap3が主流になっていて、コーディングがしやすかったり綺麗なレイアウトを組みやすいことから、多くのサイトに取り入れられてきました。

Bootstrapは、フロントエンドのWeb開発をより速く、より容易にします。これは、すべてのスキルレベルの人々、すべての形状のデバイス、あらゆる規模のプロジェクトのために作られています。

v4-alpha.getbootstrap.comより

HTMLとCSSの基礎があれば、誰でも扱うことができます。JavaScriptのスキルは必要ありません。

今回はそのBootstrapの最新版「Bootstrap4」の使い方を解説しようと思います! これを機に今までBootstrap3を使っていた方は、乗り換えを考えてみてはいかがでしょうか。

Bootstrap4簡単セットアップ

Bootstrapを使うには二通りあります。外部サーバーに置いてあるCSS・JavaScriptを使う「CDN」と、ローカルにファイルをダウンロードしてパスを指定する「ローカル指定」があります。

今回はCDNを使った方法をご紹介します。

ソースを準備しよう

こちらのソースコードをコピペしてエディタ等に貼り付けてindex.htmlという名前で保存してください。

貼り付けたら、名前を付けて保存します。もちろん文字コードにはUTF-8を指定してくださいね。文字化けすると困りますから…(^-^)

現在のところ、以下のデモページのようになっていると思います。

【デモページ】

基盤となるソースの準備が終わったら、コンポーネント(Webデザインで使うパーツーを見てみましょう。

コンポーネントを見る

Bootstrap公式サイトのコンポーネントにアクセスしてください。

いろいろなコンポーネントがありますね…。

Bootstrap4 コンポーネント

Componetsのリストの下にある部分のリンクから遷移すると、いろいろなパーツを見ることができます。一つ一つ確認していきましょう。

コンポーネントの確認

要約しました。ABC順に並べてあります。

Alerts

ユーザーへの警告や通知に使うと有効。例えばパスワード未入力など。

Breadcrumb

SEO対策にも有効!今見ている人が、どの階層のページを見ているのかがわかりやすい。

Button

ボタンです。送信するときや後述するModalを表示するときに使います。

Button group

ボタンを横並べにするときに使います。

Cards

Bootstrap3ではPanel、Thumnails、Wellという名前だったが統合された。なかなかモダンな感じ!

Carousel

カルーセル。画像のスライドショーに使います。Webサービスを提供するサイトのランディングページなどにどうでしょう?

Dropdowns

グローバルナビゲーションや前述したボタンに使う。階層にすることで、内容がわかりやすくなる。

Forms

ユーザーのテキスト入力フォームに使う。Input groupと類似しています。用途に合わせたフォーム作りが可能で、金額、ユーザー名、パスワードフォームなど、とても綺麗なデザインのものが揃っている。優秀。

Jumbotron

ジャンボトロン。こちらもランディングページに使えそう。こちらは見た方が早いですので、デモをどうぞ!【デモページ】

List group

こちらは、なんというか、FAQページなどに使うことができるのではないでしょうか。質問をクリックするとヒュ-ンと回答が…。

Modal

モーダルです。ボタンをクリックするとホワーンと画面上にカードが現れます。「本当にその内容で大丈夫ですか?」などに使うといいと思います。

Navs

次に説明するnavbarとは少し違います。こちらはナビゲーションバーではなく、ページの途中でユーザーを案内するために活用することができます。

Navbar

はい。出ました。グローバルナビゲーションバーです。Bootstrap4からは背景色をCSSのbackground-colorプロパティで簡単に指定することができるようになりました。また、クラスも用意されているので気に入った色があったらぜひ。ちなみに、僕はbg-primaryが好きです!

Pagination

1ページあたりの情報が増えすぎたときに、別のページに遷移するための表示に使います。1, 2, 3 と続けて並べることでユーザビリティの向上に大いに貢献します。

Popover

こちらは少しJavaScript寄りになってしまうのですが、とても便利ですよ。Popoverはフォームの未入力の欄やこうやって入力するんだよーというガイドをすることができます。吹き出し型のカードなので、そこそこ内容があっても綺麗に表示することができます。

Progress

プログレスバーです。プログラムの処理の進行度を示したり、プロジェクトの完成度の公開などに使えそうです。ページのローディング表示にはちょっと向いてないかも…。

Tooltips

ツールチップは「これから遷移するリンクは何のページなのか」を見せるために役に立ちます。ボタン等に付属させることで、よりわかりやすいウェブサイトを作ることができます。

ソースを使ってみよう。

上記で長々と書きましたが、この中から好きなコンポーネントを選んでソースコードをコピーして貼り付けてみてください。

先ほどご紹介した基盤用ソースコードだと、<h1>Hello, world!</h1>の部分を消して、気に入ったコンポーネントのソースコードに書き換えてみてください。今回はCardを貼り付けてみることにします。

すると…

【デモページ】

Bootstrap 4 サンプルカード

シンプルながらも、コードを表示することができました!!嬉しい!!

このように、好きなパーツを好きなように配置し、自由な空間を生み出すことができるのがWeb開発の素晴らしいさだと思っています。W3Cさんありがとう。

まとめ

Bootstrapは質の良いフレームワークです。冒頭であの有名サイトにも使われていると書きましたが、あれはQiitaやドットインストールのことです。

え、ここまでできるの…。ということを体感しつつ、そこまで上達できるように日々挑戦するのは楽しいものです。

「やれ!やらなきゃ上手くならないぞ!」と言っているのではありません。好きなときに、好きな時間に、好きなサイトを作ればよいのです。そうしないと独創的なコンテンツを載せたサイトは作れませんから…。

長々と書きましたが、少しでもBootstrapに興味を持っていただけたのであれば、この記事は大成功です!ありがとうございました!

スポンサーリンク

シェアする



URLをコピーする
Web開発に超便利!簡単に美しいデザインを作れる「Bootstrap」の使い方
https://fwww7.com/2016/11/20/web-framework-bootstrap/

オススメ記事