【エクササイズ】CSSでマルバツゲームのボードを作る

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

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

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

https://tsuyopon.xyz/learning-contents/web-dev/html/how-to-use-table-in-html/

今回の課題ではHTMLのテーブルを使ってマルバツゲームのボードを作っています。

テーブルを作成する際に必要なタグを上記記事で学習しました。

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

https://tsuyopon.xyz/learning-contents/web-dev/css/how-to-set-color-in-css/

今回作るマルバツゲームのボードでボーダーを使っていますが、ボーダーの色の指定に関して16進数表記を使って2つの色を指定しています。

16進数表記の色の指定方法や、それ以外にどんな方法で色をセットできるか上記記事で学習しました。

CSSのbackgroundとborderを理解する

https://tsuyopon.xyz/learning-contents/web-dev/css/understand-background-and-border-in-css/

マルバツゲームのボードでボーダーを使っています。

ボーダーを実装するためにはborderプロパティを利用します。

borderプロパティの使い方は上記記事で学習しました。

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

https://tsuyopon.xyz/learning-contents/web-dev/css/understand-3-basic-selectors-in-css/

テーブル内のセル(td要素)に対して、共通なスタイル定義(borderプロパティ)を当てるためにクラスセレクターを利用しています。

クラスセレクターを利用することで同じclass属性値をセットしている要素に共通のスタイルを反映させること出来ます。

クラスセレクターについては上記記事で学習しました。

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

https://tsuyopon.xyz/learning-contents/web-dev/css/change-style-with-developer-tool/

デベロッパーツールをうまく活用することで、ブラウザ上でリアルタイムにスタイルを変更することが出来ます。

デベロッパーツールを使ってリアルタイムにスタイルを変更する方法は上記記事で学習しました。(アニメーション画像を使った解説付き)

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

https://tsuyopon.xyz/learning-contents/web-dev/css/how-to-change-style-of-text-in-css-part-2/

今回の課題では見出し(h1要素)のテキストを中央揃えにしています。

要素内のテキストを中央揃えにする方法は上記記事で学習しました。

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

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

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

あわせて読みたい

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