CSS

【課題】BootstrapのNavbarとグリッドシステムの復習【レスポンシブなイメージギャラリー作成】

どうも、つよぽんです!

今回はこれまで解説してきたBootstrapの知識の総復習としてレスポンシブ対応したイメージギャラリーの作成の課題に取り組んでもらうことが目的の記事となります。

課題の詳細は以下の記事から確認することが出来るので、今すぐ課題に取り組みたい方は以下のリンクから早速課題ページにアクセスして取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】Bootstrapでイメージギャラリーを作る【レスポンシブ】CSSのBootstrapを使ってレスポンシブなイメージギャラリーを作る課題に取り組んでもらいます。この課題をクリアすることで、①Boostrapファイルの設定、レスポンシブな②ナビゲーションバー③Gridシステムの知識が定着することでしょう。...

課題で作成するイメージギャラリーは以下の画像の内容になります。(画像をクリックすると拡大されます。)

課題で作成するもの課題で作成するもの

この記事の想定読者は次のとおりです。

想定読者
  • Bootstrapの使い方を覚えたい
  • Webデザインは出来ないがキレイなWebページを作りたい

今回の課題をクリアすることは、Bootstrapの「Navbar」「グリッドシステム」の知識を定着させることになります。

さらに「グリッドシステム」は「container」も使うので、Bootstrapでレイアウトを整える際の基本である「container」も自然と復習することが出来ます。

この記事では今回の課題で使われるCSSの知識のふりかえりを行います。

Bootstrapの使い方【CDN・ローカルファイル・図解付き】

あわせて読みたい
Bootstrapの使い方【CDN・ローカルファイル・図解付き】Bootstrapを使うためのやり方は2種類あります。①ファイルをローカルにダウンロードして使う方法、②CDN経由でファイルを読み込んで使う方法。またBootstrapはJQueryに依存しているのJQueryも読み込む必要があります。...

こちらの記事では、Bootstrapを使えるようにするまでの2通りの手順を解説しました。

Bootstrapを使えるようにするためには当然Bootstrapのファイルを読み込む必要があるのですが、次の2種類の読み込み方があることを記事内では説明しています。

2通りの読み込み方
  1. ローカルにダウンロードして読み込む
  2. CDN経由で読み込む

今回の課題では、上記の2種類のお好きな方を使って課題に取り組んでいただけたらと思います。

注意点としては、どちらのやり方もBootstrapファイルとは別に「JQuery」を読み込む必要があることです。

JQueryの読み込み方もBootstrapと同様に、「ローカルにファイルをダウンロードする方法」と「CDN経由で読み込む方法」の2種類があるので、お好きな方でJQueryを読み込んでいただけたらと思います。

Bootstrapの読み込み方を忘れた」「BootstrapもJQueryも読み込んでいるはずなのにうまく動かない」という方は、上記記事を参考にしていただけたらと思います。

BootstrapのNavbarを使う

あわせて読みたい
BootstrapのNavbarを使うCSSのBootstrapのNavbarを使うことで、TwitterやFacebookなどで見かける画面上部に固定されたナビゲーションメニューを作ることが出来ます。また、画面サイズに応じてメニューの表示スタイルを切り替えることも可能です。...

こちらの記事では、BootstrapのNavbarの使い方を解説しました。

Navbarというのは以下の画像で説明しているように、Webページ上部に設置される表示パーツ(ナビゲーションバー)のことです。

通常、そのナビゲーションバー上には「メニュー」や「ロゴ(タイトル)」を表示します。

Twitterのナビゲーションバー

BootstrapのNavbarを使うことでナビゲーションバーの実装がカンタンにできます。

Navbarの使い方は上記記事で解説しているので課題に取り組む際に参考にしていただけたらと思います。

BootstrapのGridシステムを使うパート1

あわせて読みたい
BootstrapのGridシステムを使うパート1CSSのBootstrapの1つの機能である「Gridシステム」を使うと、画面幅を12分割して表示要素をセット出来るようになります。また、画面サイズに応じて表示を切り替えることが出来るためレスポンシブなWebページを作ることも可能となります。...

こちらの記事では、Bootstrapのグリッドシステムの使い方について解説しました。

Bootstrapのグリッドシステムとは「Webページを縦列に12分割して、分割されたスペースに表示要素をセットする」機能のことです。

以下の画像は、実際にBootstrapのグリッドシステムを使ってWebページを12分割にして、表示要素を12分割されたスペースにそれぞれセットしている様子になります。

12分割した様子が視覚的にわかる例12分割した様子が視覚的にわかる例

また、Bootstrapのグリッドシステムでは1つの表示要素に対して何個分の分割スペースを割り当てるのか指定することもできます。

以下の画像は実際に、何個分の分割スペースを使うか指定している様子を表したものです。

1~12の値を明示したときの挙動

Bootstrapのグリッドシステムの基本的な使い方については上記記事で詳しく解説していうので、「グリッドシステムを知らない」「グリッドシステムの使い方を忘れた」といった方は、上記記事でふり返ってみましょう。

BootstrapのGridシステムを使うパート2

あわせて読みたい
BootstrapのGridシステムを使うパート2BootstrapのGridシステムを使うとレスポンシブなページを作ることも簡単にできます。前回のGridシステムパート1で学習した知識があれば、すぐにレスポンシブなページを作ることが可能となります。...

こちらの記事では、前の章で話した「Bootstrapのグリッドシステム」のレスポンシブ対応した使い方について解説しています。

以下の画像は、12分割されたスペースの内、表示要素に何個分のスペースを割り当てるかを画面サイズに応じて変更している様子を表したものです。

画面サイズに応じて1行あたりの要素数が切り替わる様子画面サイズに応じて1行あたりの要素数が切り替わる様子

このように、Bootstrapのグリッドシステムはレスポンシブ機能も用意されています。

レスポンシブの意味をよく理解できていない」「レスポンシブ対応したグリッドシステムの使い方を知らない」といった方は、上記記事で詳しく解説しているので参考にしていただけたらと思います。

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、「レスポンシブ対応したイメージギャラリーの作成」の課題に取り組んでみましょう。

あわせて読みたい
【エクササイズ】Bootstrapでイメージギャラリーを作る【レスポンシブ】CSSのBootstrapを使ってレスポンシブなイメージギャラリーを作る課題に取り組んでもらいます。この課題をクリアすることで、①Boostrapファイルの設定、レスポンシブな②ナビゲーションバー③Gridシステムの知識が定着することでしょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTA にて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、主に「【学習コンテンツ】Web開発」を使って学習を進めていただきます。

あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
  2. 学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
  7. 不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

  1. コードを添削してもらえる
  2. 学習したことのアウトプットに対してフィードバックしてもらえる
  3. いつでも質問出来る
  4. 週1のオンライン講義に参加できる
  5. 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
  6. 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
  7. 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

10万円50万円100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

10万円50万円100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

  • 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
    • 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
    • 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です