ゲームサイト制作２週目

モバイルでも崩れずに表示できるようメニューを調整。
遊んでいる最中に誤ってメニューを押してしまった、なんていう操作ミスを誘発しないよう（それでもミスは起きるかも？）右上に配置し、アイコンとテキストを縦配置に変更した。

アイコンは追々自作することとして一旦仮置き。
サイトロゴを作ってみたくなったので作成してみた・・・しかし・・・。
うん、ロゴデザインを考える人は凄いですね！
私にゃ力量が足らなすぎる（笑）
サイトロゴも追々作るとして、、ホーム画面の作成に取り掛かろう。

コピー用紙に画面構成をラフスケッチして、実際に組むこと４時間。
トップに表示させたいゲーム（新着や人気など）をスライドさせるための枠を作成。

サイトのデザイン考えて作って、をやっていると肝心な中身を始めることができないことに気付く起平でした（笑）
いや、いいんだ！
１歩ずつ着実に進めて行けばきっと完成するはず。

今回躓いたところ

1. ファイル名の先頭文字が小文字の場合importできない

2. 縦配置で横中央に配置する方法

3. GCPのCloud Runへコンテナをデプロイする方法

同じところで躓く方がいないように解決方法をかいておきます。ご参考になれば幸いです。

// CSS
/* .Blockは好きな名前に変更してください */
.Block {
  width: 100px;  /* ※親要素の横幅フルに使いたい場合はwidthを100%とする */
  height: 100px; /* ※中央揃えにする場合heightの指定が必須であること注意 */
  display: flex;
  flex-direction: column;  /*column指定で縦に配置できるようになる*/
  item-align: center;      /* 横方向に中央寄せ */
  justify-content: center; /* 縦方向に中央寄せ */
}

// JSX側
import styles from './[cssファイルを指定]'

export default function コンポーネント名(props) {
  return (
    <div class={styles.Block}>
      <img 略 /> {/*アイコン用*/}
      <div>ラベル</div> {/*アイコン下に表示するラベル  pでもdivでもご自由に*/}
    </div>
  );
}

GCPのCloud Runへのデプロイについては困っている方が辿り着きやすいように後日別記事でアップする予定です。