- HTML, CSSで学習してきた内容を元にマルバツゲームのボードを作ってみる
- GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです
課題内容は以下の課題レポジトリの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のほうが早く気づけるので早めに返信できるかと思います。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。