Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる

公開日: : 未分類 , , , , , ,

最近よく見聞きするBootstrap。

IT業界に長いこといながら、シッタカで通してきたBootstrap。

そろそろその状況を打破しようとおもい、少し勉強してみました。

Bootstrap

Bootstrapとは

Bootstrapってそもそも何なのでしょうか?

BootstrapはウェブサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

引用:Bootstrap – wikipedia

とwikipediaには書かれています。

また、特徴として

HTML5やCSS3では比較的サポートが不完全だが、主要なウェブブラウザとの互換性がある。 ウェブサイトやアプリケーションの互換性の基本情報が、すべてのデバイスやブラウザで利用できるように部分的な互換性という概念を用いている。 例えば、角丸、階調、影などのCSS3で導入された機能は、古いWebブラウザでサポートされていないがBootstrapで使用される。

引用:Bootstrap – wikipedia

とも書かれています。

要するに、解釈したことを自分の言葉で書くと、

読み込んで使えば、それなりにきれいなWEBデザインで出来上がるよ

ってことなのでしょう。

 

で、どうすればいいの?

ここからが本題です。

それなりにきれいなデザインにするためには、何をどうしたら良いのでしょうか?

サンプルを探すと、普通にCSSを読み込めばいいようです。

CDNを利用する場合は、

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
引用:Getting started – Bootstrap

と書いて、環境に応じてhttpなり、httpsにすればし、ローカル読み込むのであれば、他のcss同様


<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

引用:Getting started – Bootstrap

ってかけば良さそうです。

が、しかしこれだけじゃ、綺麗になるわけありません。

ここから綺麗にするためのルールを必要なタグに適用していかなければなりません。

そこが、デザインのフレームワークと呼ばれる所以でしょう。

 

Bootstrapとはなんなのか、始めるにはどうしたらいいのかを学びました。

各タグへのルールは別記事でまとめたいと思います。

 

 

ad

関連記事

no image

時代遅れの我が家に液晶テレビが来た結果

時代遅れの我が家が液晶テレビを買った話を以前掲載しました。 買ったテ...

記事を読む

大容量なレンタルサーバーをお探しならヘテムルがいい!

ヘテムルというレンタルサーバーをご存知でしょうか? 使える...

記事を読む

no image

Gitについて調べたことを書いてみるよ

仕事でGitを使うことになりそうなので、調べてみました。  ...

記事を読む

no image

java.net.UnknownHostException: Unable to resolve host が出た

Androidの勉強中、 java.net.UnknownHostEx...

記事を読む

ad

Message

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

PAGE TOP ↑