カラーボックス

通常カラーボックス

「.op-color-box」を定義することでカラーボックスを表現できます。続けて「.op-bg-{color}」を定義することでカラーボックスの色を表現します。

                        <div class="op-color-box op-bg-light-cream">
                            通常のカラーボックス。ここにコンテンツが入ります。<br>
                            通常のカラーボックス。ここにコンテンツが入ります。<br>
                            通常のカラーボックス。ここにコンテンツが入ります。
                        </div>
                    

 

角丸フレーム

「.op-color-box」に続けて「.op-box-round」を定義することで角丸カラーボックスを表現できます。合わせて「.op-bg-{color}」を定義することでフレームの枠色を表現します。

                        <div class="op-color-box op-box-round op-bg-pink">
                            角丸のカラーボックス。ここにコンテンツが入ります。<br>
                            角丸のカラーボックス。ここにコンテンツが入ります。<br>
                            角丸のカラーボックス。ここにコンテンツが入ります。
                        </div>
                    

 

レスポンシブ

前述のカラーボックスを表現する定義の接尾辞として「-{xs|sm|md}」付与することでPC版・タブレット版・SP版でカラーボックスを表現できます。

                        <div class="op-color-box op-bg-light-cream-md op-bg-pink-sm op-bg-light-blue-xs op-box-round-xs">
                            PC版では、背景が薄い<strong>クリーム色</strong>になります。<br>
                            タブレット版では、背景が薄い<strong>ピンク</strong>になります。<br>
                            SP版では、背景が<strong>水色＆角丸</strong>になります。
                        </div>
                    

 

使用例

テキストの地に色

                        <div class="op-row op-space-inside-normal op-color-box op-bg-light-cream">
                            <div class="op-col">
                                <h3 class="op-text-large op-text-light-blue op-text-center">Our Photoの使い方</h3>
                                <p>最初に「会員登録」よりメールアドレスを登録します。<br>次に...</p>
                            </div>
                        </div>
                    

 

グリッドレイアウトと組み合わせた「カラーボックスの横並び」

                        <div class="op-row op-row-center op-space-inside-small op-space-outside-small">
                            <div class="op-col op-col-4 op-color-box op-box-round op-bg-light-cream">
                                <h3 class="op-text-large op-text-dark-brown">1.選択</h3>
                                <p>フォトグラファー一覧ページより依頼するフォトグラファーを選択します。</p>
                            </div>
                            <div class="op-col op-col-4 op-color-box op-box-round op-bg-light-cream">
                                <h3 class="op-text-large op-text-dark-brown">2.チャット</h3>
                                <p>フォトグラファーとチャットをします。</p>
                            </div>
                            <div class="op-col op-col-4 op-color-box op-box-round op-bg-pink">
                                <h3 class="op-text-large op-text-dark-brown">3.支払い</h3>
                                <p>クレジットカード・コンビニのどちらかを選択します。</p>
                            </div>
                        </div>