Skip to main content
テキストファイル名を削除しました。
ソース リンク
atago_IT
  • 237
  • 6
  • 22

index.html

stylesheet.css

index.html

stylesheet.css

ソース リンク
atago_IT
  • 237
  • 6
  • 22

区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。

現象
区切り線だけ表示されて「または」というテキストが表示されないです。

期待値
区切り線の途中に「または」というテキストを表示したいです。

再現手順
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">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
    <header>
        <div class="header-icon">
            <i class="fas fa-mobile-alt"></i>
        </div>
        <p class="header-text">iPhone用Facebookで高速ブラウジング。</p>
    </header>

    <img class="facebook-logo-image" src="./image_0.svg" alt="facebookのロゴ">

    <form class="login-form" action="#">
        <input type="email" placeholder="携帯電話番号またはメールアドレス" required name="mail">
        <input type="password" placeholder="パスワード" required name="pw">
        <input type="submit" value="ログイン">
        <hr>
        <a href="#">パスワードを忘れた場合</a>
        <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;
    font-family: sans-serif;
}

/* ページ全体の設定 */
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: 1 / -1;
    grid-row: head;
    background-color: #fffbe2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #576b95;
    font-size: 14px;
}

.header-icon {
    margin-right: 5px;
}

/* 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;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    width: 100%;
}

.login-form input {
    line-height: 41px;
    margin-bottom: 4px;
    border-radius: 5px;
    border-top: none;
    border-left: 0.1px solid #757575;
    border-right: 0.1px solid #757575;
    border-bottom: 0.1px solid #757575;
    background-color: #f5f6f7;
    color: #fcfcfc;
}

.login-form input[type="submit"] {
    margin-top: 4px;
    background-color: #1877f2;
    font-weight: bold;
    font-size: 17px;
    color: white;
    border: none;
}

.login-form hr {
    margin-top: 30px;
    border: none;
    border-top: 1px solid;
    text-align: center;
}

.login-form hr::before {
    content: "または";
    display: inline-block;
    position: relative;
    top: -12px;
    padding: 0 10px;
    font-size: 20px;
}