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エンジニア育成コース』というプランを用意しております。

誰向けのプラン?

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

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

プラン内容は?

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

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

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

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

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

 

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

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

COMMENT

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