初めに

前回はHTMLについてざっくり目を通して、要素の基本を確認しました。
今回はCSSについて学んでいきます！
さらに、前回の記事で教えていただいたCodePenを活用して、今後はコードの埋め込みも試してみます。

書きなぐりの部分があるため、誤字脱字や、修正の必要がありましたらご指摘いただけると助かります。

では、よろしくお願いいたします！

今回の目的

CSS: デザインやレイアウト、見た目をどのように調整しているかを理解する。
CodePenを使用し、現時点でのコードを埋め込む。

本日のメニュー

CodePenの登録と実行環境の構築。
CSSの学習及びHTMLとの関係性の理解。(JavaScriptは今回無視します)
前回のHTMLは60行、今回は70行ですので、さくっと進めます。
JavaScriptについては255行ありますので、時間をかけて進めます。

環境

ブラウザ
GoogleChrome
テキストエディタ
~~VSCode Ver: 1.94.1~~
今回からはCodePenで学習を進めます。

学習メモ

まずはHTML、CSS、JavaScriptを全部CodePenに取り込みました。
CodePenに登録をした後は環境構築などなく始めることができるのでかなり便利だと思いました。
ライブラリについてはまだ分からないため、設定なしで進めます。 (後ほど学習)

実際の埋め込んだものはこちらです。
0.25xじゃないと全体表示ができないので今後修正を考えます。。。

See the Pen Untitled by S O (@S-O-the-styleful) on CodePen.

では、ここから各コードのまとまりごとに学習を進めています。

/* ページ全体の設定 */
body {
  /* 中央にゲーム要素を配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  margin: 0;
  position: relative;
}

display: flex;
要素の並び方の指定:横並び
justify-content: center;
要素の横の並び方を指定:中央寄せ
align-items: center;
要素の縦の並び方を指定:中央寄せ

主軸、交差軸については正しくrow(行)とcolumn(列)の理解が必要。
親要素、子要素にプロパティを指定することができる。

height: 100vh;
vh?pxではなく？使い分けは?
絶対的:px
相対的:%/vw/vh/em/rem
→em/remは後程学習

vw/vh:webブラウザのサイズを基準としたサイズ(viewport width/height)
%と似た動きだけど違いや用途は？
→%は親要素基準
vw/vhはブラウザ(画面)のサイズ基準
画面の手前に表示したいポップアップなどに便利。(サイトの重要なお知らせなど)

flex-direction: column;
要素の主軸が画面の縦方向(上下)に変更

margin: 0;
外側の余白、今回は１つの要素内で完結しているので不要？
→数値を10~100などに変更すると画面全体が大きくなって？スクロールできる余白が増えたので後々確認する様にします。

position: relative;
相対的な子要素の位置調整？
今回は既に下のコードで調整済みのため中央揃えで統一してる場合だと不要なのでは？後ほど確認。
justify-content: center;
align-items: center;

/* ゲーム画面キャンバスのスタイル */
#gameCanvas {
  /* 枠線をつける */
  border: 2px solid #000;
  /* 背景色を白に */
  background: #fff;
  /* ゲームが始まるまで非表示 */
  display: none;
}

#gameCanvas
#で特定の要素のid属性をターゲットにしてスタイルを適用、今回はgameCanvas

border: 2px solid #000;
枠線とそのサイズとカラー
border-width, border-style,で指定する必要がない？
gameCanvasで指定している範囲について処理を行うということ？後ほど確認。

background: #fff;
背景色の指定

display: none;
画面の表示処理
→ここはJavaScriptでの処理？後ほど確認。

/* 各画面 (スタート、ゲームオーバー、難易度選択、クリア) のスタイル */
#startScreen,
#gameOverScreen,
#difficultyScreen,
#congratsScreen {
  /* 縦に要素を並べる */
  display: flex;
  flex-direction: column;
  align-items: center;
}

コメントに書かれている通り要素のid属性をターゲットにしてスタイルを適用
flexbox、中央揃いで各ボタンが縦並びになるように指定。

/* すべてのボタンに適用するスタイル */
button {
  margin: 5px;
}

button {
margin: 5px;
}
各ボタン要素間の上下左右に空白を作るためのプロパティ
1つの値:margin: 20px (四方向すべてに同じ余白)
2つの値:margin: 20px 10px; (最初の値が上下、2つ目の値が左右)
3つの値:margin: 20px 10px 30px; (上、左右、下)
4つの値:margin: 20px 10px 30px 5px; (上、右、下、左)
上記の順番で空白を作成することも可能。
また、margin-top, margin-right, margin-bottom, margin-leftで特定の方向だけに余白を設定可能。
今回は１つの値で四方向すべてに同じ余白(5px)を持たすプロパティ

/* スコア表示エリアのスタイル */
#scoreBoard {
  /* スコアやボタンを左右に配置 */
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 5px; /* 上端に配置 */
  padding: 0 20px;
  align-items: center;
}

justify-content: space-between;
要素を横方向（または縦方向）に両端に配置し、間に均等なスペースを設けるためのプロパティ
width: 100%;
画面に対しての使用率。画面端部まで配置で使用するため100%
端から少し余白を設けるために％を調整するのか、他の方法で調整するのがいいのか？
→paddingを使用し、親要素の内側に余白を設ける。
※他だとgapがあるが、端部には影響がなく、各要素間にしか影響しない。

position: absolute;
親要素がない場合ビューポートを基準にして配置される。
top: 5px;
padding: 0 20px;
align-items: center;
基準となる親要素の上から5px、余白は上下0px左右20px、中央揃え。
ちなみに上下左右の指定するときpxとか省けるのか・・・？
→0の場合のみ省略可能とのこと。確かにどの単位でも0は0ですね・・・

/* スコア表示とHOMEボタンのスタイル */
#homeButtonFixed,
#scoreDisplay {
  background-color: #000; /* 背景色を黒に */
  color: white; /* 文字色を白に */
  border: 2px solid black; /* 枠線を黒に */
  padding: 5px 10px; /* ボタンサイズ調整 */
  font-size: 14px;
  display: flex;
  align-items: center;
}

画面上部の左右に配置されているスコアとHOMEボタンについては、
コードの中身が上にあるものと類似しているため無視します。

/* ポーズボタンのスタイル */
#pauseButton {
  background-color: #000;
  color: white;
  border: 2px solid black;
  padding: 5px 10px;
  cursor: pointer; /* マウスオーバーで手のアイコン */
  font-size: 14px;
}

cursor: pointer;
この要素にマウスを乗せると、カーソルが「手のアイコン」に変わる。
下の一覧を試したのですが、全部見たことあるものでした。
この1行でカーソル表示の変更を行っているのですね。

cursor プロパティの値一覧
default - 通常の矢印カーソル（デフォルト）。
pointer - 手のアイコン（リンクやボタンに使用）。
text - テキスト入力カーソル（I字型、テキストを選択できる場所に使用）。
move - 移動用カーソル（要素をドラッグして移動できることを示す）。
not-allowed - 操作禁止カーソル（赤い斜線が表示されることが多い）。
wait - 処理中カーソル（砂時計や回転する円）。
help - ヘルプが利用可能な状態（疑問符のアイコンが表示されることもある）。
progress - 処理中だが操作可能な状態。
crosshair - 十字のカーソル（ピクセル単位で選択する場合に使用）。
grab - ドラッグ可能な要素（つかめる手のアイコン）。
grabbing - ドラッグ中の状態を示すカーソル（掴んでいる手のアイコン）。
none - カーソルを非表示。
url() - カスタムカーソル画像を使用し、独自のアイコンを表示。

あとがき

元のCSSやHTMLをいじりながら今ある範囲を覚えた感じです。
出来上がったものから学べることは多いですが、基礎知識が足りないため、結局は基本的なことをサイトや動画等で学ぶことになりました。
その分今回あるコード以外の理解もできたかと思います。

最後に

次回はJavaScriptを学習していきたいのですが、一度HTML,CSSを学習しながらＨＰ作成でもしてみようかなと思います。
基本は空白ページからノーコード、ローコードで制作していく形になるかとは思いますが、そのページをHTML,CSSならこう書くかな？というのを意識して進めます。

後で調べるメモ(書きなぐり)
em:親要素のフォントサイズに対する相対的な値
指定された要素に対する相対的な値
letter-spacingプロパティ：文字の間隔を決める

rem:htmlタグに指定されたフォントサイズを基準とした相対的な値

初期画面にも枠線が欲しい。 border-width, border-style,で調整。

position: absolute; を使うと、要素が文書の流れから外れるため、周囲の要素はその要素の存在を認識しません。このため、レイアウトが崩れやすい場合があります。
position: absolute; は、要素を文書の通常のフローから外し、親要素（またはビューポート）に対して相対的に配置します。
位置指定プロパティ（top, right, bottom, left）を使って、具体的な位置を決めます。
親要素に position: relative; を指定することで、基準となる場所を指定することができます。

Flexboxはしっかり学ぶ必要があると思った。→HTMLを触らず簡単に変更が可能。作業性の向上や可読性、修正作業の簡略化ができるかも？

参考