レスポンシブ対応が楽になる!Bootstrapについてまとめてみた

ハム氏
レスポンシブ対応って超めんどくさくない?
 
なっちゃそ
うん、ちょっとめんどくさいよね。でもBootstrapっていうフレームワークを使えばレスポンシブ対応の作業がめちゃめちゃ楽になるよ。
 
ハム氏
ブートストラップ・・・?フレームワーク・・・?何それ、詳しく。
 
なっちゃそ
それじゃあ今回はBootstarpの概念と使い方について説明するね。
ちなみにBootstrapにもHTMLとかCSSと同じようにバージョンって考え方があって、使うバージョンを間違えると思ったような動きをしてくれなかったり、デザインが反映されなくなるから注意が必要だよ。
 
 

レスポンシブデザインの意味と必要性

 
モバイルファーストって言葉をご存知ですか?
 
最近ではWebサイトやWebサービスをパソコンではなくスマホから利用する人が利用者の大半を占めるようになっていて、スマホで表示&利用されることを想定していないWebサイトは一発アウト!サヨウナラ!な時代なわけです。
 
なのでユーザーがスマホで利用することを想定して、画面のサイズ、操作性、表示速度などを考慮したコンテンツを作っていきましょうねという考え方をモバイルファーストあるいはスマホファーストと呼びます。(必ずしもスマホ版から先に作成するということではないですよ。)
 
そして、スマホに限らずPCでもタブレットでも常に最適な表示ができるように設計・実装されたデザインをレスポンシブデザインといい、実現の仕方はいくつかありますがマルチデバイス時代の現在ではまず必須となっています。
 
 
 

フレームワークとは

 
まず、「ワークフレーム」という言葉には枠組みといういう意味があり、Web開発をする際に頻繁に使用する基本的な機能をまとめて提供してくれる雛形のような機能のことです。
 
そして、この枠組みを使用してプログラミングやWebデザインを行うことをフレームワークと言います。
 
Webフレームワークはライブラリというものをまとめて提供してくれるため、本来であればたくさんのコードを書かないと実装できないような機能をほんの数行で実現させることができます。
 
このライブラリとは何かと言うと、Web開発をする上でよく使う機能や自分で実装するのが難しい機能をパッケージ化して使用できるようにしてくれているパーツのことです。
 
そしてライブラリを使いこなすと質の高いサイトを素早く作り出すことができます。
 

Webフレームワークを使うメリットとして一番大きいのは、プロのエンジニアがあらかじめ書いてくれた何千・何万行のコードを利用して開発をすることができるという点。これによって初心者でもある程度の機能が揃った質の高いサイトを作り出すことができます。ありがたすぎます・・・本当に。

さらにWebフレームワークのルールに従ってアプリ開発を行うと、膨大な寮のコードを自分で書かなくても様々な機能を簡単に追加したりサーバー攻撃の防御ができたりするみたいです。

 

Bootstrapとは

 
Bootstorapとは、Twitter社によって開発された、HTML/CSS/JavaScriptで構成された最もメジャーなWebフレームワークです。
 
Webページを作る上でよく必要になるボタンやフォーム、テーブル、グローバルメニューなどがあらかじめテンプレートとして用意されていて、実際に作成するとたくさんコードを書かないといけないような機能をHTMLにクラスを書くだけで呼び出すことができる仕様になっています。
 
また、PCサイズの時・タブレットサイズの時・スマホサイズの時でそれぞれ最適な表示がされるようにJavaScriptで制御されているので難しい実装をしなくても簡単にレスポンシブデザインにすることができます。
 

Bootstrapを使うメリット

Bootstrapを使うことによるメリットはこんな感じ。

①カラム落ちしない基本レイアウトを数分で作ることができる

グリットシステムを使用することで自動的にレスポンシブしてくれるサイトを素早く作ることができます。

②よく使うパーツのHTMLを瞬時に配置できる

すでに作られているパーツを使用することでゼロからコーディングする手間を省くことができます。

③200種類以上のWebアイコンが自由に使える

BootstrapにはWebサイトの部品と同じようにアイコンが用意されていますが、若干デザイン性にかけるのでアイコンを使用したい場合はFontawesomeやフリーアイコンを探してみるのがオススメです。

④メディアクエリを書く必要がほとんどなくなる

自動的にレスポンシブしてくれるのでメディアクエリを書く必要が殆どなくなります。

 

Bootstrapを使うことによるデメリット

Bootstrapを使うデメリットはこんな感じ

①デザインが似たサイトができてしまう

Bootstrapは部品を用意してくれているのでそれをそのまま使ってしまうと同じような見た目のサイトを量産してしまいます。
部品をしようしつつ、色味や形をカスタマイズしていくようにしてくださいね。
 

②デザインに忠実に使えないことがある 

カラム落ちしない分、見た目が元のデザイン案と違ってくることがあります。
 
 

Bootstrapの使い方

 
 
なっちゃそ
Bootstrapの概要について理解できましたか?
ここからはBootstrapの使い方について紹介していきたいと思います。
 

コーディングを始める準備をしよう

 
Bootstarpを使用する際はBootstrapの公式ページからフォルダをダウンロードしてそれを編集するという方法をとります。
このフォルダにはあらかじめたくさんのコードが書かれたCSSファイル とJavaSctiptのファイルが入っているのでこのフォルダ内にHTMLファイルを作って編集していくことで必要な時にクラスを使って呼び出せば、Bootstrapのあらかじめ用意された機能を利用してサイトを作ることができます。
 
それでは実際に見ていきましょう。(今回はバージョン3を使って説明します)
 
 
まずはBootstrapの公式ホームページに飛びます。
 
 
 
まずはBootstrapのフォルダをダウンロードしたいので「Download Bootstrap」をクリック!
 
 
ダウンロードしたzipフォルダを解凍するとdistというフォルダが現れるのでこれを編集してサイトを作っていくことになります。
 
 
このdistフォルダを開くと中身はこんな感じ。
ここにHTMLのファイルを作ってくださいね。
 
 
さらにさらに、CSSのフォルダを開いてもらうとBootstrapのファイルが入っているんですが、style.cssは入ってないんですね。
BootstrapもCSSですが基本的にそれだけではサイトを作ることはできないので、ここにスタイルシートを追加してください。
 
 
 
 
これで準備OK!
あとはガシガシコーディングしていくだけ!
 
なんですが!
 
ここからがBootstrapの便利なところ。
 
 

ファイルの呼び出しを一瞬で終わらせよう

 
先ほどフォルダをダウンロードした公式ページに戻りますね。
 
上のメニュー欄を見てもらうと「Getting Started」という項目があるのでこれをクリック
 
 
 クリックしてもらうとGetting Startedと書かれたページが表示されます。(当然なんですが笑)
 
このページ一体何かと言いますと、ここに書いてあるソースコードを丸ごとコピペするとHTMLファイルを作成した時のmetaタグを入れたり外部ファイルを呼び出したり、する作業を丸ごと短縮することができちゃうんです。これがめちゃくちゃ楽です。
 
※自分で作ったstyle.cssは別途呼び出してくださいね。
 
どの部分をコピペするかというと
 
 
ですね。
 
この部分を丸っとコピーしてそのまま丸っと貼り付けてください。
 
Bootstrapとは別にスタイルシートを作成している場合は

上記のソースを貼り付けてください。
 
これで必要なファイルの呼び出しは完了です。
 
 

Bootstrapのコンポーネントを使ってみよう

なっちゃそ
続いてBootstrapのコンポーネントについて簡単に紹介していきますね。

コンポーネントとは

コンポーネントという言葉には「構成要素」とか「部品」という意味がありますが、Bootstrapのコンポーネントも意味合いは同じです。

Webサイトを作る上で必要になる機能を簡単に作れるようにソースをコピペするだけで様々な機能を実装できるようにあらかじめ用意されている部品をコンポーネントと呼びます。

 

コンポーネントの使い方

再度Bootstrapの公式ページの上のメニューを見てもらうと「components」という項目があるのでそちらをクリックしてください。

すると部品名、EXAMPLE、ソースコードが縦に並んでいるページが出てくると思います。

(一番上にはアイコンが大量に並んでいますが今回はそこは飛ばしてください)

このページに書いてあるソースをそのままHTMLファイルに貼り付けるとソースの上のEXAMPLEの機能が実装できます。

つまり、よく使う部品その作り方を載せてくれているわけです。

素晴らしいですよね。

 

例えばどんなコンポーネントが用意されているかというと・・・

 

ドロップダウン機能や、スマホサイズになった時に自動的にハンバーガーメニューになる機能まで実装されているグローバルメニュー

 

色とサイズを選ぶことができるボタン

 

記事の挿入などで使用するサムネイル

などなど・・・

これらはデザイン性もしっかり考えて作られているのでそのまま使っても見栄えの良いWebサイトを作ることができます。

なっちゃそ
コンポーネントの紹介はまた別の記事でするので今回はこの辺で。本当に色々な機能が実装できるので1つ1つ見てみると面白いですよ。

 

まとめ

ものすごく便利な機能が詰まったBootstrapはWebサイトを作る上で本当に重宝します。

Bootstrapの概念を理解する→使い方を覚える

までのステップは若干根性がいりますが、慣れてしまえば初心者でもかなり楽にレスポンシブなWebサイトを作ることができるようになるのでぜひ習得してくださいね。

ではでは。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です