@protein_d (k .com)posted at 2023-01-10

スマホ対応のレスポンシブが上手くできません。ご教授お願いします！

Q&A

解決したいこと

HPを始めて作ってみたのですが、スマホ対応のレスポンシブ画面にならなくて困ってます。
どうしたらスマホにもバランスよく反映されるか、どなたかご教授をお願いします。
HPは↓のリンクになります。
https://protine-d.space/

発生している問題・エラー

出ているエラーメッセージを入力

HTMLコード

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

 <head>
 <meta charset="utf-8">
 <title>プロテイン・D・labo</title>
 <meta name="description" content="ディスクリプションを入力">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

 <body>

    <!-- ヘッダー -->

    <header>
        <div class="head_img">
        <img src="images/IMG_8661.PNG" alt="#" width="200px">
        </div>
    </header>

    <!-- ここからコンテンツ -->
    <!-- 転生マッスル -->

    <div class="all_c">
    <article>

        <figure>
            <div class="container_1">
       
                <img src="images/IMG_2470.JPG" alt="#" width="300px" height="350px">

            <div class="text_t">
                <p><span class="title_a">転生マッスル<br>〜異世界フィットネス〜</span></p>
                <p><span>//あらすじ//</span></p>
                <p>伝説のボディビルダー、中村武志。人呼んで『マッスル中村』。<br>
                彼はある日の大会連覇に向けて減量中に追い込み過ぎて餓死してしまった。<br>
                目が覚めると赤ん坊の姿で異世界に転生していた・・・。<br>
                気付くと人や物、魔物の頭上に数字が浮かびあっがていた。<br></p>
                <p>『なんだ？　この数字は・・・？』</p>
                <p>それは、たんぱく質とカロリーが見えるユニークスキルだった。<br></p>
                <p><span>な、な、な、なんと！？</span></p>
                <p>ゴブリンが！？ オークが！？ 魔物達がフィットネスジムを経営！？<br>
                美少女エルフから人類を脅かす魔王軍までが筋トレの虜に！？<br>
                これは、筋トレが世界を救う<br></p>
                <p><span>マッスルファンタジーなのである!!</span></p>
                </div>
            </div>
            <div class="container_2">  
                <button type="submit"><a href="https://ncode.syosetu.com/n7954hb/"><img src="images/IMG_2343.jpg" width="100px">
                <figcaption>小説家になろう</figcaption></a></button>

                <button type="submit"><a href="https://kakuyomu.jp/works/16816452221467494905"><img src="images/IMG_2771.JPG" width="100px">
                <figcaption>カクヨム版</figcaption></a></button>
                
                <button type="submit"><a href="https://www.alphapolis.co.jp/novel/716043600/375514143"><img src="images/IMG_2781.JPG" width="100px">
                <figcaption>アルファポリス版</figcaption></a></button>
            </div>
        </figure>
    </article>

   <!-- つくブル -->

    <article>
        <figure>
            <div class="container_1">
                <img src="images/IMG_6297.PNG" alt="#" width="300px" height="350px">

            <div class="text_tb">
                <p><span class="title_b">つくも神の奇妙なひとり言<br>〜トラブル・ブルース〜</span></p>
                <p><span>//あらすじ//</span></p>
                <p>学校でも有名な不良高校生、國枝一護は親友の力漢とゴミ捨て場で西洋人形に<br>
                面白半分で触れてしまった・・・。<br>
                <br></p>
                <p>それが呪いの人形とは知らずに・・・。<br></p>
                <br>
                <p>その日を境に一護の生活は一変してしまう。<br>
                鳴り止まない非通知着信、相次ぐ仲間達の事故、<br>
                不登校になる親友、付け狙う怪しい陰陽師、<br>
                赤い人、呪われた友達、呪い返しに悩まされる女。<br></p>
                <br>
                <p><span>『ワタシ、メリー・・・イマ、アナタノウシロニイルノ』</span><br></p>
                
                </div>
            </div>
            <div class="container_2">  
                <button type="submit"><a href="https://ncode.syosetu.com/n6629hn/"><img src="images/IMG_3627.PNG" width="100px">
                <figcaption>小説家になろう</figcaption></a></button>

                <button type="submit"><a href="https://kakuyomu.jp/works/16816927860712353670"><img src="images/IMG_5466.PNG" width="100px">
                <figcaption>カクヨム版</figcaption></a></button>
                
                <button type="submit"><a href="https://www.alphapolis.co.jp/novel/716043600/562622973"><img src="images/IMG_5468.PNG" width="100px">
                <figcaption>アルファポリス版</figcaption></a></button>
            
            </div>
            </div>
        </figure>
    </article>

    <!-- 下の段 -->
    <!-- プロテイン・ドールズ -->

    <div class="all_b">

    <article>
        <figure>
            
            <div class="container_1">
                
                <img src="images/IMG_5842.JPG" alt="#" width="300px" height="350px">

            <div class="text_td">
                <p><span class="title_c">プロテイン・ドールズ<br>〜茶番劇場〜</span></p>
                <p><span>//あらすじ//</span></p>
                <p>とあるweb作家の屋根裏部屋に収集された球体関節人形。<br>
                作家はその人形達を可愛がり、大切に保管した。<br>
                そして人形達はその体にひっそりと命を宿した。<br>
                <br>
                <br>
                彼女達は主人の寝静まった真夜中に人知れず動き出す・・・。<br>
                <br>
                <br>
                夜な夜な繰り広げられる人形達のほっこり劇場！！<br>
                可愛く、コメカル<br>
                マンガから動画まで！<br>
                人形達の茶番劇場はいかが？</p>
                </div>
            </div>

            <div class="container_2">

                <button type="submit"><a href="https://www.alphapolis.co.jp/manga/716043600/187657991"><img src="images/IMG_5867.JPG" width="100px">
                <figcaption>web漫画版</figcaption></a></button>

                <button type="submit"><a href="https://www.youtube.com/channel/UCIpTBLgNR3_zzkvVHeSbRlQ"><img src="images/IMG_8614.JPG" width="100px" height="150px">
                <figcaption>YOU TUBE</figcaption></a></button>
                
                <button type="submit"><a href="https://www.tiktok.com/tag/%E3%83%97%E3%83%AD%E3%83%86%E3%82%A4%E3%83%B3%E3%83%BB%E3%83%89%E3%83%BC%E3%83%AB%E3%82%BA"><img src="images/IMG_8610.PNG" width="100px" height="150px">
                <figcaption>TIK TOK</figcaption></a></button>
             </div>
        </figure>
    </article>

    <article>
        <figure>
            <div class="container_3">

                <button type="submit"><a href="https://store.line.me/stickershop/product/21068644/ja">
                    <img src="images/IMG_8650.JPG" alt="#" width="300px"><figcaption>Lineスタンプ</figcaption></a></button>

                    
                    <h3 class="ttt">↓お問合せはこちら↓</h3>
                    <h6>作成、書籍、動画作成などお仕事の依頼はDMまで</h6>
                    <button type="submit"><a href="https://mobile.twitter.com/merianobook"><img src="images/IMG_8668.PNG" alt="twitter" width="100px"></a></button>

                    <div class="blog">
                    <button type="submit"><a href="http://xs918679.xsrv.jp/pdllabo.com"><img src="images/IMG_8671.PNG" alt="ブログ"></a></button>
                    </div>
                    <br>
                    <h6>@プロテイン・LABO</h6>
            </div>
        </figure>
    </article>
</div>

 </body>

CSSコード


/* 全体 */

body {

    max-width: 1280px;
    min-width: 481px;
    width: 100%;
    text-align: enter;
    justify-content: center;
    margin-right:auto;
    margin-left: auto;  
}

     
body span {
  font-size: 16px;
  font-weight: 600;
}

/* open　ここは質問ページでない */

.oop {
  text-align: center;
  margin-bottom: 0;
}

.oop button {
  margin-top: 0;
  font-size: 20px;
}

h3 {
  font-family: 'Rampart One';
}

/* open　ここは質問ページでない　END */

/* button */
button {
  background: rgb(223, 233, 223);
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 220px;
  padding: 10px 25px;
  color: #f9efef;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  box-shadow: 5px 5px 0 #09f014;
  border-radius: 50px;}

button:hover {
background-color: #65e707;
box-shadow: 0 0 0;
transform: translate(5px, 5px);
}

button:after {
  position: absolute;
  top: 50%;
  right: 20px;
  transition: 0.2s ease-in-out;
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transform: translateY(-50%);
}

.head_img {text-align: center;}

.all_c {
    display: flex;
    justify-content: space-between;
}

.all_b {
    display: flex;
    justify-content: space-between;
}


/*  転生マッスル　*/


.container_1 {
    display: flex;
    justify-content: center;
    background-color: aquamarine;
    width: 600px;
    height: 600px;
    min-width: 275px;
    max-width: 550px;
    box-shadow: 5px 5px 10px #baecbd;
    margin-bottom: 20px;}

.container_1 img {
    box-shadow: 0 20px 2px 5px rgba(33, 227, 65, 0.5)
    }

.title_a {
  font-size: 18px;
  color: #fff;
  text-shadow: 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800, 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800;
}


/* アニメーション */

.container_1 img {
    animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
   
  @keyframes zoomIn {
    0% {
      transform: scale(0.2);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

.container_2 {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    background-color: aquamarine;
    min-width: 275px;
    max-width: 550px;
    box-shadow: 5px 5px 10px #baecbd;
}

.container_2 figcaption {
    text-align: center;
    font-size: 14px;
    font-family: 'Rampart One';
}

.text_t {
    font-size: 12px;
    position: relative;
    padding: 1rem 2rem calc(1rem + 10px);
    background: #c5f792;
    margin: 10px;
    text-align: center;
}

.text_t:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

/* つくブル */

.title_b {
  font-size: 18px;
  font-style: italic;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 #000;
}


.text_tb {
  font-size: 12px;
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #1b1a15;
  margin: 10px;
  text-align: center;
  color: aliceblue;
}

.text_tb:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}


/* ドールズ */

.title_c {
  font-size: 18px;
  margin: 10px;
  color: #fff;
  background: #015dac;
  background-image: radial-gradient(#0175d5 13%, transparent 13%), radial-gradient(#0175d5 13%, transparent 13%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
}


.text_td {
  font-size: 12px;
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #d9e1e3;
  margin: 10px;
  text-align: center;
  color: rgb(58, 58, 55);
}

.text_td:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}

/* お問合せ */

.container_3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 275px;
  max-width: 550px;
  width: 400px;
    margin: auto;
    margin-top: 50px;
      margin:2em 0;
      position: relative;
      padding: 0.5em 1.5em;
      border-top: solid 2px black;
      border-bottom: solid 2px black;
  }

  .container_3:before, .container_3:after{
      content: '';
      position: absolute;
      top: -10px;
      width: 2px;
      height: -webkit-calc(100% + 20px);
      height: calc(100% + 20px);
      background-color: black;
  }

  .container_3:before {left: 10px;}
  .container_3:after {right: 10px;}

.container_3 img {
  box-shadow: 5px 5px 10px #aaf2af;
}

.container_3 figcaption {
  font-family: 'Rampart One';
}


h3 {
  margin-bottom: 0;
  margin-top: 100px;
}

.blog img {
  width: 100px;
}
.blog button {margin: 20px;}

@media screen and (min-width:481px) {
  
  body {width:100%;}

}
/* メディエクリ */

@media screen and (min-width:1260px){

img {max-width:1260px;}
}

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
検索をして色々試してみたのですが、上手くいきません。
メディクリも適応されていないみたいで何か間違っているのでしょうか？

1Answer

@Verclene posted at 2023-01-10

無駄に長いコード全体を手直しする気にはならないので,改善方針をいくつか列挙することにします.

コンテンツに対してwidthやheightの絶対(px)指定は止めましょう.これらによって要素の大きさを固定すると,柔軟なレイアウトを阻害することになります.すべてのコンテンツを格納する一番大きなコンテナにのみ,絶対指定することを推奨します.これが必要なのは,例えば画面の横サイズが大きくなりすぎて,テキストが横に伸びることを防ぐような場合です.

/*ほぼすべての要素を.containerの子要素にする*/
.container {
  max-width: 1400px;
}

レスポンシブなレイアウトをするには,コンテンツ自体を可読性を損なわず配置する必要があります.それゆえ,メディアクエリによる分岐を行う必要があるのはコンテンツへのスタイル指定です.bodyへのwidth指定は意味がありません.画面幅への対応が必要な場面において,bodyの幅を拘束することは根本的に間違っています.
コンテンツをグリッド上に並べたいときは,flexのかわりにCSS Gridのgrid-template-columnsが使用できます.この機能は各種ブラウザの現行バージョンであれば問題なく使用できます.自動でコンテンツを配置してくれるので,メディアクエリによる列数の分岐も簡単です.
具体的にどのくらいの画面幅で分岐させるかは,設計によりまちまちですが,bootstrapのbreakpointsが参考になるかもしれません.
同じスタイルの要素は,同じクラスを用いて使いまわしましょう.記述量を減らして汎用性と保守性を高めることは,Web Componentsでも取り入れられている概念です.
1つのCSSファイルには,必要な分だけのスタイルを記述しましょう.そのページで一切使用しないスタイルを記述すると,無駄なスタイルをロードするために無駄な通信を行うことになるだけでなく,保守が困難になります.
用語を正確に覚えましょう.「メディクリ」でも「メディエクリ」でもなく「メディアクエリ(Media Queries)」が正しい表記です.
レスポンシブはサイトやライブラリによって,設計思想がまちまちになりがちな概念です.実現したい動作を具体的に言語化することを忘れないでください.

1Like

Comments

@protein_d
Questioner
ご指摘ありがとうございます。
ご指摘されこと参考にしてコンテナ１.２.３に対する絶対値PXは消しました。
メディアクリの部分を
コンテナ＿１.2.3それぞれ
```display: grid;
grid-template-columns: 1fr 1fr;```
などを心みたのですが、総崩れになってしまいどうしていいかわからない状況です。
目標としてはコンテナ部分をそれそれ４８１pxをブレークポイントにした縦並びにしたいのですがどうしても上手くいきません。モバイルファーストにHTMLの構成そのものを作り直すべきなのでしょうか？
@Verclene
gridとgrid-template-columnsはグリッド要素の「親」に指定するプロパティです.
それとおそらく480pxがブレークポイントだと小さすぎます.600px前後あたりを目安にしてください.(参考:bootstrapのsmで576px,VisualStudioの@media phoneオートコンプリートだと667pxで出てきたと記憶しています.)

ついでに3つのコンテナは同一クラス化しましょう.

強いてHTMLを治すとすればbrをデザイン調整のために多用するのは仕様違反なので,pのマージンに置き換えるとかでしょうか.
@protein_d
Questioner
ありがとうございます。
あれからずっと今の今まで悪戦苦闘してメディエクリを必死にやっていたんですが、もう本当に訳がわりません。
突然メディエクリが反映されたと思って喜んでいたら反映されなくなったり、他はいじってないのに全部が壊れたり、もう本当に訳がわかりません。何か書き方が待ちがているんでしょうか？

```@media screen and (max-width:480px){}

.head_img{
text-align: center;
}

.max_c {
width: 100%
}

.container_1 {
width: 100%;
}

.container_1 img{
width:100%;
height: 100%;
}

.title_a {
font-size: 18px;
color: #fff;
text-shadow: 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800, 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800;
}

.text_t {
font-size: 12px;
position: relative;
padding: 1rem 2rem calc(1rem + 10px);
background: #c5f792;
margin: 10px;
text-align: center;
}

.blog img {
width: 100px;
}
.blog button {margin: 20px;
}
```

途中までは確かに分けて反映されてたのに、気づいたら全部に適応されていて壊れました。
一応、先頭には@media screen and (min-width:481px){}を書き足しました。
途中までは普通にできていたんです・・・。
@protein_d
Questioner
ちなみにmax-widthのコードはちゃんと一番下に書き足しています。
ちょっと参っています・・・。
@protein_d
Questioner
解決しました！！やっとできました。
http://protine-d.space/

ご助言ありがとうございました。
ひたすらにコード打ちまくって試していたのでコードが汚いですが・・・、後々、まとめていきます。
５日間ずっと躓いていたので本当、折れそうでした。ありがとうございました。
どうやらメディアクエリが途中で反映されなかったのは、これのせいみたいでした。
https://j-online.ne.jp/blog/web%E5%88%B6%E4%BD%9C/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%AE%E7%BD%A0%EF%BC%81%EF%BC%9Fcss%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%96%E3%83%A9%E3%82%A6

Are you sure you want to delete the question?