こんにちは。
ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズ編集部です。
弊社では、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っています。
こちらでは、日々の現場でサポートさせていただいている中での、プロの目線で、エンジニアに役立つお話をしてまいります。
近年、多くの通目を集めているBootstrapですが、おそらくこの記事を読んでいるみなさんは、HTMLやCSSは理解していて、これからBootstrapの導入をお考えなのではないでしょうか。
この記事では、今からBootstrapを学ぼうとしている方に最適です！
今回は、おすすめのチュートリアルサイトをまとめています。この記事を参考に、Bootstrapを使いこなす第一歩となればと思います。
ドンピシャ案件の探し方
「案件はたくさんあるはずなのに、なかなか自分の望む案件が見つからない…」
エンジニア市場は売り手市場であるものの、いまだに正しいマッチングノウハウが確立されておらず、多くの方が案件探しに苦労されています。
ですが、現在の市場感や企業側に刺さる経験・スキルを理解し正しく案件探しをすれば、誰でも自身のバリューを活かし単価を伸ばすことができる、というのも事実です。
ITプロパートナーズでは、
・9割がエンド直案件のため、高単価
・約6割が週3-4案件のため、柔軟に働ける
・事業会社の自社開発案件が多い
などの魅力的な案件を数多く保有し、マッチング能力の高い即戦力エージェントが完全サポートします。
初めてのフリーランス、情報収集段階でも大丈夫です。あなたの働き方にマッチし、単価も高く、最もバリューを発揮できる案件を探しませんか？
目次
再確認！そもそもboostrapとは？
そもそもBootstrapとはCSSのフレームワークのことで、これはTwitter社によって開発されたものです。
当初は「Twitter Bootstrap」とも呼ばれていましたが、現在は「Twitter」の文字は取り除かれ、単に「Bootstrap」と呼ばれるようになりました。
Bootstrapの大きな特徴として、Bootstrapを活用することで、簡単にレスポンシブサイトが制作できることがあげられます。
一時期、スマホ専用サイトは全く別のサイトとして設計されていましたが、それではUIが変わりすぎたり、情報量が少ないなど使い勝手が悪く、かつコストもかさむため、あまりいいことがありませんでした。
そんなか、Bootstrapでレスポンシブサイトを作ることで、一つのHTMLで複数のデバイスに向けてデザインを可能とします。
入門者におすすめチュートリアルサイト！
<>TECHACADEMY Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
【目次】
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プロパートナーズをご利用ください！
まずは会員登録をして案件をチェック！
