0

主にHTMLとCSSで作ったウェブサイトを公開しようとしているところです。パソコンだと正常に動くのに対して、iPhoneで確認しようとすると、固まって内容が見られなくなります。下記は作ったウェブサイトの1つのページのコードですが、どうでしょうか?ウェブページが重くてモバイルで上手く動きませんか?

<!DOCTYPE html>
<html lang="ja">

<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">

<body>

  <style>
    html {
      visibility: hidden;
      opacity: 0;
    }
  </style>

  <title>MORIKOBOSHI・</title>

  <div class="page-wrap">

    <div class="cp_cont">
      <input id="cp_toggle03" type="checkbox" />
      <div class="cp_mobilebar">
        <label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
      </div>
      <label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
      <div id="body" class="noscroll"></div>

      <header class="cp_offcm03">

        <nav>
          <ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px;">

            <li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム</a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ</a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">このサイトについて</a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献</a></li>


            <div class="searchbar">

              <form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
                <input class="search2" id="txtSearch" type="text" placeholder="Googleカスタム検索" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
                <input class="search1" type="submit" name="submition" value="検索" style="padding-left: 5px; top: 153px; height: 25px; width: 34px; display: inline-flex; justify-content: center;">
                <input class="search2" type="hidden" name="sitesearch" value="default.html">
              </form>
            </div>


            <script type="text/javascript">
              document.getElementById('frmSearch').onsubmit = function() {
                window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
                return false;
              }
            </script>


            <script>
              document.getElementById('cp_toggle03').onchange = function() {
                if (document.getElementById('cp_toggle03').checked) {
                  document.body.style.overflow = "hidden";
                } else {
                  document.body.style.overflow = "";
                }
              }

              if (!!window.performance && window.performance.navigation.type == 2) {
                window.location.reload();
              }
            </script>

          </ul>
        </nav>
      </header>

      <div class="setsumei">
        <br>
        <h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
        <br>
        <p style="text-align: justify; font-size: 16px;"></p>

        <p style="text-align: center; font-size: 13px;">著者:◯◯◯◯</p>
        <p style="text-align: center; font-size: 13px;">撮影日:◯◯◯◯年◯◯月◯◯日</p>

        <br><br>
        <p style="text-align: justify; font-size: 16px;">

          #
        </p>

      </div>

      <br><br>
      <div class="image">

        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

        <br><br>
        <a href="#"><img src="#" alt="#" width="90%"></a>

      </div>
    </div>

    <br><br>
    <footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | <a href="#">English</a></footer>

  </div>

  <style>
      html {
      visibility: visible;
      opacity: 1;
    }
    
    .body {
      background-color: white;
      font-family: sans-serif;
    }
    
    .searchbar {
      float: right;
    }
    
    .image {
      text-align: center;
    }
    
    .setsumei {
      margin-left: 20px;
      margin-right: 20px;
    }
    
    .footer {
      width: 100%;
      height: 40px;
      text-align: center;
      border-top: 1px solid black;
      position: absolute;
      bottom: 0;
      padding: 10px;
    }
    
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -40px;
    }
    
    .page-wrap:after {
      content: "";
      display: block;
    }
    
    .site-footer,
    .page-wrap:after {
      /* .push must be the same height as footer */
      height: 20px;
    }
    
    .site-footer {
      text-align: center;
      border-top: 1px solid black;
      padding: 10px;
    }
    
    *,
    *:before,
    *:after {
      padding-left: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    ol,
    ul {
      list-style: none;
    }
    
    a {
      text-decoration: none;
      color: black;
    }
    
    .cp_cont {
      height: auto;
    }
    /* menu */
    
    .cp_offcm03 {
      position: relative;
      z-index: 5000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      width: 100%;
      height: auto;
      padding-top: 0;
      -webkit-transition: transform 0.3s ease-in;
      transition: transform 0.3s ease-in;
      text-align: center;
      color: black;
      background-color: white;
    }
    
    .cp_offcm03 nav,
    .cp_offcm03 ul {
      height: 100%;
    }
    
    .cp_offcm03 li {
      display: inline-block;
      margin-right: -6px;
    }
    
    .cp_offcm03 a {
      display: block;
      padding: 15px 45px;
      margin-bottom: -5px;
      -webkit-transition: background-color .3s ease-in;
      transition: background-color .3s ease-in;
    }
    
    .cp_offcm03 a:hover {
      background-color: lightgray;
    }
    /* menu toggle */
    
    #cp_toggle03 {
      display: none;
    }
    
    #cp_toggle03:checked~.cp_offcm03 {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
    #cp_toggle03:checked~.cp_container {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
    .cp_mobilebar {
      display: none;
    }
    /* content */
    
    .cp_container {
      position: relative;
      top: 0;
      padding: 35px auto;
      -webkit-transition: transform .3s ease-in;
      transition: transform .3s ease-in;
    }
    
    .cp_content {
      margin: 0 auto;
      padding: 20px;
      height: 65vh;
      text-align: center;
    }
    
    @media (max-width: 1130px)and (min-width: 280px) {
      /* menu */
      .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
      }
      .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
      }
      .cp_offcm03 li {
        display: block;
        margin-right: 0;
      }
      .cp_offcm03 a {
        padding: 20px;
      }
      /* menu toggle */
      .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
      }
      .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
        transition: transform .3s ease-in;
      }
      .cp_menuicon>span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
        transition: transform .3s ease;
      }
      .cp_menuicon>span:before,
      .cp_menuicon>span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
        transition: transform .3s ease-in;
      }
      .cp_menuicon>span:before {
        -webkit-transform: translateY(-0.6em);
        transform: translateY(-0.6em);
      }
      .cp_menuicon>span:after {
        -webkit-transform: translateY(0.6em);
        transform: translateY(0.6em);
      }
      #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      #cp_toggle03:checked+.cp_mobilebar span:before,
      #cp_toggle03:checked+.cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
      #cp_toggle03:checked~.cp_offcm03 {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
      }
      #cp_toggle03:checked~.cp_container {
        -webkit-transform: translateX(250px);
        transform: translateX(250px);
      }
      input:checked~#h-menu_black {
        display: block;
        /*カバーを表示*/
        opacity: .6;
      }
      #h-menu_black {
        display: none;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .7s ease-in-out;
      }
      /* content */
      .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center;
      }
      .noscroll {
        overflow: hidden;
        position: fixed;
      }
  </style>

</body>

</html>

1
  • 質問用・動作確認用のURLを追記してみてはいかがでしょうか 2022年11月29日 10:29

0

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

のタグが付いた他の質問を参照する。