MyEnigma

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

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

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設計の手間を大幅に削減!

 

MyEnigma Supporters

もしこの記事が参考になり、

ブログをサポートしたいと思われた方は、

こちらからよろしくお願いします。

gumroad.com