chasoレスポンシブ対応が楽になる!BootstrapについてまとめてみたツイートシェアはてブGoogle+Pocketハム氏レスポンシブ対応って超めんどくさくない?なっちゃそうん、ちょっとめんどくさいよね。Bootstrapっていうフレームワークを使えばレスポンシブ対応の作業がめちゃめちゃ楽になるよ。ハム氏ブートストラップ・・・?フレームワーク・・・?何それ、詳しく。なっちゃそそれじゃあ今回はBootstarpの概念と使い方について説明するね。ちなみにBootstrapにもHTMLとかCSSと同じようにバージョンって考え方があって、使うバージョンを間違えると思ったような動きをしてくれなかったり、デザインが反映されなくなるから注意が必要だよ。Contentsレスポンシブデザインの意味と必要性フレームワークとはBootstrapとはBootstrapを使うメリットBootstrapを使うことによるデメリットBootstrapの使い方コーディングを始める準備をしようファイルの呼び出しを一瞬で終わらせようBootstrapのコンポーネントを使ってみようまとめレスポンシブデザインの意味と必要性モバイルファーストって言葉をご存知ですか?最近ではWebサイトやWebサービスをパソコンではなくスマホから利用する人が利用者の大半を占めるようになっていて、スマホで表示&利用されることを想定していないWebサイトは一発アウト!サヨウナラ!な時代なわけです。考慮したコンテンツを作っていきましょうねという考え方をモバイルファーストあるいはスマホファーストと呼びます。(必ずしもスマホ版から先に作成するということではないですよ。)そして、スマホに限らずPCでもタブレットでも常に最適な表示ができるように設計・実装されたデザインをレスポンシブデザインといい、実現の仕方はいくつかありますがマルチデバイス時代の現在ではまず必須となっています。フレームワークとはまず、「ワークフレーム」という言葉には枠組みといういう意味があり、Web開発をする際に頻繁に使用する基本的な機能をまとめて提供してくれる雛形のような機能のことです。この枠組みを使用してプログラミングやWebデザインを行うことをフレームワークと言います。Webフレームワークはライブラリというものをまとめて提供してくれるため、本来であればたくさんのコードを書かないと実装できないような機能をほんの数行で実現させることができます。このライブラリとは何かと言うと、Web開発をする上でよく使う機能や自分で実装するのが難しい機能をパッケージ化して使用できるようにしてくれているパーツのことです。ライブラリを使いこなすと質の高いサイトを素早く作り出すことができます。Webフレームワークを使うメリットとして一番大きいのは、プロのエンジニアがあらかじめ書いてくれた何千・何万行のコードを利用して開発をすることができるという点。これによって初心者でもある程度の機能が揃った質の高いサイトを作り出すことができます。ありがたすぎます・・・本当に。Webフレームワークのルールに従ってアプリ開発を行うと、膨大な寮のコードを自分で書かなくても様々な機能を簡単に追加したりサーバー攻撃の防御ができたりするみたいです。BootstrapとはBootstorapとは、Twitter社によって開発された、HTML/CSS/JavaScriptで構成された最もメジャーなWebフレームワークです。Webページを作る上でよく必要になるボタンやフォーム、テーブル、グローバルメニューなどがあらかじめテンプレートとして用意されていて、実際に作成するとたくさんコードを書かないといけないような機能をHTMLにクラスを書くだけで呼び出すことができる仕様になっています。PCサイズの時・タブレットサイズの時・スマホサイズの時でそれぞれ最適な表示がされるようにJavaScriptで制御されているので難しい実装をしなくても簡単にレスポンシブデザインにすることができます。Bootstrapを使うメリットBootstrapを使うことによるメリットはこんな感じ。1カラム落ちしない基本レイアウトを数分で作ることができるグリットシステムを使用することで自動的にレスポンシブしてくれるサイトを素早く作ることができます。2よく使うパーツのHTMLを瞬時に配置できるすでに作られているパーツを使用することでゼロからコーディングする手間を省くことができます。3200種類以上のWebアイコンが自由に使えるBootstrapにはWebサイトの部品と同じようにアイコンが用意されていますが、若干デザイン性にかけるのでアイコンを使用したい場合はFontawesomeやフリーアイコンを探してみるのがオススメです。4メディアクエリを書く必要がほとんどなくなる自動的にレスポンシブしてくれるのでメディアクエリを書く必要が殆どなくなります。Bootstrapを使うことによるデメリットBootstrapを使うデメリットはこんな感じ1デザインが似たサイトができてしまうBootstrapは部品を用意してくれているのでそれをそのまま使ってしまうと同じような見た目のサイトを量産してしまいます。部品をしようしつつ、色味や形をカスタマイズしていくようにしてくださいね。2デザインに忠実に使えないことがあるカラム落ちしない分、見た目が元のデザイン案と違ってくることがあります。Bootstrapの使い方なっちゃそBootstrapの概要について理解できましたか?ここからはBootstrapの使い方について紹介していきたいと思います。コーディングを始める準備をしようBootstarpを使用する際はBootstrapの公式ページからフォルダをダウンロードしてそれを編集するという方法をとります。JavaSctiptのファイルが入っているのでこのフォルダ内にHTMLファイルを作って編集していくことで必要な時にクラスを使って呼び出せば、Bootstrapのあらかじめ用意された機能を利用してサイトを作ることができます。それでは実際に見ていきましょう。(今回はバージョン3を使って説明します)まずはBootstrapの公式ホームページに飛びます。Bootstrap」をクリック!ダウンロードしたzipフォルダを解凍するとdistというフォルダが現れるのでこれを編集してサイトを作っていくことになります。このdistフォルダを開くと中身はこんな感じ。ここにHTMLのファイルを作ってくださいね。CSSのフォルダを開いてもらうとBootstrapのファイルが入っているんですが、style.cssは入ってないんですね。BootstrapもCSSですが基本的にそれだけではサイトを作ることはできないので、ここにスタイルシートを追加してください。これで準備OK!あとはガシガシコーディングしていくだけ!なんですが!ここからがBootstrapの便利なところ。ファイルの呼び出しを一瞬で終わらせよう先ほどフォルダをダウンロードした公式ページに戻りますね。Startedと書かれたページが表示されます。(当然なんですが笑)このページ一体何かと言いますと、ここに書いてあるソースコードを丸ごとコピペするとHTMLファイルを作成した時のmetaタグを入れたり外部ファイルを呼び出したり、する作業を丸ごと短縮することができちゃうんです。これがめちゃくちゃ楽です。※自分で作ったstyle.cssは別途呼び出してくださいね。どの部分をコピペするかというとですね。この部分を丸っとコピーしてそのまま丸っと貼り付けてください。Bootstrapとは別にスタイルシートを作成している場合は上記のソースを貼り付けてください。これで必要なファイルの呼び出しは完了です。Bootstrapのコンポーネントを使ってみようなっちゃそ続いてBootstrapのコンポーネントについて簡単に紹介していきますね。コンポーネントとはコンポーネントという言葉には「構成要素」とか「部品」という意味がありますが、Bootstrapのコンポーネントも意味合いは同じです。Webサイトを作る上で必要になる機能を簡単に作れるようにソースをコピペするだけで様々な機能を実装できるようにあらかじめ用意されている部品をコンポーネントと呼びます。再度Bootstrapの公式ページの上のメニューを見てもらうと「components」という項目があるのでそちらをクリックしてください。すると部品名、EXAMPLE、ソースコードが縦に並んでいるページが出てくると思います。(一番上にはアイコンが大量に並んでいますが今回はそこは飛ばしてください)このページに書いてあるソースをそのままHTMLファイルに貼り付けるとソースの上のEXAMPLEの機能が実装できます。使う部品とその作り方を載せてくれているわけです。色とサイズを選ぶことができるボタン記事の挿入などで使用するサムネイルなどなど・・・これらはデザイン性もしっかり考えて作られているのでそのまま使っても見栄えの良いWebサイトを作ることができます。なっちゃそコンポーネントの紹介はまた別の記事でするので今回はこの辺で。本当に色々な機能が実装できるので1つ1つ見てみると面白いですよ。まとめものすごく便利な機能が詰まったBootstrapはWebサイトを作る上で本当に重宝します。Bootstrapの概念を理解する→使い方を覚えるまでのステップは若干根性がいりますが、慣れてしまえば初心者でもかなり楽にレスポンシブなWebサイトを作ることができるようになるのでぜひ習得してくださいね。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るフリーランスになって半年、気がついたら会社員時代の2倍稼げるようになってたHTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたRECOMMENDこちらの記事も人気です。Webデザイン2018.4.24要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説Webデザイン2018.4.7HTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説しますWebデザイン2018.4.19CSSだけでアニメーションやエフェクトがつけられるCSS3の便利な機能を...Webデザイン2018.4.8CSSは怖くない!CSSの役割と使い方Webデザイン2018.1.9Webデザイナーって何?どんなことしてるの?Webデザイナーの仕事を徹底...Webデザイン2018.4.8HTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたなっちゃそのプロフィールWebデザイナー&グラフィックデザイナー新卒で入社した会社を半年で辞め、完全未経験から独学でフリーランスのデザイナーになった23歳。『視野を広げて正しい努力をすれば人生に我慢は必要ない』ことを証明したい。『死ぬこと以外かすり傷』のまとめをまとめてみたマレーシアに移住するメリットとデメリットを正直にまとめてみたノリと勢いでマレーシア移住を始めてしまいました自分の仕事や職場環境は今の自分の価値の鏡だぞ。