読者です 読者をやめる 読者になる 読者になる

MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

Bootstrap初心者のためのおすすめ資料とサンプルコードページ

Web Programming

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

目次

はじめに

最近、Webアプリに興味があり趣味で勉強しています。

その中で重要なものの一つがデザインです。

HTML5とCSS3を駆使すれば、様々なデザインを作れますが、

かっこいいデザインのものを作るのは大変です。

 

また、近年はPCだけでなく、

スマホやタブレットなど様々な端末が

Webアプリを利用する時代ですので、

それらすべてのプラットフォームできちんと機能する

Webページを作るのも大変です。

 

そこで、それらの問題を解決する方法として、

最近注目を浴びているのがBootstrapと呼ばれるデザインフレームワークです。

このBootstrapを使うと、

モダンなデザインで、かつ様々なプラットフォームに対応した

Webページ(Webサービス)を簡単に作ることができます。

   

今回、Web技術初心者の自分が、

一からBootstrapを勉強した時のおすすめ資料と、

それらに基いて作ったサンプルコードページについて

説明したいと思います。

Bootstrapとは?

Bootstrapは、元々Twitter社が開発していた

Webデザインフレームワークで、

現在はGitHub上でオープンソースとして開発されています。

twbs/bootstrap

特徴としては、

レスポンシブデザインというもので、

一つのHTMLファイルを使って、

様々な端末に対応したデザインを作成することができます。

また、基本的なボタンやフォームなどは、

コンポーネントという形で提供されており、

それらを使うだけで、モダンなデザインのページを作ることができます。

 

初心者におすすめのBootstrap資料

自分が参考にした初心者用の資料を紹介します。

まず、一番最初に見るべきはBootstrapのHPです。

こちらからBootstrapのソースコードダウンロードし、

Getting Startedのページにあるテンプレートを使えば、

すぐにBootstrapを使ったページを作ることができます。

一応、非公式みたいですが、公式サイトを日本語訳したページもあります。

Bootstrap | 非公式日本語版@wivern.com

 

また同じページに、exampleというサンプル集があるため、

これらを見てみると、作りたいデザインを見つけることができると思います。

サンプル集のコードの取得方法はこちらを参照してもらえると良いと思います。

 

2. Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール

このドットインストールのBootstrapのクラスは素晴らしいです。

動画が非常にわかりやすく、

このクラスの動画をひと通り見て実践すれば、

下記のサンプルコードページのようなデザインを簡単に作ることができます。

 

あまりにもクラスの内容が素晴らしいので、

今後は何かを勉強する時は、

とりあえずドットインストールで勉強しようかと思っています。

3. その他サンプルコードのページ

Bootstrapを使っている人は非常に多いので、

沢山の人がBootstrapのテンプレートやサンプルコードを公開しています。

それらのソースコードを少しづつコピーして利用していくと良いと思います。

自分が参考にしているのは、これらの資料です。

Bootstrapサンプルコードページ

下記のリンクは、上記の資料を参考に、

自分がBootstrapを使って作ってみたサンプルコードのページです。

詳細は上記のページを見て頂きたいですが、

下記のようなかっこいいフォームや、

f:id:meison_amsl:20150614230043p:plain

かっこいいナビゲーションバー

f:id:meison_amsl:20150614230113p:plain

かっこいいプログレスバーなどを簡単に作ることができます。

f:id:meison_amsl:20150614230158p:plain

また、スマホで同じページを見ると、

下記のようにちゃんとそれっぽく表示されます。

これがBootstrapの良さですね。

f:id:meison_amsl:20150620144332p:plain

 

コードを参考にする場合は、

各項目毎のサンプルコードを見てもらってもいいですし、

ブラウザ機能でソースコードを表示して見てもらっても良いと思います。

参考資料

基礎的なHTMLやCSSの知識に関しては、

こちらの本がおすすめです。

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!