目次
はじめに
最近、Webアプリに興味があり趣味で勉強しています。
その中で重要なものの一つがデザインです。
HTML5とCSS3を駆使すれば、様々なデザインを作れますが、
かっこいいデザインのものを作るのは大変です。
また、近年はPCだけでなく、
スマホやタブレットなど様々な端末が
Webアプリを利用する時代ですので、
それらすべてのプラットフォームできちんと機能する
Webページを作るのも大変です。
そこで、それらの問題を解決する方法として、
最近注目を浴びているのがBootstrapと呼ばれるデザインフレームワークです。
このBootstrapを使うと、
モダンなデザインで、かつ様々なプラットフォームに対応した
Webページ(Webサービス)を簡単に作ることができます。
今回、Web技術初心者の自分が、
一からBootstrapを勉強した時のおすすめ資料と、
それらに基いて作ったサンプルコードページについて
説明したいと思います。
Bootstrapとは?
Bootstrapは、元々Twitter社が開発していた
Webデザインフレームワークで、
現在はGitHub上でオープンソースとして開発されています。
特徴としては、
レスポンシブデザインというもので、
一つのHTMLファイルを使って、
様々な端末に対応したデザインを作成することができます。
また、基本的なボタンやフォームなどは、
コンポーネントという形で提供されており、
それらを使うだけで、モダンなデザインのページを作ることができます。
初心者におすすめのBootstrap資料
自分が参考にした初心者用の資料を紹介します。
1. Bootstrap · The world's most popular mobile-first and responsive front-end framework.
まず、一番最初に見るべきはBootstrapのHPです。
こちらからBootstrapのソースコードダウンロードし、
Getting Startedのページにあるテンプレートを使えば、
すぐにBootstrapを使ったページを作ることができます。
一応、非公式みたいですが、公式サイトを日本語訳したページもあります。
Bootstrap | 非公式日本語版@wivern.com
また同じページに、exampleというサンプル集があるため、
これらを見てみると、作りたいデザインを見つけることができると思います。
サンプル集のコードの取得方法はこちらを参照してもらえると良いと思います。
2. Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール
このドットインストールのBootstrapのクラスは素晴らしいです。
動画が非常にわかりやすく、
このクラスの動画をひと通り見て実践すれば、
下記のサンプルコードページのようなデザインを簡単に作ることができます。
あまりにもクラスの内容が素晴らしいので、
今後は何かを勉強する時は、
とりあえずドットインストールで勉強しようかと思っています。
3. その他サンプルコードのページ
Bootstrapを使っている人は非常に多いので、
沢山の人がBootstrapのテンプレートやサンプルコードを公開しています。
それらのソースコードを少しづつコピーして利用していくと良いと思います。
自分が参考にしているのは、これらの資料です。
Bootstrapサンプルコードページ
下記のリンクは、上記の資料を参考に、
自分がBootstrapを使って作ってみたサンプルコードのページです。
詳細は上記のページを見て頂きたいですが、
下記のようなかっこいいフォームや、
かっこいいナビゲーションバー
かっこいいプログレスバーなどを簡単に作ることができます。
また、スマホで同じページを見ると、
下記のようにちゃんとそれっぽく表示されます。
これがBootstrapの良さですね。
コードを参考にする場合は、
各項目毎のサンプルコードを見てもらってもいいですし、
ブラウザ機能でソースコードを表示して見てもらっても良いと思います。
参考資料
基礎的なHTMLやCSSの知識に関しては、
こちらの本がおすすめです。
- メディア:
- この商品を含むブログを見る
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。