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

freelance

こんにちは。

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

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

近年、多くの通目を集めているBootstrapですが、おそらくこの記事を読んでいるみなさんは、HTMLやCSSは理解していて、これから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から始める!】フリーランスエンジニアの新しい働き方。

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

まとめ

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

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

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

bn04

もし、今あなたが

・フリーランスになるか悩んでる
・自分に合った案件があるのか不安
・そもそも何から始めればいいのか分からない

などお困りであれば、ぜひ弊社ITプロパートナーズのサポート内容を確認してみてください!

登録後、専属エージェントに無料相談もできますよ!

※週2日 / 30万〜のフリーランス案件を紹介中です
※ご経験やご希望によっては案件を紹介できない場合がございますのでご了承ください。


よく見られてる関連案件

b80c977483d024c14549510e194361fe 2_anken 3_anken