線

通常

初期値

「.op-border」を定義することで枠線を表現できます。上下左右個別に線を表示したい場合は「.op-border-{left|top|right|bottom}」を定義することで表現できます。

                        <div class="op-col op-border">通常の枠線です。</div>
                        <div class="op-col op-border-left">左側の線です。</div>
                        <div class="op-col op-border-bottom">下側の線です。</div>
                    

 

色

前述の定義に続けて「.op-border-{color}」を定義することで線の色を表現することができます。また、「.op-border-{left|top|right|bottom}」で上下左右個別に定義した線については「.op-border-{left|top|right|bottom}-{color}」を定義することで線色を表現できます。

                        <div class="op-col op-border op-border-green">緑色の枠線です。</div>
                        <div class="op-col op-border op-border-top-light-gray op-border-bottom-light-gray op-border-left-red op-border-right-red">左右は赤色の線で、上下は灰色です。</div>
                        <div class="op-col op-border-bottom op-border-bottom-light-blue">青色の下側の線です。</div>
                    

 

太さ

前述の定義に続けて「.op-border-size{number}」を定義することで線の太さを表現することができます。先の太さ（number）は1pxから10pxまでを1px単位で増減させる必要があります。また、「.op-border-{left|top|right|bottom}」で上下左右個別に定義した線については「.op-border-{left|top|right|bottom}-size{number}」を定義することで線の太さを表現できます。

                        <div class="op-col op-border op-border-green op-border-size4">緑色で4pxの枠線です。</div>
                        <div class="op-col op-border-left op-border-left-red op-border-left-size2 op-border-right op-border-right-brown op-border-right-size8">赤色で2pxの左側の線で、茶色で8pxの右側の線です。</div>
                        <div class="op-col op-border-bottom op-border-bottom-light-blue op-border-bottom-size6">青色で6pxの下側の線です。</div>
                    

 

種類

前述の定義に続けて「.op-border-{solid|dashed|dotted|double}」を定義することで線の種類を表現することができます。また、「.op-border-{left|top|right|bottom}」で上下左右個別に定義した線については「.op-border-{left|top|right|bottom}-{solid|dashed|dotted|double}」を定義することで線の種類を表現できます。

                        <div class="op-col op-border op-border-green op-border-solid">実線</div>
                        <div class="op-col op-border-bottom op-border-bottom-red op-border-bottom-dotted">下側に点線</div>
                        <div class="op-col op-border-left op-border-left-light-blue op-border-left-dashed">左側に破線</div>
                        <div class="op-col op-border op-border-brown op-border-double op-border-size4">二重線</div>
                    

 

レスポンシブ

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

                        <div class="op-col op-border-md op-border-sm op-border-green-md op-border-green-sm">
                            PC版・タブレット版では枠線あり、SP版は線がなし
                        </div>
                        <div class="op-col op-border-bottom op-border-bottom-light-blue-md op-border-bottom-red-sm op-border-bottom-brown-xs">
                            PC版では下側線が青色、タブレット版では赤色、SP版では茶色
                        </div>
                        <div class="op-col op-border-bottom-md op-border-bottom-size2-md op-border-bottom-light-blue-md op-border-bottom-sm op-border-bottom-size2-sm op-border-bottom-light-blue-sm op-border-top-xs op-border-top-size4-xs op-border-top-brown-xs">
                            PC版・タブレット版では下側線が2pxの青色、SP版では上側線が4pxの茶色
                        </div>