Bootstrap入門に最適なチュートリアルまとめはこれだ!

freelance

こんにちは。

ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズ編集部です。

弊社では、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っています。
こちらでは、日々の現場でサポートさせていただいている中での、プロの目線で、エンジニアに役立つお話をしてまいります。

近年、多くの通目を集めているBootstrapですが、おそらくこの記事を読んでいるみなさんは、HTMLやCSSは理解していて、これからBootstrapの導入をお考えなのではないでしょうか。

この記事では、今からBootstrapを学ぼうとしている方に最適です!

今回は、おすすめのチュートリアルサイトをまとめています。この記事を参考に、Bootstrapを使いこなす第一歩となればと思います。

なおBootstrapの必要有無に限らず、フリーランスエンジニアの案件の特徴や仕事の取り方など総合的な情報は「フリーランスエンジニアの案件紹介!経験年数別の年収・実態を調査」でご紹介しているので、併せてご覧ください。

また、Bootstrapを生かしてフリーランスになりたい方は「フリーランスエンジニアになるには?」の記事も参考になると思います。

再確認!そもそもboostrapとは?

そもそもBootstrapとはCSSのフレームワークのことで、これはTwitter社によって開発されたものです。

当初は「Twitter Bootstrap」とも呼ばれていましたが、現在は「Twitter」の文字は取り除かれ、単に「Bootstrap」と呼ばれるようになりました。

Bootstrapの大きな特徴として、Bootstrapを活用することで、簡単にレスポンシブサイトが制作できることがあげられます。

一時期、スマホ専用サイトは全く別のサイトとして設計されていましたが、それではUIが変わりすぎたり、情報量が少ないなど使い勝手が悪く、かつコストもかさむため、あまりいいことがありませんでした。

そんなか、Bootstrapでレスポンシブサイトを作ることで、一つのHTMLで複数のデバイスに向けてデザインを可能とします。

入門者におすすめチュートリアルサイト!

<>TECHACADEMY  Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者向け】

https://techacademy.jp/magazine/6270

【目次】
1. Bootstrapとは
2. Bootstrapを使う準備
3. グリッドシステムの使い方
4. テーブルの使い方
5. ボタンの使い方
6. フォームの使い方

webデザインの知識がない人でもわかるBootstrapの使い方を丁寧に解説しているチュートリアルサイト。ダウンロード方法から説明があり、サンプルコードも多くすぐに実践したいという人におすすめのサイトです。

【初心者】ドットインストール Bootstrap3.0入門

http://dotinstall.com/lessons/basic_twitter_bootstrap_v4

【目次】
1. Bootstrapとはないか?
2. 開発の準備を整えよう
3. Gridシステムを作ってみよう
4. レスポンシブwebデザインを使おう
5. Tableのスタイリングをしよう
6. Formのスタイリングをしよう
7. Glyphiconsとボタンを使ってみよう
8. dropdownメニューを使おう
9. breadcrumb、pagination、pagerを使おう
10. Navbarを使ってみよう
11. Navbarをスマホ対応にしよう
12. label、badge、alert、panelを使おう
13. progress-barを使ってみよう
14. Modalウィンドウを使ってみよう
15. Tabメニューを使ってみよう
16. tooltip、popoverを使おう
17. カルーセルを使ってみよう

もはやチュートリアルサイトの定番となりつつあるドットインストールのBootstrap版です。

動画を見ながらそれに従って、手を動かすことが出来るので、非常にとっつきやすく、わかりやすいです。実践を意識したつくりになっており非常におすすめです。

中級者・上級者向けのチュートリアルサイト

とほほのwww入門 Bootstrap入門

http://www.tohoho-web.com/ex/bootstrap.html

【目次】
1. はじめに
2. コンテナ
3. グリッドシステム
4. タイポグラフィ
5. コード
6. テーブル
7. フォーム
8. ボタン
9. イメージ
10. ヘルパークラス
11. リンク

どちらかというと中級者向けのサイトです。

英アウト自体がリファレンスサイトのようになっていて、効率的に学びたい人にとってはとても分かりやすく、スピード感をもって学習できます。サンプルコード中心のため、事典として使用してもいいかもしれません。

Bootstrap 3でレスポンシブwebページをつくろう!グリッドシステムの基本な使い方

Bootstrap 3でレスポンシブ対応のwebページをつくろう!グリッドシステムの基本な使い方

【目次】
1. Bootstrap 3の特徴
2. Bootstrapのダウンロードとインストール
3. Bootstrapのファイル構成
4. このチュートリアル用のファイル構成
5. デバイス用のclass
6. コンテナの実装と配置
7. グリッドの実装
8. オフセットを使ってカラム幅を調整
9. カラムの並びの順番を変えるpushとpull
10. カラムのネスト
11. 終わりに

こちらのサイトは、実際にレスポンシブウェブページを作ってみようというものです。すでにある程度の知識があるかたは、実際に作りながら勉強した方がはやいでしょう。

実践が一番の練習となりますので、非常におすすめのサイトです。

こちらの記事もオススメです!

【週2〜3から始める!】フリーランスエンジニアの新しい働き方。

まとめ

いかがでしたでしょうか。

Bootstrapを活用することで、様々なデバイスに対応したウェブサイトを作ることができます。これを機会にさらにレベルあっぷしたウェブサイトを作れるようになりましょう!

新しいものに臨むときに長いスパンで計画的にやるのも大事ですが、2~3日で集中的にインプットするほうが習得から実践まで非常にスムーズにいくと思います。ぜひ頑張ってください!

フリーランスの方でこのようなお悩みありませんか?
  • 高額案件を定期的に紹介してもらいたい
  • 週2日、リモートワークなど自由な働き方をしてみたい
  • 面倒な契約周りはまかせて仕事に集中したい

そのような方はぜひ、ITプロパートナーズをご利用ください!

フリーランスの方に代わって高額案件を獲得
週2日、リモートなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート

まずは会員登録をして案件をチェック!

この記事を書いた人
ITプロパートナーズ編集部
ITプロパートナーズはITフリーランスの方に案件紹介をしているエージェントです。当メディア「アトオシ」では、フリーランスの働き方から仕事探しまで幅広い情報を日々発信しています。