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で困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

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

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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