# 画像とテキストを横並び、かつレスポンシブ対応にしたい

**URL:** <https://community.shopify.com/t/topic/262776>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [October 26, 2023, 8:41am UTC](https://community.shopify.com/t/topic/262776 "2023-10-26T08:41:39Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

ユーザーがコレクションページの説明欄で画像とテキストを横並びにし、PC・SP間でレスポンシブ対応させる方法を質問しました。

**主な課題:**
- CSSとHTMLコードは用意済みだが、コード編集のどこにCSSを挿入すべきか不明
- 複数のコレクションが存在し、特定のコレクションにのみスタイルを適用したい

**解決方法:**
ファイブビット社の福水氏が回答し、コレクション詳細ページの「説明」欄に直接`<style>~~~</style>`タグを記述する方法を動画付きで提案しました。

**結果:**
質問者は提案された方法で画像とテキストの横並び表示に成功し、問題が解決されました。回答者は「ベストソリューション」への選択を依頼しています。

<div class="post-metadata">

**Author:** ![ryubo](https://avatars.discourse-cdn.com/v4/letter/r/74df32/32.png) [@ryubo](https://community.shopify.com/u/ryubo)\
**Post date:** [October 26, 2023, 8:41am UTC](https://community.shopify.com/t/topic/262776/1 "2023-10-26T08:41:39Z")

</div>

初投稿のため、質問方法に不備があるかもしれません。ご容赦ください。

コレクションページの説明欄の中で、「画像とテキストを横並びにして、かつPC⇔SPのレスポンシブ対応」がしたいです。

下記のようにcssとHTMLを使おうと思ったのですが、コード編集のどこにcssを差し込めばいいのか分からずにいます。

▼css

.flex{ display: flex; justify-content: space-between; } .flex\>p{ width: 49%; } 

▼HTML

 

![]()

 

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

▼最終的に下記のようになればOKと考えています

**PC版**

 ![ryubo_0-1698308886688.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/f/2f000c077b07193900582df24b244c6b11658ca9.png)

**SP版**

 ![ryubo_1-1698309042283.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/1/f1af062da1dbfc104928c48fc640e79937fe2284.png)

●試したこと

管理画面＞オンラインストア＞カスタマイズ＞デフォルトのコレクション で、

「セクションを追加」をしたのですが、すべてのコレクションページに情報が適用されてしまいました。

コレクションが複数存在し、コレクションごとに使用する画像もテキストも異なるため、

コレクションの編集ページで対応したいと考えています。

 ![ryubo_2-1698309276163.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/5/e5566364acbe0f9f555bf1bfc9bea9b28fafbe40.png)

①コレクションページの説明欄で画像とテキストを横並び、かつレスポンシブ対応する方法があるのか？

②もしcssとHTMLで対応できる場合、cssはコード編集のどこに設置するのか？

をご教授いただけますと幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [October 27, 2023, 1:24am UTC](https://community.shopify.com/t/topic/262776/2 "2023-10-27T01:24:19Z")

</div>

初めまして。

株式会社ファイブビットの福水と申します。

②に関して、特定のコレクションにのみCSSを当てたい場合は、下記動画のように、コレクション詳細ページの「説明」から、~~~タグの中に記述してあげると反映されると思います。

[https://gyazo.com/dc2040c0e3ef9cf02481dbbda8f4e85f](https://gyazo.com/dc2040c0e3ef9cf02481dbbda8f4e85f)

ぜひお試しください。

---

<div class="post-metadata">

**Author:** ![ryubo](https://avatars.discourse-cdn.com/v4/letter/r/74df32/32.png) [@ryubo](https://community.shopify.com/u/ryubo)\
**Post date:** [October 27, 2023, 4:35am UTC](https://community.shopify.com/t/topic/262776/3 "2023-10-27T04:35:23Z")

</div>

福水様

はじめまして。

本件、すぐにご教授いただきありがとうございます。

教えていただいた通り、説明欄で~~~タグの中に記述したところ、画像とテキストを横並びで表示させることができました。

ご教授いただきありがとうございます！

とても助かりました。

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [October 27, 2023, 4:54am UTC](https://community.shopify.com/t/topic/262776/4 "2023-10-27T04:54:09Z")

</div>

解決できてよかったです！

もしよかったら、「ベストソリューション」に選んでいただけると、今後の励みになるので、よろしくお願いします！！