0

現象
ログインフォームとログインボタン(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%;
}

2 件の回答 2

1

.login-form に対して width: 100% を設定した場合、それは「.login-form が付与された要素の横幅を 100% に設定する」という意味になります。つまり、「ログインフォームとログインボタンを幅いっぱいに広げる」ためには、ログインフォームとログインボタン自体へ width プロパティを設定するか、それと同等の装飾を行う必要があります。

現状未完成部分もあるとのことなので、質問文のソースコードで .login-form 自体は横幅いっぱいになっていると仮定して進めます。まず、最も簡単な解決策は「ログインフォームとログインボタン自体へ width プロパティを設定する」ことです。これは各要素へ width プロパティを適用するだけで行えます。次のコードでは、ログインフォームの各 input 要素とログインボタンへクラスを割り当て、それらへ width: 100% を設定しています。

* {
  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-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%;
}

.login_email, .login_password, .login_submit { /* 追記 */
  width: 100%;
  box-sizing: border-box;
}
<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" class="login_email" name="mail">
  <input type="password" class="login_password" name="pw">
  <input type="submit" class="login_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>

もう一つの解決策として、各要素へ width: 100% を適用したときと同等の装飾を行う方法があります。やり方は幾つかありますが、次のコードで採用したのは Flexbox を用いる方法です。Flexbox は要素を並べるために使用するもので、今回は flex-direction プロパティcolumn を指定し、縦方向へ要素を並べています。Flexbox では交差軸方向のサイズは通常 flex コンテナ全体のサイズであるため、 column を指定すると横幅は flex コンテナ全体となり、 width プロパティを指定する必要がなくなります。

* {
  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-logo-image {
  grid-column: 3 / -3;
  grid-row: facebook-logo;
  width: 112px;
  height: 39.42px;
  margin: 0 auto;
}

.login-form {
  display: flex; /* 追加 */
  flex-direction: column; /* 追加 */
  grid-column: 2 / -2;
  grid-row: login-form-row;
  margin: 7px;
  height: 42px;
  width: 100%;
}
<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>

1
  • 期待値を達成できました。ありがとうございました!
    – atago_IT
    Commented 2020年11月4日 15:34
0

ログインフォーム(.login-form)のCSSには、"margin: 7px;" という設定がされているので、上下左右に7pxの余白(margin)がつく。

その余白部分があることで"横幅いっぱいに表示されない"と思っているのであれば、設定を"margin: 0px;"に変更すれば良いのでは?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。