• 文字サイズ


解決済

スマホページのレスポンシブ対応について

  • 相談者:非公開
  • 2021/06/30 13:49
お世話になります。
カテゴリ用のHTMLソースを独学で作りましたが、スマホページのレスポンシブ対応がうまくいきませんでした、スクショとソースを下に貼り付けます。HTMLの初心者で、いろ色調べまして解決できなかったのでこちらで質問させていただきました。大変恐縮ですが、宜しくお願い致します。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>カテゴリページ</title>
<style>
/*モバイル*/
@media(max-width: 600px)
{.container{display: grid;grid-template-columns:200px 200px;grid-gap: 1px;padding: 10px 0px 5px 20px}}

.container{display: grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap: 80px;padding: 10px 0px 5px 20px}
</style>
</head>
<body>
<h2>カテゴリで選ぼう</h2>
<div class="container">
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089263034.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089263033.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089194604.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089254039.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089254038.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089254036.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089254035.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089254040.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089263103.jpg"></a>
</div>
<div class="item">
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/imgrc0089263102.jpg"></a>
</div>

</div>
</body>
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2021/06/30 16:44
ECマスターズの伊藤です。

> カテゴリ用のHTMLソースを独学で作りましたが、スマホページのレスポンシブ対応がうまくいきませんでした、スクショとソースを………(省略)………
  • 返信者:非公開(質問者)
  • 2021/07/06 11:35
伊藤さん
ありがとうございます。
アドバイスに従って修正をかけましてできました。………(省略)………
このフォーラムへの質問は終了しました