Bootstrap(ブートストラップ)を利用してレスポンシブデザインで綺麗なホームページを簡単に作成する6つの特徴

25.11.15 16:25 | コメント(0)

Bootstrap(ブートストラップ)でレスポンシブデザイン

レスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」。Bootstrap(ブーストラップ)は、Twitter社で作られたもので、以前は「Twitter Bootstrap」と呼ばれていました。
Web制作を行う上で、CMSツールやプラグインの様に最初から定義されている機能やシステムを利用するがあると思いますが、同じようにBootstrap(ブーストラップ)は、最初から定義されているCSSフレームワークなのです。
今回はBootstrap(ブートストラップ)の特徴と簡単なご紹介をさせて頂きます。

Bootstrap(ブートストラップ)

Bootstrap(ブートストラップ)
 1. Bootstrap(ブートストラップ)の説明
 2. Bootstrap(ブートストラップ)の6つの特徴
 3. Bootstrap(ブートストラップ)ダウンロード方法
 4. Bootstrap(ブートストラップ)用 index.html の作成

Bootstrap(ブートストラップ)の説明

Bootstrap(ブートストラップ)はWebサイトやWebアプリケーションを作成するフリーソフトウェアツールの1つである。フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されています。
Webサイトを簡単に制作できると言っても、ある程度のCSS知識も身に着けておかないと修正やカスタマイズは難しいかもしれません。
また、ボタンやフォームだけでなくWebサイトで利用するテーブル要素などを見栄え良くするなど、基本的なCSSスタイル定義を適用する機能が最初から定義されています。

Bootstrap(ブートストラップ)の6つの特徴

Bootstrap(ブートストラップ)の特徴を上げさせて頂きますが、その中でも最もメリットを感じさせる要素は、レスポンシブWebデザインに対応している事です。
Bootstrap(ブートストラップ)の6つの特徴をご紹介いたします。
 ・レスポンシブWebデザインに対応している。
 ・ボタン、ナビゲーションなどの要素が最初から定義されている。
 ・全てのデバイスやブラウザに対応している。
 ・デザイン提案時に素早くデザインの提案が出来る。
 ・角丸、グラデーションなどcss要素が
 ・UI(ユーザーインターフェイス)が綺麗。
 ・ダイアログ、カルーセルなどの機能が最初から定義されている。

※JavaScriptコンポーネントを使用したい場合は、HTML内でjQueryライブラリを参照する。

Bootstrap(ブートストラップ)ダウンロード方法

Bootstrapのページにアクセスし、「Download Bootstrap」ボタンをクリックします。

Bootstrap(ブートストラップ)ダウンロード画面①

Bootstrap(ブートストラップ)
Bootstrap Webサイト

移動したページに再度ダウンロードボタンが表示されますので「Download Bootstrap」ボタンをクリックするとダウンロードが開始します。

Bootstrap(ブートストラップ)ダウンロード画面②

Bootstrap(ブートストラップ)
ダウンロードを行ったらフォルダを開いてみましょう。
フォルダを開くといくつかの「css」や「js」が入っています。

【ダウンロードフォルダ】
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Bootstrap(ブートストラップ)用 index.html の作成

ダウンロードが完了したらフォルダを確認し、新しくテンプレートとなる「index.html」を「bootstrap」フォルダー内に作成します。
先ほどのBootstrapのページの下部にテンプレートとなるhtmlコードがありますのでコピーをして先ほど作成した「index.html」に貼り付けます。

【ダウンロードフォルダ】


  
    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
  
  
    

Hello, world!


以上がBootstrap(ブートストラップ)を利用してレスポンシブデザインで綺麗なホームページを簡単に作成する6つの特徴になります。
カテゴリ:Bootstrap(ブートストラップ)の基礎, CSS3, HTML5, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術, スマートフォン制作と作成方法, ホームページ(WEB)制作と作成方法

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP