KompoZerのCSSエディタで枠線を設定する方法

KompoZerのCSSエディタを使って、HTML要素の枠線の指定、色や太さの指定などをする方法を解説。CSSで作成できる枠線のサンプルも掲載。

CSSエディタの「枠線タブ」では、ページ上の要素に対して上下左右の枠線を指定する事ができます。

枠線は、「線の種類」「線の太さ」「線の色」から、設定した時のプレビューを見ながら指定することができます。

基本的に上下左右で別々の枠線を指定することもできますが、要素を囲むような上下左右で同じ枠線を作るときは「上下左右すべて同じ指定を用いる」のチェックを入れておきます。

線の種類

指定できる枠線の種類は8種類あります。それぞれがどのように表示されるものなのかを見ていきましょう。
下のサンプルでは分かりやすくするために、線の太さを5pxに指定しています。

実線: 実線のサンプル
一番利用する機会の多い線だと思います。普通の直線が表示されます。
点線: 点線のサンプル
点線が表示されます。破線よりも間隔の細かい点線です。
破線: 破線のサンプル
点線と見比べてみるとその違いは一目瞭然です。
二重線: 二重線のサンプル
二重になっている線が表示されます。1pxの細い線の二重線を使いたい場合は、線の太さを3pxに指定するとイメージ通りの線になります。
谷: 谷のサンプル
線の中に谷があるかのような線が表示されます。
山: 山のサンプル
谷と同じような線ですが、こちらは山があるように見える線になります。
沈降: 沈降のサンプル
へこんでいるように見える線が表示されます。
浮上: 浮上のサンプル
こちらは浮き上がっているように見える線が表示されます。沈降と組み合わせて使うと、マウスオーバーしたときにへこむ様なボタンをCSSだけで作ることもできます。（センスが良いかどうかは分かりませんが・・・）

上下左右で囲む線として使う機会より、左側だけにして見出しを強調したり、重要な部分に下線を引くイメージで下側だけ指定する、といった感じで使う機会の方が多いと思います。