diff --git a/style.css b/style.css index c3fb038..6017cc3 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,3 @@ - body { font-family: Arial, sans-serif; background-color: #0d1117; @@ -6,15 +5,17 @@ body { margin: 0; padding: 20px; display: flex; - justify-content: flex-start; - align-items: flex-start; - flex-direction: column; + justify-content: center; /* 水平方向の中央揃え */ + align-items: center; /* 垂直方向の中央揃え */ + height: 100vh; /* ビューポート全体の高さを占める */ + flex-direction: column; /* 縦方向に配置 */ } form { display: flex; flex-direction: column; - max-width: 400px; + max-width: 600px; /* フォームの最大幅を600pxに設定 */ + width: 100%; /* フォームを親要素の幅に合わせる */ } label { @@ -26,12 +27,13 @@ input, textarea { margin-top: 5px; padding: 8px; font-size: 16px; - color: #fff; background-color: rgba(255, 255, 255, 0.7); border-radius: 5px; border: none; outline: none; color: #474747; + width: 100%; /* 幅を100%に設定 */ + box-sizing: border-box; /* パディングを含めた幅調整 */ } button { @@ -43,6 +45,7 @@ button { border-radius: 0px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; + margin-top: 10px; /* ボタンに余白を追加 */ } button:hover { @@ -54,15 +57,15 @@ body, h1, p, label, a, button { color: white; } - -status { - width: 100%; - height: 150px; - margin-top: 20px; - padding: 10px; - border: 1px solid #ccc; - background-color: #333; - color: white; - overflow-y: scroll; - white-space: pre-wrap; - } +#status { + width: 100%; + height: 150px; + margin-top: 20px; + padding: 10px; + border: 1px solid #ccc; + background-color: #333; + color: white; + overflow-y: scroll; + white-space: pre-wrap; + box-sizing: border-box; /* パディングを含めた幅調整 */ +}