

**現象**  
CSSグリッドで画像(`image_0.svg`)の位置を指定しても、指定した位置に画像がフィットしません。

**期待値**  
画像が`grid-column: 3 / -3;` `grid-row: facebook-logo;`で指定した位置にフィットさせたい。

**再現手順**  
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。

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>
    
        <div class="main">
    
            <img class="facebook-logo-image" src="./image_0.svg" alt="facebookのロゴ">
    
            <div class="login-form">
                <form action="#">
                    <input type="email" name="mail">
                    <input type="password" name="pw">
                    <input type="submit" value="ログイン">
                    <p>または</p>
                    <a href="#">パスワードを忘れた場合</a>
                    <hr>
                    <button>新しいアカウントを作成</button>
                </form>
            </div>
    
            <div class="under-login-form-text">
                <p>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></p>
            </div>
    
        </div>
    
        <footer>
    
            <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="footer-menu">
                <a href="#">Facebookについて</a>
                <p>・</p>
                <a href="#">ヘルプ</a>
                <p>・</p>
                <a href="#">その他</a>
            </div>
    
            <div class="copy-right">
                <small>Facebook Inc.</small>
            </div>
    
        </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] 175px
                [or] 15px
                [create-new-account] 51px
                [forget-password] 27px
                [blank-middle] 35px
                [language] 85px
                [footer-menu] 11px
                [copy-right] 15px
                [blank-footer] 7px;
    }
    
    /* ヘッダー */
    header {
        grid-column: 2 / -2;
        grid-row: head;
    }
    
    /* facebookロゴ */
    .facebook-logo-img {
        grid-column: 3 / -3;
        grid-row: facebook-logo;
        width: 112px;
        height: 39.42px;
        text-align: center;
    }
    
[/code]

皆さまご回答宜しくお願い致します。

**追記**  
`grid-template-
rows`プロパティで指定している名前付き行のいくつかがどうしてCSSに存在しないのかと言いますと、まだ作成途中でCSSを記述している途中だからです。


CC BY-SA 4.0
2020-11-01T14:15:50.817
71646
2020-11-02T12:14:22.477
2020-11-02T07:30:36.170
36906
36906
question
css html5
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。


`stylesheet.css`の`.facebook-logo-img`を`.facebook-logo-
image`に変更して、class名が`facebook-logo-
image`のimgタグをグリッドアイテムにしたら、想定したグリッドコンテナに画像がフィットしました。

参考リンク  
[CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説](https://coliss.com/articles/build-
websites/operation/css/css-grid-layout-terminology.html)

**追記**

下記はソースコード  
`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のロゴ">
    </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
    
    /* ヘッダー */
    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;
    }
    
[/code]


CC BY-SA 4.0
2020-11-02T07:37:05.707
71661
2020-11-02T12:14:22.477
2020-11-02T12:14:22.477
36906
36906
71646
answer