CSS

【HTML・CSS課題】マルバツゲームのボードを作成する

どうも、つよぽんです!

今回はこれまで学習してきたHTMLとCSSの知識を使って「マルバツゲームのボード作成」の課題に取り組んでもらうことが目的の記事となります。

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

想定読者
  • これまで学習してきたHTMLとCSSの知識を定着させたい
  • 遊び感覚で楽しみながらHTMLとCSSの復習をしたい

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

あわせて読みたい
【エクササイズ】CSSでマルバツゲームのボードを作る今回の練習課題ではHTMLのテーブルとCSSをうまく使って「マルバツゲーム」のボードを作っていただきます。課題をこなし、「HTMLのテーブルの作成方法」「CSS初級編」「ここまでやったCSS中級編」の知識の定着をさせましょう!...

上のリンクから課題をやってもらうのがこの記事の最終的な目的となりますが、今回取り組む「マルバツゲームのボード作成」に必要な知識をふりかえってみたいと思います。

今回の内容は以下のとおりです。

今回の内容
  • マルバツゲームのボード作成に必要となるHTML・CSSの知識をふりかえる

マルバツゲームのボード作成に必要となるHTML・CSSの知識をふりかえる

今回の課題であるマルバツゲームのボードを作成するのに必要な知識は以下の6つで学習しました。

今回の課題である「マルバツゲームのボード作成」のどの部分で上記6つの知識を使うか解説していきます。

学習した記事リンクも貼っているので、わからないところ、忘れているところがあればリンク先の記事を読んで思い出してみましょう。

HTMLのテーブルの使い方を覚える

あわせて読みたい
HTMLのテーブルの使い方を覚えるHTMLのテーブル(表)の作り方を学習します。HTMLでテーブルを作成するためには、table, thead, tbody, tr, th, tdタグを内容に応じて使い分けます。この記事のスライドでそれぞれのタグの使い方を学習します。...

マルバツゲームは「3×3」の合計9個のマスを使います。この9個のマスを作成するのに、HTMLのテーブルを使っています。

CSSで色を設定するやり方を知る

あわせて読みたい
CSSで色を設定するやり方を知るCSSを使って文字や背景などの色を設定する方法は大きく分けて3種類あります。英単語での指定。16進数での指定。関数での指定。この記事を読むことで色の設定方法と16進数の意味を理解することができます。...

マルバツゲームの各マスにボーダー(枠線)がありますが、そのボーダーに対して色を使っています。

また、課題レポジトリ内でも書いていますが発展問題も用意しています。

その発展課題とはマウスカーソルがのっているマスのボーダーの色を切り替えるものですが、いずれにせよボーダーの色の指定で上記記事の知識を活用します。

CSSのbackgroundとborderを理解する

あわせて読みたい
CSSのbackgroundとborderを理解するCSSのbackgroundプロパティとborderプロパティの解説をします。backgroundプロパティを使うことで背景色や背景画像をセットすることが出来ます。borderを使うことで要素に枠線をつけることが可能です。ボーダーには様々なスタイルが用意されているのでどんな種類があるか理解しましょう。...

1つ前の項目でも説明しましたが、マルバツゲームの各マスにボーダーを作成します。

そのボーダーを作成する際にCSSのborderを使っていて、borderに関しては上記記事で学習しました。

CSSの基本セレクター3つを理解する

あわせて読みたい
CSSの基本セレクター3つを理解するCSSでスタイルを定義する際に使用するセレクター。指定できるセレクターの種類はいろいろありますが、その中でも基本となる3つのセレクターを解説します。CSSセレクターの基本形を学習していきましょう。...

CSSでスタイルを定義する際にはセレクターを指定します。上記記事では、そのセレクターについて解説しました。

今回のマルバツゲームでは上記記事で解説している3つの基本セレクターのうち「要素型セレクター」と「クラスセレクター」の2つのセレクターを利用しています。

デベロッパーツールを使ってリアルタイムにスタイルを変更する方法

あわせて読みたい
デベロッパーツールを使ってリアルタイムにスタイルを変更する方法CSSでスタイルの変更を行うときに便利なデベロッパーツールの基本的な使い方について学習します。デベロッパーツールを使うことで、ブラウザ上で直接スタイルの変更を行うことが出来るので、毎回CSSファイルを開いて修正する手間が省けます。...

デベロッパーツールに関してはマルバツゲームの作成とは直接関係はありませんが、デベロッパーツールを使うことで直接ブラウザ上でスタイル変更を行えるので、リアルタイムに変更を確認できます。

デベロッパーツールに慣れておくと開発効率も上がるので、ぜひともデベロッパーツールに使い慣れてほしいという気持ちからこちらの記事でも紹介しました。

CSSでテキストのスタイルを変更するパート2

あわせて読みたい
CSSでテキストのスタイルを変更するパート2CSSでテキストのスタイルを変更する方法を学びます。パート1とパート2の2部に分けて解説します。今回はパート2の内容で「line-height」「text-align」「text-decoration」の解説となります。...

マルバツゲームのボードの上に見出し(h1要素)を表示していて、その見出しに対して中央揃いでテキストを表示するようにしています。

テキストを中央揃いにする方法は上記記事の「text-align」を使うことで実現出来ます。

まとめ

今回の記事は、課題である「マルバツゲームのボードの作成」の紹介と、ボード作成に必要な知識の解説をしてきました。

マルバツゲームのボード作成に必要な知識については以下の6つの学習コンテンツで学んできました。

上記内容をふりかえり、これまで学習してきた内容をマルバツゲームのボードを作りながら思い出して行きましょう。

それでは、以下の記事で「マルバツゲームのボード作成」の課題に取り組んでみてください。

あわせて読みたい
【エクササイズ】CSSでマルバツゲームのボードを作る今回の練習課題ではHTMLのテーブルとCSSをうまく使って「マルバツゲーム」のボードを作っていただきます。課題をこなし、「HTMLのテーブルの作成方法」「CSS初級編」「ここまでやったCSS中級編」の知識の定着をさせましょう!...

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

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

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

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

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

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

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

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

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

無料特典を受け取る

 

COMMENT

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