フレーム

通常フレーム

「.op-frame」を定義することでフレームを表現できます。続けて「.op-border-{color}」を定義することでフレームの枠色を表現します。

                        <div class="op-frame op-border-green">
                            通常のフレーム。ここにコンテンツが入ります。
                        </div>
                    

 

角丸フレーム

「.op-frame」に続けて「.op-border-round」を定義することで角丸フレームを表現できます。合わせて「.op-border-{color}」を定義することでフレームの枠色を表現します。

                        <div class="op-frame op-border-round op-border-red">
                            角丸のフレーム。ここにコンテンツが入ります。
                        </div>
                    

 

使用例

文章にメリハリ

お申込みのされる方は下記電話番号よりお問い合わせください。

                        <p>お申込みのされる方は下記電話番号よりお問い合わせください。</p>
                        <div class="op-frame op-border-green">
                            <h3 class="op-text-huge op-text-brown">03-0000-0000</h3>
                            <p>営業時間： 10:00 - 18:00</p>
                            <p>※お間違いのないようお問い合わせください。</p>
                        </div>
                    

 

グリッドレイアウトと組み合わせた「フレームの横並び」

                        <div class="op-row op-row-center op-space-outside-normal">
                            <div class="op-col op-col-5 op-frame op-border-round op-border-light-blue">
                                <h3 class="op-text-large op-text-light-blue">男性の場合</h3>
                                <p>プロフィール変更画面より「男性」を選択してください。</p>
                            </div>
                            <div class="op-col op-col-5 op-frame op-border-round op-border-red">
                                <h3 class="op-text-large op-text-red">女性の場合</h3>
                                <p>プロフィール変更画面より「女性」を選択してください。</p>
                            </div>
                        </div>