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

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

【やる気満々な方向け】学習サポートとオンライン講義やってます!

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

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