74234


**現象**  
CSSが全く読み込まれません。

**期待値**  
CSSを読み込んでブラウザ（Google Chrome）に反映させたいです。

**再現手順**  
下記のHTMLとCSSをGoogle Chromeで実行すれば反映されます。CSS設計の形式は、FLOCSSです。  
[![フォルダの構造](https://i.stack.imgur.com/mkKGX.png)](https://i.stack.imgur.com/mkKGX.png)

`index.html`

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="UTF-8">
        <link rel="reset" href="./foundation/reset.css">
        <link rel="grid" href="./foundation/grid.css">
        <title>Facebook</title>
    </head>
    
    <body>
        <div class="advice">
            <i class="fas fa-mobile-alt"></i>
            <p>iPhone用Facebookで高速ブラウジング</p>
        </div>
        <div class="fbLogo">
            <img src="./img/image_0.svg" alt="某SNSのロゴ">
        </div>
        <div class="loginForm">
            <input class="telNumEmail" type="tel email">
            <div class="lineSpacing"></div>
            <input class="password" type="password">
            <div class="loginButton">
                <button type="button">ログイン</button>
            </div>
            <hr>
            <div class="signUpButton">
                <button type="button">新しいアカウントを作成</button>
            </div>
            <div class="forgotPasswordLink">
                <a class="forgotPasswordLink" href="">パスワードを忘れた場合</a>
            </div>
        </div>
        <div class="localeSelector">
            <nav>
                <ul class="left-navi">
                    <li>日本語</li>
                    <li><a href="">Português (Brasil)</a></li>
                    <li><a href="">Español</a></li>
                    <li><a href="">Deutsch</a></li>
                </ul>
                <ul class="right-navi">
                    <li><a href="">English (US)</a></li>
                </ul>
            </nav>
        </div>
        <footer>
            <nav class="footer-navi">
                <ol>
                    <li><a href="">Facebookについて</a></li>
                    <li>・</li>
                    <li><a href="">ヘルプ</a></li>
                    <li>・</li>
                    <li><a href="">その他</a></li>
                </ol>
            </nav>
            <small>Facebook Inc.</small>
        </footer>
    </body>
    
    </html>
    
[/code]

`grid.css`

[code]

    /* ページ全体の設定 */
    
    body {
        display: grid;
        grid-template-columns: 16px 287px 16px;
        grid-template-rows: [advice] 48px [fbLogo] 47.42px [telNumEmail] 42px [lineSpacing] 8px [password] 44px [loginButton] 52px [separator] 18px [signUpButton] 60px [forgotPasswordLink] 54px [localeSelector] 86px [footerNav] 22px [copyright] 17px
    }
    
    
    /* パーツの配置 */
    
    body>* {
        grid-column: 2 / -2;
    }
    
    .adviceArea {
        grid-column: 1 / -1;
        grid-row: advice;
    }
    
    .fbLogo {
        grid-column: 1 / -1;
        grid-row: fbLogo;
    }
    
    .fbLogo img {
        width: 39.42px;
        height: 112px;
    }
    
    .telNumEmail {
        grid-column: 2 / -2;
        grid-row: telNumEmail; 
    }
    
    .lineSpacing {
        grid-column: 2 / -2;
        grid-row: lineSpacing;
    }
    
    .password {
        grid-column: 2 / -2;
        grid-row: password;
    }
    
    .loginButton {
        grid-column: 2 / -2;
        grid-row: loginButton;
    }
    
    .loginForm hr {
        grid-column: 2 / -2;
        grid-row: separator;
    }
    
    .siguUpButton {
        grid-column: 2 / -2;
        grid-row: siguUpButton;
    }
    
[/code]

`reset.css`

[code]

    /* A Modern CSS Reset */
    
    *,
    *::before,
    *::after {
        box-sizing: border-box
    }
    
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0
    }
    
    ul[role="list"],
    ol[role="list"] {
        list-style: none
    }
    
    html:focus-within {
        scroll-behavior: smooth
    }
    
    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
        line-height: 1.5
    }
    
    a:not([class]) {
        text-decoration-skip-ink: auto
    }
    
    img,
    picture {
        max-width: 100%;
        display: block
    }
    
    input,
    button,
    textarea,
    select {
        font: inherit
    }
    
    @media(prefers-reduced-motion:reduce) {
        html:focus-within {
            scroll-behavior: auto
        }
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important
        }
    
[/code]

`img/image_0.svg`の元々の`height`は339.39px、`width`は964pxです。


CC BY-SA 4.0
2021-02-23T14:03:10.943
74233
2021-02-23T14:23:23.023
2021-02-23T14:10:31.540
32986
36906
question
html css
CSSを読み込みたいのですが、どうしても読み込まれません。


`rel` 属性の値が `reset` や `grid` となっているため、これらの外部リソースがスタイルシートとして扱われておらず、 `link`
要素自体が無視されています。`rel` 属性の値を `stylesheet` に修正することで問題は解決します。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./foundation/reset.css">
        <link rel="stylesheet" href="./foundation/grid.css">
        <title>Facebook</title>
    </head>
    
    <body>
        <div class="advice">
            <i class="fas fa-mobile-alt"></i>
            <p>iPhone用Facebookで高速ブラウジング</p>
        </div>
        <div class="fbLogo">
            <img src="./img/image_0.svg" alt="某SNSのロゴ">
        </div>
        <div class="loginForm">
            <input class="telNumEmail" type="tel email">
            <div class="lineSpacing"></div>
            <input class="password" type="password">
            <div class="loginButton">
                <button type="button">ログイン</button>
            </div>
            <hr>
            <div class="signUpButton">
                <button type="button">新しいアカウントを作成</button>
            </div>
            <div class="forgotPasswordLink">
                <a class="forgotPasswordLink" href="">パスワードを忘れた場合</a>
            </div>
        </div>
        <div class="localeSelector">
            <nav>
                <ul class="left-navi">
                    <li>日本語</li>
                    <li><a href="">Português (Brasil)</a></li>
                    <li><a href="">Español</a></li>
                    <li><a href="">Deutsch</a></li>
                </ul>
                <ul class="right-navi">
                    <li><a href="">English (US)</a></li>
                </ul>
            </nav>
        </div>
        <footer>
            <nav class="footer-navi">
                <ol>
                    <li><a href="">Facebookについて</a></li>
                    <li>・</li>
                    <li><a href="">ヘルプ</a></li>
                    <li>・</li>
                    <li><a href="">その他</a></li>
                </ol>
            </nav>
            <small>Facebook Inc.</small>
        </footer>
    </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2021-02-23T14:10:18.567
74234
2021-02-23T14:23:23.023
2021-02-23T14:23:23.023
32986
32986
74233
answer