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

課題
  • HTML, CSSで学習してきた内容を元にマルバツゲームのボードを作ってみる
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴールです

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

課題レポジトリ

GitHub : css_excercise_for_intermediate_part_1

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

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

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

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

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

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

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

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

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

CSSのbackgroundとborderを理解する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る