目次
ブートストラップって何？
Bootstrapとは簡単にレスポンシブデザインができるHTML /CSS /Java Scriptのフレームワークです。
laravelフレームワーク内のbootstrapと混同されやすいですが、ここでのBootstrapは単体で利用する説明になります。
もちろんlaravelフレームワークでもBootstrapを利用しやすいようになっていますので、利用しない手はないです。
ここでいうレスポンシブとはパソコンやスマートフォンなどの画面の大きさに対して自動的に見やすい表示にさせる技術と考えてもらってかまいません。フレームワークとは一般的に土台を表しますが、Bootstrapはホームページなどを作成する際に必要となる基本的技術（部品など）を提供してくれます。
コードのコピペでページ内の色々な表現が可能になり、前述のレスポンシブデザインにより、パソコンやスマートフォンのためにそれぞれページを作らなくてはいけなくなる手間を省いてくれます。
またグリットシステムの利用で画面の分割指定も楽に構築できます。例えばヘッダー部分の範囲やボディー部分、サイドバーやフッターの範囲などを分割できます。webデザイン世界ではワイヤーと呼ばれますが、ページを作成する際に最も基本になる部分が楽に設計できるのは嬉しいですね。
特にオススメなのはHTMLやCSS・JavaScriptがわからないといった方にも簡単に扱えるところも魅力かなと思います。
Bootstrapの導入
Bootstrapの公式サイトを表示しましょう。
サイトのアドレスは https://getbootstrap.com になります。
表示すると2019年7月現在で下記の表示が出るはずです。
ブートストラップは他のアプリケーションのような形にはなっていないので、最初は戸惑うかもしれませんが、このサイトそのものがアプリケーションの役割を概ね兼ねています。
何事も慣れなので試行錯誤しながら使っていきましょう。
全てがテキスト（文字列）になっていますのでエディタを利用して作成し、ブラウザで表示を確認しながらの作業となります。
内容は作成者独自の文章や画像ですが、表示方法や位置などをうまく加工していきます。
ページの構造などはほとんどコピペで作れますから是非やってみましょう。
そのうち独自のアレンジが見つかったら色々チャレンジするのも楽しいものです
Get started から初めてみよう
ホーム画面の Get started をクリックしてください。
すると画面を少し下へスクロールすると下記の表示が現れます。
Starter template という項目の下に<!doctype html> から始まり</html> で終わるコードがありますから、それをコピーしてエディタに新規ファイルとしてペーストします。
私の場合はAtomエディタを使用していますが、メモ帳でも大丈夫なので貼り付けて、ファイル名をindex.htmlとしてデスクトップに保存してください。
保存したらデスクトップにある作成したファイルを開いてみてください。
このように表示されてますよね。<body>から</body>部分が表示されています。
もし日本語を表示させたい場合は <html lang=”en”> の部分の ”en”を ”ja” に変えてみてください。
非常に簡単ですが導入部分は至って単純です。
HTMLを使ったプログラミング学習初期の文字表示的なものですが、手始めにということで利用してみました。
大切なのはグリット表示です。次はサイトの見栄えを決定しコンテンツを作っていきましょう。
次のチャプターに進んでください。
2020年6月 更新
