知恵貸して

2024/9/24 16:36

11回答

メディアクエリを使ってPC用、タブレット用、スマートフォン用のレイアウト作らなくてはなりません。 参考とすべきそれぞれの画像があり、できるだけその画像のレイアウトに近づけなければなりません。 pc用のコードはすでに作っており、 @media screen and (max-width: 959px) @media screen and (max-width: 559px) の中にpc用のコードと異なる要素部分(widthやheight)だけを書き直して記述しました。 ブラウザに表示して検索ツールで反映されません。 HTMLには <meta charset="utf-8"> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> を記載しております。 以下のように、pc用ではboxを４つ並べていますが、タブレット用では、2個×2段にしたいので、boxのwidthとheightのサイズを変えてみました。 (フロートを主に使わなくてはいけない課題なので、コードが変と思う方もいると思いますがご了承ください。) ・検索ツールで反映されない理由 ・＠mediaの中に書く内容があっているのか (そもそも、中に書くのは何なのかよくわからず書いていますが、、) @charset "UTF-8"; #container { width: 800px; height: 600px; margin: 0 auto; padding: 5px 5px; border: 1px solid #000; color: #fff; position: center; } ｝ #main_box{ width: 99%; height: 85px; margin: 5px; border: 1px solid #000; color: #000; } #box1{ width: 24%; height: 90%; margin: 3px; background-color: rgb(14, 238, 246); border:1px solid #000; float: left; } #box2{ width: 24%; height: 90%; margin: 3px; background-color: rgb(14, 238, 246); border:1px solid #000; float: left; } #box3{ width: 24%; height: 90%; margin: 3px; background-color: rgb(14, 238, 246); border:1px solid #000; float: left; } #box4{ width: 24%; height: 90%; margin: 3px; background-color: rgb(14, 238, 246); border:1px solid #000; float: left; } #main_box{ clear: both; ｝ @media screen and (max-width: 959px){ #container { width: auto; height: auto; } #main_box { height: 280px; margin: 6px; } #box1 { width: 49%; height: 47%; } #box2 { width: 49%; height: 47%; } #box3 { width: 49%; height: 47%; } #box4 { width: 49%; height: 47%; }

HTML、CSS | ホームページ作成・76閲覧

ベストアンサー

ybb********

カテゴリマスター

2024/9/24 21:26

知恵貸してさん >･･･(そもそも、中に書くのは何なのかよくわからず書いていますが、、)･･････ まずは、レスポンシブの基本を勉強しましょう。↓ https://www.site-convert.com/archives/1528 ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> @charset "UTF-8"; #container { width: 836px; height: 600px; margin: 0 auto; padding: 5px 5px; border: 1px solid #000; color: #fff; position: center; } #main_box{ width: 99%; height: 85px; margin: 5px; border: 1px solid #000; color: #000; } #box1, #box2, #box3, #box4{ width: 24%; height: 90%; margin: 3px; background-color: rgb(14, 238, 246); border:1px solid #000; float: left; } #main_box{ clear: both; } @media screen and (max-width: 959px){ #container { width: auto; height: auto; } #main_box { height: 280px; margin: 6px; } #box1, #box2, #box3, #box4{ width:calc(50% - 9px); height: 47%; } } @media screen and (max-width: 559px){ #container { width: auto; height: auto; } #main_box { height: 280px; margin: 6px; } #box1, #box2, #box3, #box4{ width: 98%; height: 22%; } } </style> </head> <body> <div id="container"> <div id="main_box"> <div id="box1"> box1 </div> <div id="box2"> box2 </div> <div id="box3"> box3 </div> <div id="box4"> box4 </div> </div> </div> </body> </html>

この回答はいかがでしたか？ リアクションしてみよう

ThanksImg質問者からのお礼コメント

ありがとうございます。 参考にさせていただきます！

お礼日時：2024/9/25 7:18