質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.11%

セーフエリアが作れない。env(safe-area-inset-bottom);

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 76

kentaros

score 7

セーフエリアを作りたい

iPhoneXの画面下のメニューバーが被らないようにセーフエリアを作ろうとしています。
スマホ表示用のページをコーディング中です。
クラス名「os1_d0088」をフッターに固定しています。

env(safe-area-inset-bottom);が効かない

ネットでセーフエリアの作成方法を調べたところ
「env(safe-area-inset-bottom);」と「viewport-fit=cover」を
書き込めばできると書いていたのですが、

Atomエディタで「os1_d0088」のcssに書き込んだところ「env(safe-area-inset-bottom);」が反映されず、
困っています。

該当のソースコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,viewport-fit=cover" >
    <link rel="stylesheet" href="slick2/slick/slick.css">
    <link rel="stylesheet" href="slick2/slick/slick-theme.css">
    <title></title>

    <style>



      .os01_d0088{
        height:100px!important;
        width:100%!important;
        padding-left:40px!important;
        padding-right:40px!important;
        border: 1px solid gray!important;
        z-index: 5!important;
        overflow: hidden!important;
        padding-bottom:100px!important;
        position: fixed !important;
        bottom:0 !important;
        left:0;
        right:0;
        background-color: white!important;
        font-size:14px!important;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }

      .os01_d0088 a{
        list-style: none!important;

      }

      .os01_d0088 a .contents{
        display: flex!important;
        border-left:solid 1px gray!important;
        border-right:solid 1px gray!important;
        background: rgb(250,250,250)!important;

      }
      .os01_d0088 a .contents .leftcontent{
        width:30%!important;
        height:100px!important;
        padding:5px!important;
      }
      .os01_d0088 a .contents .leftcontent img{
        max-width: 100%!important;
        height:83%!important;
        margin-top:7px!important;
      }
      .os01_d0088 a .contents .rightcontent{
        position: relative;
        padding:5px!important;
      }
      .os01_d0088 a .contents .rightcontent p{
         max-width: 210px!important;
         overflow: hidden!important;
         text-overflow: ellipsis!important;
         white-space: nowrap!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-one{
        color:black!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-two{
        color:black;
        font-size:0.8rem!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-three{
        position:absolute!important;
        bottom:10px!important;
        color:black!important;
      }
      .os01_d0088 .slide-arrow{
        position: absolute!important;
        width:25px!important;
        z-index: 3!important;
      }

      .os01_d0088 .prev-arrow{
        left:8px!important;
        top:35px!important;
      }
      .os01_d0088 .next-arrow{
        right:8px!important;
        top:35px!important;
      }
      .os01_d0088 .slick-prev{
        left:10px!important;
        z-index: 2!important;
      }



    </style>
  </head>
  <body>
    <h1>d00xxのデザインサンプル</h1>
    <main>

    <div class="ad-space-header">オススメ記事一覧</div>
        <div class="os01_d0088">
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>

          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
        </div>




    </main>

  </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる