<meta charset="UTF-8">\r
<meta http-equiv="X-UA-Compatible" content="IE=edge">\r
<meta name="viewport" content="width=device-width, initial-scale=1.0">\r
-\r
+<head>\r
<!-- ウェブサイトのタイトルを設定 -->\r
<title>まるばつゲーム</title>\r
\r
\r
<!-- ここから実際のゲーム画面 -->\r
<body>\r
- \r
<!-- 画面の上に表示されているタイトル -->\r
<header id="header">\r
<h1>まるばつゲーム</h1>\r
- <p>ウェブサイトで動く簡単なまるばつゲームを作ってみました</p>\r
+ <p class="description">ウェブサイトで動く簡単なまるばつゲームを作ってみました</p>\r
</header>\r
\r
- <!-- 本文 -->\r
- <main id="main">\r
- <!-- リセットボタン -->\r
- <form>\r
- <input type="button" value="リセット" id="reset">\r
- </form>\r
-\r
- <!-- ゲーム本体 -->\r
- <span id="p-table">\r
- <table id="maintable" align="center"></table>\r
- </span>\r
+ <div class="content-p">\r
\r
- <!-- メッセージが表示される場所 -->\r
- <p id="msg"></p>\r
\r
- <!-- 現在の設定 -->\r
- <p id="currentconfig"></p>\r
+ <!-- 本文 -->\r
+ <main id="main">\r
+ <!-- リセットボタン -->\r
+ <form>\r
+ <input type="button" value="リセット" id="reset">\r
+ </form>\r
\r
+ <!-- ゲーム本体 -->\r
+ <span id="p-table">\r
+ <table id="maintable" align="center"></table>\r
+ </span>\r
\r
- <!-- 設定 -->\r
- <h2>設定</h2>\r
- <form>\r
- <p>\r
- 縦方向のマス目の数<br>\r
- <input type="number" id="inputtablex">\r
- </p>\r
- <p>\r
- 横方向のマス目の数<br>\r
- <input type="number" id="inputtabley">\r
- </p>\r
- <p>\r
- プレーヤーの人数<br>\r
- <input type="number" id="inputplayernumber">\r
- </p>\r
- <input type="button" value="適用" id="apply">\r
- </form>\r
- \r
- </main>\r
+ <!-- メッセージが表示される場所 -->\r
+ <p id="msg"></p>\r
\r
- <footer id="footer">\r
+ <!-- 現在の設定 -->\r
+ <p id="currentconfig"></p>\r
+ </main>\r
\r
- </footer>\r
+ <footer id="footer">\r
+ <!-- 設定 -->\r
+ <h2>設定</h2>\r
+ <form>\r
+ <p>\r
+ 縦方向のマス目の数<br>\r
+ <input type="number" id="inputtablex">\r
+ </p>\r
+ <p>\r
+ 横方向のマス目の数<br>\r
+ <input type="number" id="inputtabley">\r
+ </p>\r
+ <p>\r
+ プレーヤーの人数<br>\r
+ <input type="number" id="inputplayernumber">\r
+ </p>\r
+ <input type="button" value="適用" id="apply">\r
+ </form>\r
+ \r
+ </footer>\r
+ </div>\r
\r
<!-- ゲームの動きなどを書いたファイルを読み込む -->\r
<script src="./script/define.js"></script>\r
/* 全体の見た目 */\r
body{\r
margin: 0; /* 外側の空白を0にする */\r
- min-width: 320px; /* 最初の横幅を設定 （これを設定しないとスマホで表示が崩れてしまう）*/\r
- width: 500px; /* 横幅を50%にする */\r
+ /* min-width: 320px;*/ /* 最初の横幅を設定 （これを設定しないとスマホで表示が崩れてしまう）*/\r
\r
/* 左右を中央揃え */\r
- margin-left: auto; \r
- margin-right: auto;\r
text-align: center;\r
}\r
\r
color: orange; /* 文字の色をオレンジにする*/\r
font-weight: bolder; /* 文字を太くする*/\r
\r
- width: 100px; /* ボックスの幅を画面のドット100個に設定 */\r
- height: 100px; /* ボックスの高さを画面のドット100個に設定 */\r
+ width: 125px; /* ボックスの幅を画面のドット100個に設定 */\r
+ height: 125px; /* ボックスの高さを画面のドット100個に設定 */\r
\r
- font-size: 35px; /* ボックス内の文字の大きさをドット20個に設定 */\r
+ font-size: 90px; /* ボックス内の文字の大きさをドット20個に設定 */\r
line-height: 20px; /* ボックスの1行の高さをドット20個に設定 */\r
\r
text-align: center; /* 文字を左右中央に配置 */\r
}\r
\r
+/* 説明のみため*/\r
+.description{\r
+ font-size: 120%;\r
+ display: none;\r
+}\r
+\r
+/* タイトルの見た目*/\r
+#header h1{\r
+ width: 100vw;\r
+ font-size: 400%; /* 文字を大きくする*/\r
+}\r
+\r
+\r
+.content-p{\r
+ display: flex; /*横並びにする*/\r
+ gap: 20px; /*横並びの余白を指定*/\r
+ width: 800px; /* 横幅を指定*/\r
+ justify-content: center;\r
+ margin-right: auto;\r
+ margin-left: auto;\r
+}
\ No newline at end of file
OSDN Git Service
