レスポンシブ設定のやり方を実例に沿って解説ここでは、レスポンシブ設定の一連の流れを、GOROが制作しているテンプレートサイトのTOPページを例に紹介します。参考：BtoB｜マーケティング会社テンプレート1.レスポンシブの事前準備をする設定を始める前に、ブレイクポイント、パディング/マージン、テキストサイズの数値を決定します。ブレイクポイント ：どの画面幅で表示を切り替えるかのタイミング（最大5つまで）パディング／マージン：余白の大きさテキストサイズ ：文字の大きさ事前に決定しておくことで、数値ごとの役割が明確になり、統一感あるレイアウト設計ができます。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AF%E3%80%81%E3%80%8C%E4%B8%80%E6%AE%B5%E9%9A%8E%E3%81%9A%E3%81%A4%E4%B8%8B%E3%81%92%E3%81%A6%E3%81%84%E3%81%8F%E3%80%8D%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%8C%E5%B4%A9%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%82%8F%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8C%E3%81%B0OK%E3%81%A7%E3%81%99%E3%80%82%E6%95%B0%E5%80%A4%E3%81%8C%E6%B7%B7%E5%90%8C%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%80%81%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AE%E3%82%82%E6%9C%89%E5%8A%B9%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E2.デフォルトでのレスポンシブ1440pxを中心にした、1141px以上の画面幅です。主にPCユーザーが閲覧しています。▼チェックポイント最大4Kを目安に、1440px以上の画面幅でも違和感がないかチェックしましょう。一見問題がなさそうでも、「横幅を指定しておらず、過剰に大きさが広がってしまう」などの問題が発生します。必ず目視で確認しましょう。3.スモールでのレスポンシブ1140〜841pxの画面幅です。主に小型ノートPCや横向きタブレットで閲覧されます。▼チェックポイントデフォルトサイズの余白感を維持できているかチェックしましょう。「タブレットサイズ手前の画面幅に合わせたら、左右に余裕がないレイアウトになってしまった」といった問題がよく発生します。1140px〜841px全体で納得がいくレイアウトか、確認するようにしましょう。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E4%BB%8A%E5%9B%9E%E3%81%AETOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%AF%E3%80%81%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%B6%E4%BD%9C%E3%81%AB%E7%B4%842%E6%99%82%E9%96%93%E3%82%92%E8%A6%81%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3Cbr%3E%0A%E7%B4%B0%E3%81%8B%E3%81%84%E8%AA%BF%E6%95%B4%E3%81%8C%E4%B8%8D%E8%A6%81%E3%81%AB%E6%80%9D%E3%81%88%E3%82%8B%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%E6%80%A0%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86%E3%81%A8%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E8%AA%BF%E6%95%B4%E3%81%AB%E3%82%82%E5%BD%B1%E9%9F%BF%E3%81%8C%E5%87%BA%E3%81%A6%E3%81%97%E3%81%BE%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%E8%A6%AA%E8%A6%81%E7%B4%A0%E3%81%8B%E3%82%89%E5%AD%90%E8%A6%81%E7%B4%A0%E3%81%BE%E3%81%A7%E3%80%81%E4%B8%81%E5%AF%A7%E3%81%AB%E8%AA%BF%E6%95%B4%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E4.タブレットでのレスポンシブ840〜541pxの画面幅です。主に縦向きタブレット、PCブラウザの半分幅などで閲覧されています。以下のような変更点が必要になる場合、表示非表示を用いてタブレットサイズ以下専用のデザインに入れ替える工程も必要になります。キービジュアルが一列になる3列の要素が2列・1列になるナビゲーションがハンバーガーメニューに変わるテキストの改行位置が変わる▼チェックポイント事前にデザインをPC寄りかモバイル寄りにするかチェックしておきましょう。曖昧なまま進行してしまうと、細部で「モバイルに寄せたら横に広すぎてしまう」「デスクトップ寄りでは余裕がない配置になってしまう」といったトラブルに直面します。判断基準は制作するサイトによって異なるため、慎重に検討しておきましょう。どちらに寄せるかの判断基準は、以下のような点が挙げられます。PC寄りのデザイン情報密度があるため、一覧性が良いヘッダーなどのナビゲーションが強く、迷子になりにくい画面幅が狭くなった際の対応が難しいモバイル寄りのデザインタップ/スクロールがしやすい一目見た時の情報量がシンプルになる崩れる要素が少ないため、制作がしやすい左右の余白がスカスカになってしまうことがある%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E4%BB%8A%E5%9B%9E%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BTOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%AF%E3%80%81%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%B6%E4%BD%9C%E3%81%AB%E7%B4%844%E6%99%82%E9%96%93%E3%82%92%E8%A6%81%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%0A%E8%A4%87%E9%9B%91%E3%81%AA%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%A0%B4%E5%90%88%E3%80%81%E4%BA%8B%E5%89%8D%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%8B%85%E5%BD%93%E3%81%AE%E6%96%B9%E3%81%B8%E7%A2%BA%E8%AA%8D%E3%82%92%E5%8F%96%E3%82%8B%E3%81%AE%E3%82%82%E6%9C%89%E5%8A%B9%E3%81%A7%E3%81%99%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E5.モバイルでのレスポンシブ540px〜321pxの画面幅です。主にスマートフォンユーザーが閲覧します。▼チェックするポイントモバイルサイズでは、3点の確認を行います。1.実機を用いて、スクロールが過度でないかチェックする手元のスマートフォンを用いると、PCの画面では感じにくい問題を発見しやすくなります。「スクロールが大変に感じないか」「手を止めた時、画像や文章が大きすぎないか」など、いちユーザーの目線に立ち閲覧しましょう。2.アプリ内ブラウザでチェックするTeams、Slack、LINE、Instagramなどのアプリで、SafariやChromeとは異なる独自のブラウザを用いていることがあります。確認すると「通常のブラウザでは問題がなかったが、アプリ内ブラウザのみで表示崩れが発生した」といったケースが稀に発生します。サイトによってはアプリ内ブラウザの利用率が高いこともあるため、忘れず確認するようにしましょう。3.複数のブラウザでチェックするPC同様、スマートフォンでもChrome、Safari、FireFoxで表示が異なることがあります。どの環境で見ても崩れのないサイト設計にするため、重要なチェック段階です。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E4%BB%8A%E5%9B%9E%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BTOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%AF%E3%80%81%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%B6%E4%BD%9C%E3%81%AB%E7%B4%846%E6%99%82%E9%96%93%E3%82%92%E8%A6%81%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3Cbr%3E%0A%E5%AE%9F%E7%94%BB%E9%9D%A2%E3%82%92%E7%94%A8%E3%81%84%E3%82%8B%E3%81%AE%E3%81%AF%E3%80%81%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%8A%E3%81%84%E3%81%A6%E3%81%A8%E3%81%A6%E3%82%82%E9%87%8D%E8%A6%81%E3%81%AA%E5%B7%A5%E7%A8%8B%E3%81%A7%E3%81%99%E3%80%82%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AE%E3%81%82%E3%82%8BStudio%E3%81%A7%E3%81%AF%E3%80%81%E3%81%A8%E3%81%A6%E3%82%82%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%81%AB%E9%80%B2%E3%82%81%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E5%B7%A5%E7%A8%8B%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E6.ミニでのレスポンシブ320px以下の画面幅です。小さなスマートフォンユーザー（iPhone5など）や、テキストサイズを大きくしているユーザーなどが閲覧します。ここでは「310px以下になると全く見えなくなる要素がある」などのトラブルがないようにすることがゴールです。▼チェックするポイントモバイルメニューの項目など、テキストが余剰に改行されていないかチェックしましょう。テキストが1文字だけ改行されてしまっていると、印象が悪くなってしまいます。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E6%9C%ACLP%E5%88%B6%E4%BD%9C%E3%81%A7%E3%81%AF%E3%80%81%E3%83%9F%E3%83%8B%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%B6%E4%BD%9C%E3%81%AB%E7%B4%842%E6%99%82%E9%96%93%E3%82%92%E8%A6%81%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3Cbr%3E%0A%E6%98%A8%E4%BB%8A%E3%81%A7%E3%81%AF%E9%96%B2%E8%A6%A7%E7%8E%87%E3%81%AE%E3%81%BB%E3%81%A8%E3%82%93%E3%81%A9%E3%81%AA%E3%81%84%E7%94%BB%E9%9D%A2%E5%B9%85%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81PC%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E6%A5%B5%E7%AB%AF%E3%81%AA%E7%B8%AE%E5%B0%8F%E6%99%82%E3%81%AA%E3%81%A9%E3%81%A7%E3%82%82%E8%A6%8B%E3%82%89%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E3%81%93%E3%81%86%E3%81%97%E3%81%9F%E7%B4%B0%E9%83%A8%E3%81%AE%E9%85%8D%E6%85%AE%E3%81%AF%E3%80%81%E5%85%A8%E4%BD%93%E3%81%AE%E5%AE%8C%E6%88%90%E5%BA%A6%E3%82%92%E3%81%95%E3%82%89%E3%81%AB%E9%AB%98%E3%82%81%E3%82%8B%E5%8F%96%E3%82%8A%E7%B5%84%E3%81%BF%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E7.レスポンシブの調整・確認ブラウザの開発者モードを活用し、ライブプレビューで画面幅を細かく指定してチェックします。Chromeの場合はF12キーを押し、実機ボタンから起動します。参考：Chrome「Device Mode でモバイル デバイスをシミュレートする」 https://developer.chrome.com/docs/devtools/device-mode?hl=jaチェックするとき、特に2種類の画面幅に注意が必要です。各ブレイクポイントでのチェック（例：スモールの1140px）各ブレイクポイントの手前でのチェック（例：スモールの841px）すべてのサイズで問題がないよう、チェックリストなどを用意し漏れなく進めましょう。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%E4%BB%8A%E5%9B%9E%E3%81%AE%E5%A0%B4%E5%90%88%E3%80%81%E5%85%A8%E4%BD%93%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%AB%E7%B4%844%E6%99%82%E9%96%93%E3%82%92%E8%A6%81%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3Cbr%3E%0A%E7%B4%B0%E3%81%8B%E3%81%AA%E5%AE%9F%E8%A3%85%E3%83%9F%E3%82%B9%E3%82%92%E6%AE%8B%E3%81%97%E3%81%9F%E3%81%BE%E3%81%BE%E3%81%A7%E3%81%AF%E4%BF%A1%E7%94%A8%E3%81%AB%E6%AC%A0%E3%81%91%E3%81%A6%E3%81%97%E3%81%BE%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%E6%99%82%E9%96%93%E3%82%92%E5%A4%9A%E3%82%81%E3%81%AB%E8%A6%8B%E7%A9%8D%E3%82%82%E3%82%8A%E3%80%81%E6%85%8E%E9%87%8D%E3%81%AB%E9%80%B2%E3%82%81%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%82%92%E8%BF%BD%E5%8A%A0%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3Eレスポンシブは何が難しい？よく悩むトラブル3つと対応方法レスポンシブ設定は、実装の中でも特につまづきやすい工程です。なかにはStudioの仕様上できないこともあり、想定以上に時間がかかってしまうこともあります。ここでは、レスポンシブ実装でよく悩む3つのトラブルを、対応方法とともに紹介します。トラブル1. 画像をレスポンシブ設定したとき、高さが0pxになり表示されない画像のレイアウトを変更していると、時折高さが0pxになり表示されなくなるトラブルが発生します。このトラブルは、以下の条件下で発生する仕様です。親要素の高さがauto子要素(Box)の高さがauto対応方法：画像の高さをpx (固定値)やvh(画面幅基準)で指定するか、BoxからImgへの差し替えを行いましょう。Imgでは高さがautoでも0pxになることがないため、縦横比を維持したパーツに有効です。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3EBox%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AF%E3%80%81%E3%80%8C%E4%B8%AD%E8%BA%AB%E3%81%AE%E3%81%AA%E3%81%84Box%E3%81%AB%E3%80%81%E7%94%BB%E5%83%8F%E3%82%92%E5%A1%97%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%80%8D%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%99%E3%80%82auto%E3%81%A7%E3%81%AF0px%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86%E3%81%AE%E3%81%AF%E3%80%81Box%E8%87%AA%E4%BD%93%E3%81%AB%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E8%A6%81%E7%B4%A0%E3%81%8C%E7%84%A1%E3%81%84%E3%81%9F%E3%82%81%E3%81%A7%E3%81%99%E3%80%82%3Cbr%3EBox%E3%81%A8Img%E3%80%81%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AB%E3%81%AF%E5%BD%B9%E5%89%B2%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E9%81%A9%E5%88%87%E3%81%AB%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3Cbr%3E%0A%C2%A0%3Ca%20href%3D%E2%80%9D%5Bhttps%3A%2F%2Fhelp.studio.design%2Fja%2Farticles%2F4064875-%E7%94%BB%E5%83%8F%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AEbox%E3%83%A2%E3%83%BC%E3%83%89-img%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF%5D%E2%80%9D%3E%E5%8F%82%E7%85%A7%EF%BC%9AStudio%20help%E3%80%8C%E7%94%BB%E5%83%8F%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AEBox%E3%83%A2%E3%83%BC%E3%83%89%E3%83%BBImg%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF%E3%80%8D%3C%2Fa%3E%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%0A%2F*%20%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E8%89%B2%E3%82%92%E9%BB%92%E3%83%BB%E4%B8%8B%E7%B7%9A%E3%82%82%E9%BB%92%E3%81%AB%E8%A8%AD%E5%AE%9A%20*%2F%0A.chat-bubble-text%20a%20%7B%0A%20%20%20%20color%3A%20black%20!important%3B%0A%20%20%20%20text-decoration%3A%20underline%3B%0A%20%20%20%20text-decoration-color%3A%20black%20!important%3B%0A%7D%0A%3C%2Fstyle%3Eトラブル2. エディタとプレビューで、画面のサイズが異なるエディタとプレビューで、要素の横幅や余白にズレが生じることがあります。例えば、以下のような状態です。テキストサイズが小さくなっている or 大きくなっている左右の余白が少し小さいタブレットサイズを確認するはずが、モバイルサイズのデザインになっている対処方法：ブラウザがエディタと同じ画面幅で表示されているかを必ず確認しましょう。開発者モードを使っていない場合や、Webページの表示倍率が120％などに変更されている場合にズレが発生するため注意が必要です。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3EChrome%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AF%E3%80%81%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%82%E6%9C%89%E5%8A%B9%E3%81%A7%E3%81%99%E3%80%82%3Cbr%3E%0A%0A%E4%BE%8B%E3%81%88%E3%81%B0%E3%80%81%E8%A4%87%E6%95%B0%E3%81%AE%E7%94%BB%E9%9D%A2%E5%B9%85%E3%81%A7%E4%B8%80%E6%B0%97%E3%81%AB%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%8C%3Cb%3EResponsive%20Viewer%3C%2Fb%3E%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AA%E3%81%A9%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3Cbr%3E%3Ca%20href%3D%E2%80%9Dhttps%3A%2F%2Fchromewebstore.google.com%2Fdetail%2Fresponsive-viewer%2Finmopeiepgfljkpkidclfgbgbmfcennb%3Fhl%3Dja%E2%80%9D%3E%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%80%8CResponsive%20Viewer%E3%80%8D%3C%2Fa%3E%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%0A%2F*%20%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E8%89%B2%E3%82%92%E9%BB%92%E3%83%BB%E4%B8%8B%E7%B7%9A%E3%82%82%E9%BB%92%E3%81%AB%E8%A8%AD%E5%AE%9A%20*%2F%0A.chat-bubble-text%20a%20%7B%0A%20%20%20%20color%3A%20black%20!important%3B%0A%20%20%20%20text-decoration%3A%20underline%3B%0A%20%20%20%20text-decoration-color%3A%20black%20!important%3B%0A%7D%0A%3C%2Fstyle%3Eトラブル3. プレビューで、画像やテキストなどの要素が小さくなるデザインエディタでは問題なく配置できている要素が、プレビューを用いると過剰に小さくなってしまうことがあります。例えば、以下のような状態です。画像の横幅が縮んでしまい、背景のあしらいが崩れるテキストボックスが縮んでしまい、折り返してしまう原因：これはプレビュー時に「Max-width:100％」という設定が付与され、px指定では親要素以上の幅にできなくなる制限がかかるためです。例えば、以下のような設計を行った場面で発生します。画面幅：タブレットサイズの840〜541px画像：絶対配置、1200px、アニメーションで左からスライドして登場する対処方法：横幅をpx指定ではなく、vw、%で指定することでサイズを大きくすることが可能です。先程の場面を例に挙げると、以下のような設計をすることで対処が可能です。画面幅：タブレットサイズの840〜541px画像：絶対配置の200vw、アニメーションで左から登場ただし、はみ出す要素にはリスクもあります。必ず以下のような点を考慮しましょう。レイアウトの計算が複雑になってしまう見切れた画像への差し替えなど、余剰に大きくする必要がない方法もあるテキストは見切れてしまい、一部読めなくなってしまう画像は、大きすぎる場合サイトが重くなってしまう可能性がある%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%0A%E3%81%93%E3%81%AE%E6%89%8B%E6%B3%95%E3%81%AF%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%82%B1%E3%83%BC%E3%82%B9%E3%81%A7%E6%9C%89%E5%8A%B9%E3%81%A7%E3%81%99%E3%80%82%3Cbr%3E%0A%3Cbr%3E%0A%E3%83%BB%E8%83%8C%E6%99%AF%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%8C%E6%A8%AA%E3%81%AB%E9%80%9A%E3%82%8A%E6%8A%9C%E3%81%91%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%97%E3%81%9F%E3%81%84%3Cbr%3E%0A%E3%83%BB%E3%83%91%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E5%86%85%E3%81%A7%E3%80%81%E7%94%BB%E9%9D%A2%E5%A4%96%E3%81%B8%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%99%E7%94%BB%E5%83%8F%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%97%E3%81%9F%E3%81%84%3Cbr%3E%3Cbr%3E%0A%0AMax-width%E3%81%AE%E8%87%AA%E5%8B%95%E6%8C%87%E5%AE%9A%E3%81%AF%E3%80%81Studio%E3%81%AE%E6%89%B1%E3%81%84%E3%82%84%E3%81%99%E3%81%95%E3%81%AB%E7%9B%B4%E7%B5%90%E3%81%99%E3%82%8B%E4%BB%95%E6%A7%98%E3%81%A7%E3%81%99%E3%80%82%E7%AE%A1%E7%90%86%E6%80%A7%E3%82%92%E4%BF%9D%E3%81%A4%E3%81%9F%E3%82%81%E3%81%AB%E3%82%82%E3%80%81%E6%A5%B5%E7%AB%AF%E3%81%AB%E5%A4%A7%E3%81%8D%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AF%E9%81%BF%E3%81%91%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%0A%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%82%92%E8%BF%BD%E5%8A%A0%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3Eレスポンシブのコツを紹介！Studioでスムーズに実装するには？時間のかかるレスポンシブ設定について、GOROメンバーは以下のような取り組みでスムーズな実装を行なっています。コツ1. レスポンシブをまとめて反映できるようにするレスポンシブ実装の確認コストを抑えるため、共通部分は最小限に実装できるよう進めていきます。取り組み例としては、以下のようなものがあります。デザインが近い要素は、1個がレスポンシブが完成した後に作る表示/非表示設定はなるべく必要最低限にするデザインが共通のページは、1ページ完成後にそのまま転用するテキストスタイルを活用するこれにより、「3個中1個だけ数値が異なる」などの実装漏れも抑えることができます。なお、同じデザインの要素が複数並ぶ場合は、Studioのリスト機能も便利です。詳しくはこちらの記事でも紹介しています。横並びの方法や解除時の注意点も！Studioでのリスト化について解説コツ2. 実装で行き詰まった時はStudioコミュニティを活用する意図しない挙動で長時間悩んでしまった時は、最初に公式フォーラム「Studio Community」を活用しています。Studio Community Japanはこちら同じ悩みを持つ人が質問していることがあり、「Studioの仕様上できないことだった」「他の実装方法が見つかった」と、解決方法がすぐに見つかることがあるためです。直接質問をすることも可能なので、行き詰まった時は気軽に活用しましょう。コツ3. 最後に確認する時間を多めに見積もるレスポンシブ実装では、確認を取る時間を多めに用意しています。Studioはレスポンシブが設定されている部分を一括で確認・編集する機能が無く「修正前の数値が残っていた」といった実装漏れが発生しやすいためです。アニメーションやホバーの部分も含まれるので、1個1個慎重に確認をとりましょう。%3Cdiv%20class%3D%22chat-bubble%22%3E%0A%3Cdiv%20class%3D%22chat-bubble-img%22%3E%0A%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-design-asset-files%2Fprojects%2F65qmPDlROV%2Fs-144x144_446c1f62-fe6d-4074-8cf9-6716a67959fd.webp%22%20alt%3D%22%E6%96%B0%E3%81%97%E3%81%84%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22chat-bubble-text%22%3E%0A%3Cp%3E%0A%E3%81%93%E3%81%AE%E6%99%82%E9%96%93%E3%82%92%E5%B0%91%E3%81%AA%E3%81%8F%E3%81%99%E3%82%8B%E3%81%BB%E3%81%A9%E3%80%81%E7%A2%BA%E8%AA%8D%E6%BC%8F%E3%82%8C%E3%81%AE%E3%83%AA%E3%82%B9%E3%82%AF%E3%81%8C%E8%86%A8%E3%82%89%E3%82%93%E3%81%A7%E3%81%97%E3%81%BE%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%E7%84%A6%E3%82%89%E3%81%9A%E4%BD%99%E8%A3%95%E3%82%92%E6%8C%81%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E7%AB%8B%E3%81%A6%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%0A%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.chat-bubble%20%7B%0Adisplay%3A%20flex%3B%0Aalign-items%3A%20flex-start%3B%0A%7D%0A%0A.chat-bubble-img%20%7B%0Amargin-right%3A%2010px%3B%0A%7D%0A%0A.chat-bubble-img%20img%20%7B%0Awidth%3A%2072px%3B%20%2F*%2072px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aheight%3A%2072px%3B%20%2F*%2072px%E3%82%92%E8%BF%BD%E5%8A%A0%20*%2F%0Aborder-radius%3A%2050%25%3B%0A%7D%0A%0A.chat-bubble-text%20%7B%0Afont-family%3Asans-serif%3B%0Abackground-color%3A%20%23F2F3F4%3B%20%2F*%20%23F2F3F4%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Apadding%3A%2020px%2024px%3B%20%2F*%20%E4%B8%8A%E4%B8%8B20px%E3%80%81%E5%B7%A6%E5%8F%B324px%E3%81%AB%E5%A4%89%E6%9B%B4%20*%2F%0Aborder-radius%3A%2012px%2012px%2012px%200%3B%0A%7D%0A%0A.chat-bubble-text%20p%20%7B%0Amargin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E