現象
ログインフォームとログインボタン(class名は.login-form
)にwidth: 100%;
をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、ChromeかEdgeのデバイスエミュレーションでiPhone 5/SEの設定で実行しますと再現できます。
なお、まだ作りかけですのでHTMLもCSSも不完全です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook-copy</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<i class="fas fa-mobile-alt"></i>
<div class="header-text">
<p>iPhone用Facebookで高速ブラウジング</p>
</div>
</header>
<img class="facebook-logo-image" src="./image_0.svg" alt="facebookのロゴ">
<form class="login-form" action="#">
<input type="email" name="mail">
<input type="password" name="pw">
<br>
<input type="submit" value="ログイン">
<p>または</p>
<a href="#">パスワードを忘れた場合</a>
<hr>
<button name="create-account">新しいアカウントを作成</button>
</form>
<div class="under-login-form-text">
<p>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></p>
</div>
<div class="language">
<p>日本語</p>
<a href="#">English (US)</a>
<a href="#">Português (Brasil) </a>
<a href="#">中文(简体) </a>
<a href="#">Español</a>
<a href="#">Français (France) </a>
<a href="#">Deutsch</a>
<button>+</button>
</div>
<div class="under-menu">
<a href="#">Facebookについて</a>
<p>・</p>
<a href="#">ヘルプ</a>
<p>・</p>
<a href="#">その他</a>
</div>
<footer>
<small>Facebook Inc.</small>
</footer>
</body>
</html>
stylesheet.css
@charset "UTF-8";
/* 基本設定 */
* {
margin: 0;
}
/* ページ全体の設定 */
body {
display: grid;
grid-template-columns: 15px 52px 1fr 52px 15px;
grid-template-rows:
[head] 45px
[facebook-logo] 40px
[login-form-row] 175px
[or] 15px
[create-new-account] 51px
[forget-password] 27px
[blank-middle] 35px
[language] 85px
[under-menu] 11px
[copy-right] 15px
[blank-footer] 7px;
}
/* ヘッダー */
header {
grid-column: 2 / -2;
grid-row: head;
}
/* facebookロゴ */
.facebook-logo-image {
grid-column: 3 / -3;
grid-row: facebook-logo;
width: 112px;
height: 39.42px;
margin: 0 auto;
}
.login-form {
grid-column: 2 / -2;
grid-row: login-form-row;
margin: 7px;
height: 42px;
width: 100%;
}