<body>\r
<!-- 画面の上に表示されているタイトル -->\r
<header id="header">\r
- <h1>まるばつゲーム</h1>\r
+ <h1 class="title">まるばつゲーム</h1>\r
<p class="description">ウェブサイトで動く簡単なまるばつゲームを作ってみました</p>\r
</header>\r
\r
+ <!-- 横並びにするもの -->\r
<div class="content-p">\r
\r
\r
/* 全体の見た目 */\r
body{\r
margin: 0; /* 外側の空白を0にする */\r
- /* min-width: 320px;*/ /* 最初の横幅を設定 （これを設定しないとスマホで表示が崩れてしまう）*/\r
+ min-width: 600px; /* 横幅を指定*/\r
\r
/* 左右を中央揃え */\r
text-align: center;\r
}\r
\r
/* タイトルの見た目*/\r
-#header h1{\r
- width: 100vw;\r
+.title{\r
font-size: 400%; /* 文字を大きくする*/\r
+ margin-block: 0; /*上下の余白を削除*/\r
}\r
\r
-\r
.content-p{\r
display: flex; /*横並びにする*/\r
gap: 20px; /*横並びの余白を指定*/\r
- width: 800px; /* 横幅を指定*/\r
- justify-content: center;\r
+\r
+ /*中央寄せ*/\r
+ justify-content: center; \r
margin-right: auto;\r
margin-left: auto;\r
-}
\ No newline at end of file
+}\r
OSDN Git Service
