CSS

課題で定着!CSSのflexboxの使い方【イメージギャラリー】

どうも、つよぽんです!

今回は前回学習したCSSのflexboxの知識を使って「イメージギャラリー作成」の課題に取り組んでもらうことが目的の記事となります。

課題で作成する予定のイメージギャラリーは以下の画像の内容になります。

flexboxを使ってイメージギャラリーを作ったサンプルflexboxを使ってイメージギャラリーを作ったサンプル

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

想定読者
  • CSSのflexboxの知識を定着させたい
  • 実践的なスキルを身につけたい

イメージギャラリーのように表示要素を横並びにするページはよく見かけます。そのため今回の課題で身につくスキルは実践的なスキルということになります。

表示要素を横並びにするページ例

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

あわせて読みたい
【エクササイズ】CSSのflexboxを使ってイメージギャラリーを作る今回の課題は前回学習したCSSのflexboxの知識を定着させるためにイメージギャラリーを作っていただきます。GitHubに用意した練習課題をクリアしてflexboxの知識を定着させましょう。...

この記事ではflexboxに関して学習した記事をふりかえります。

今回の内容
  • CSSのflexboxの使い方を解説した記事のふりかえり

CSSのflexboxの使い方を解説した記事のふりかえり

CSSのflexboxは、「スライド(パワポ)」と「解説記事」を使って学習してきました。

CSSのflexboxをスライドで解説

あわせて読みたい
CSSのflexboxの使い方を覚えるCSSのflexboxを使うことで、横並びに配置することが出来なかったHTMLのっブロックレベル要素を横並びに配置することが出来るようになります。...

スライド(パワポ)では、主に図を多用してflexboxの使い方をイメージで把握することが目的となっています。

具体的には、flexboxを使ったサンプルコードや、flexboxのポイントとなる概念の説明をしています。スライドだけでもある程度の知識を身につけられるようになっております。

しかし、スライドだけでは文章による説明が少なくなってしまうため、次の項目の「解説記事」も用意しているので、スライド解説記事の両方を使って学習することでより深く理解することが出来るでしょう。

CSSのflexboxを解説記事で説明

あわせて読みたい
CSSのflexboxの基本的な使い方【図解】HTMLの表示要素を横並びにしたいときに、floatを使ったやり方もありますが、もっと簡単に実現できる方法としてCSSのflexboxという機能があります。flexboxの使い方を覚えるためにはコンテナーとアイテムの概念を理解する必要があります。...

解説記事では、スライドで利用した図を交えながら、スライド内におさめることが出来なかった文章を書いています。

そのため、解説記事に関しては前の項目で話した「スライド」の補助教材として使っていただけたらと思います。

まとめ

今回の記事は、「CSSのflexboxを使ったイメージギャラリー作成の課題」と「flexboxを学習する際に参考になる記事の紹介」をしました。

flexboxの学習に参考になる記事は次の2つになります。

上に挙げた2つの記事内容をふりかえり、flexboxの知識をより深くするために以下の「イメージギャラリー作成」の課題に取り組んでみましょう。

あわせて読みたい
【エクササイズ】CSSのflexboxを使ってイメージギャラリーを作る今回の課題は前回学習したCSSのflexboxの知識を定着させるためにイメージギャラリーを作っていただきます。GitHubに用意した練習課題をクリアしてflexboxの知識を定着させましょう。...

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

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

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

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

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

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

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

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

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

無料特典を受け取る

 

COMMENT

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