【エクササイズ】Bootstrapでイメージギャラリーを作る【レスポンシブ】

課題
  • ここまで学習してきたBootstrapの知識を使ってイメージギャラリーを作る
  • BootstrapのGridシステムを使ってレスポンシブデザインにする
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです

課題内容は以下の課題レポジトリのURLに記述しています。

課題レポジトリ

GitHub : css_excercise_for_bootstrap_part_1

課題解決するために参考になる資料

Bootstrapを使う方法

あわせて読みたい
Bootstrapを使う方法今回はBootstrapを使えるようにするまでの方法を解説します。Bootstrapを使えるようにするためには、ローカルにファイルをダウンロードして使うやり方と、CDNというものを使ってBootstrapを使う方法があります。...

今回の課題ではBootstrapをCDN経由でファイルを読み込みます。

「CDN」「Bootstrapを使えるようにするためにしなければならないこと」を忘れてしまった場合は上記資料で復習しましょう。

BootstrapのNavbarを使う

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

今回の課題ではTwitterやFacebookのように画面上部にナビゲーションバーを表示します。

また、画面サイズに応じて表示を切り替えたり、トグルボタンを使ってメニューの開閉の機能も実装します。

「ナビゲーションバーの表示」「メニュー開閉機能」もBootstrapを使うことで簡単に実現できます。

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

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

今回の課題ではBootstrapのGridシステムを使ってイメージギャラリー部分を実装します。

Gridシステムを使うことで、ページの横幅を12分割のスペースに区切ることが出来ます。

その12分割されたスペースのうち何個分のスペースを表示要素に使うのか指定することでWebページの見た目が整えられてキレイなページを作成することができます。

また、Gridシステムには画面サイズに応じて表示方法を切り替える「レスポンシブ」の機能も備えているので、パソコン・タブレット・スマートフォンに応じてデザインを変更することが可能になります。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDMのどちらでも受けて受けています。TwitterのDMのほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る