# カスタムCSSだけでRichTextセクションの画像とテキストブロックを横並びにしたい。 **URL:** \ **Category:** Shopify テーマ\ **Tags:** css\ **Created:** [December 8, 2023, 8:50am UTC](https://community.shopify.com/t/css-richtext/275627 "2023-12-08T08:50:28Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary 主題: ShopifyのPrestigeテーマ(8.1.1)で、RichTextセクション内の画像とテキストを「カスタムCSSのみ」で横並びにしたいという要望。プログラミング編集は極力避けたい。完成イメージの添付画像あり。 最新の提案: 回答者はCSS Gridの使用(display: grid;)を推奨。親要素をグリッド化し、列幅や配置を設定する方法をMDNドキュメント（Basic concepts of grid layout / grid）へのリンクで提示。 技術補足: CSS Gridは要素を行・列に配置するレイアウト手法で、横並びや比率指定に適している。RichTextセクションのラッパー要素にgridを適用し、2列構成にするのが想定される。 未解決点: 具体的なCSSセレクタやコード例、テーマPrestige特有のDOM構造への当て方は提示されていない。Flexboxとの比較理由も未説明。 現状と次のアクション: 解決は未了。添付画像が目標レイアウト理解に重要。次は、対象セレクタとgrid-template-columns等の具体CSS例の提示が必要。
**Author:** ![Anonymous\_b01fd8dc839bc56657cca7ec21a598dc](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@Anonymous\_b01fd8dc839bc56657cca7ec21a598dc](https://community.shopify.com/u/Anonymous_b01fd8dc839bc56657cca7ec21a598dc)\ **Post date:** [December 8, 2023, 8:50am UTC](https://community.shopify.com/t/css-richtext/275627/1 "2023-12-08T08:50:28Z")
お世話になります。 カスタムCSSだけでRichTextセクションの画像とテキストブロックを横並びにすることは可能でしょうか？？ 使用テーマはPrestigeの8.1.1versionです。 あまりプログラミングに詳しくないので、なるべく裏のコードは触らずサイトを作成していますので、可能であればカスタムCSSだけで済ませたいと考えています。 イメージは添付画像の通りです。 ![カスタマイズイメージ.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/4/a45eb04f3798471059b815b7f64a80459ebd4a88.png) アドバイスのほどよろしくお願いいたします ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [December 12, 2023, 4:26pm UTC](https://community.shopify.com/t/css-richtext/275627/2 "2023-12-12T16:26:32Z")
おそらく以下や他の事例などを参考にしてdisplay:grid; を用いればとりあえずは対応可能ではと思います。 [https://developer.mozilla.org/ja/docs/Web/CSS/CSS\_grid\_layout/Basic\_concepts\_of\_grid\_layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) [https://developer.mozilla.org/ja/docs/Web/CSS/grid](https://developer.mozilla.org/ja/docs/Web/CSS/grid)