最新のお知らせ

Bootstrap導入と使い方

ブートストラップって何?

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月 更新

ABOUT US

アバター
ハーレーとアウトドアが大好きで、日本の文化・伝統をこよなく愛する 男性です。サイト作成・PHP・Java・JavaScriptのプログラミングとweb ライティングを副業に、日々楽しんでいます。 1980年代にUnix.osに興味を持ち、linuxの開発にも少しばかり関わりました。 昨今のIT世界の進化を享受して頂き、少しでも誰かの役に立てればと奮闘しています。 このサイトはワードプレス を利用し、PHP言語でカスタマイズしており、私の趣味で公開しています。 閲覧には会員登録が必要ですが、全て無料ですので安心して閲覧してくください。  座右の銘は”座って半畳、寝て一畳” 所詮人間などそんなもんでしょうというところです。年齢や性別・学歴など不問。一緒に悩み・励まし・歩む、その様な仲間が増えることを願ってます。                           
%d人のブロガーが「いいね」をつけました。