1

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

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

再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。

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

<!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>
@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;
}
4
  • 1
    この記事 <hr>: 主題分割 (水平線) 要素 だと上手く表示されています。パッと見るとcssの内容が結構違っていますので、色々変えて試してみてください。
    – kunif
    Commented 2020年11月5日 13:12
  • 1
    今回の質問のような場合には、必要な箇所のみ("水平線"の部分だけ)を切り出した方が質問も見やすくなりますし、回答もすっきりしたものになると思います。 / 参考ヘルプ "できるだけコードを削った上で、同じ問題が出るようにする。"
    – cubick
    Commented 2020年11月6日 1:58
  • @kunif 承知しました。色々と試してまいります。
    – atago_IT
    Commented 2020年11月6日 16:26
  • @cubick 教えて頂きありがとうございます。次回から実践いたします。
    – atago_IT
    Commented 2020年11月6日 16:26

1 件の回答 1

1

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

hr 要素のユーザーエージェントスタイルシートに overflow: hidden が指定されている一部のブラウザでは、テキストがパディング領域で切り取られ想定通りに表示されない、という現象が発生します。このため、

  • hr 要素に overflow: visible を設定する
  • padding プロパティでテキストが切り取られないように余白を確保しておく

などの対処策が必要になります。次のコードでは前者の方法を用いています。また、文字周辺の線を消すために background-color プロパティを使っています。

* {
    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;
    overflow: visible; /* 追加 */
}

.login-form hr::before {
    content: "または";
    display: inline-block;
    position: relative;
    top: -12px;
    padding: 0 10px;
    font-size: 20px;
    background-color: #fff; /* 追加 */
}
<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>

もしくは、 Flexbox を用いて ::before, ::after 要素の間にテキストを入れることでも、同様の装飾を行えます。この場合は overflow プロパティについて特に注意する必要はありません。

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

.hr { /* 追加 */
  display: flex;
}

.hr::before,
.hr::after { /* 追加 */
  content: "";
  flex: 1;
  border-top: 1px solid;
  transform: translateY(50%);
}
<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="ログイン">
  <div class="hr">
    または
  </div>
  <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>

1
  • ソースコードまで記載して頂きありがとうございました!解決できました。
    – atago_IT
    Commented 2020年11月8日 13:21

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

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