71691


**現象**  
ログインフォームとログインボタン(class名は`.login-form`)に`width: 100%;`をCSSで適用しようとしても効かないです。

**期待値**  
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。

**再現手順**  
[facebookのログイン画面](https://m.facebook.com/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&_rdr)を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone
5/SEでの画面を表示させて出てきたものを模写コーディングしています。

下記のコードを、ChromeかEdgeのデバイスエミュレーションでiPhone 5/SEの設定で実行しますと再現できます。  
なお、まだ作りかけですのでHTMLもCSSも不完全です。

`index.html`

[code]

    <!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>
    
[/code]

`stylesheet.css`

[code]

    @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%;
    }
    
[/code]


CC BY-SA 4.0
2020-11-02T12:30:10.240
71677
2020-11-03T08:00:49.053
2020-11-02T14:51:22.967
36906
36906
question
html css html5
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。


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

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


CC BY-SA 4.0
2020-11-03T02:21:16.630
71681
2020-11-03T02:21:16.630
217
71677
answer


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

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

[code]

    * {
      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;
    }
[/code]

[code]

    <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>
[/code]

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

[code]

    * {
      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%;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-11-03T08:00:49.053
71691
2020-11-03T08:00:49.053
32986
71677
answer