HPがスマホに最適化できません。
どうしたらいいですか？
このHPです↓
https://protine-d.space/
なし
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
ソースコードを入力
```css
/* */
@media screen and (min-width:481px) {
body {width:100%;}
}
@media screen and (min-width:1260px){
img {max-width:1260px;}
}
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';
}
/* 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;}
### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
一応自分なりに調べてメディアクリを実行しましたが、上手くいきませんでした。
助けていただけたら幸いです。
ご教授お願いします。
ソースコードは正しい記法で書き、シンタックスハイライトが入るようにしてください。
また、何を持ってレスポンシブデザインとするのか、ゴールが明確ではありません。
加えて、HTMLのカードが記載されていないため、そもそも文書構造が不明です。必要最低限のコードを抜き出すか、わからない場合は全てのコードを記載するかのいずれがにした方が良いでしょう。
その上で、推測でお答えしますが、cssの上部のmediaクエリを適用したいということでしょうか。
その場合、このmediaクエリ部分をcssの一番下に持っていってください。CSSは下の方のルールを優先する為、mediaクエリで指定していても下の方に指定されているスタイルに上書きされてしまいます。
@protein_d
Questionerシンタックスハイライトは、(文法に基づいた)色付きソースコードのニュアンスで大丈夫です。
Qiitaなどではソースコードを載せる際、言語を指定することで色付けしてくれます。
ソースコードの載せ方については、例えば【書き方まとめ】初めてQiitaに記事を書くときに知っておくべきことが参考になります。
はい。質問を再度立てる際には、例えば「画像を画面サイズに収めたい」など具体的なゴールを設定してください。でないと回答者は何を答えれば良いのかわかりませんので…
頑張ってください。
@protein_d
Questioner