• 文字サイズ


解決済

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

  • 相談者:非公開
  • 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>
投稿内容について報告する


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

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