
KompoZerのCSSエディタで枠線を設定する方法
KompoZerのCSSエディタを使って、HTML要素の枠線の指定、色や太さの指定などをする方法を解説。CSSで作成できる枠線のサンプルも掲載。
- 2016/8/16
- 2012/1/7
CSSエディタの「枠線タブ」では、ページ上の要素に対して上下左右の枠線を指定する事ができます。
枠線は、「線の種類」「線の太さ」「線の色」から、設定した時のプレビューを見ながら指定することができます。
基本的に上下左右で別々の枠線を指定することもできますが、要素を囲むような上下左右で同じ枠線を作るときは「上下左右すべて同じ指定を用いる」のチェックを入れておきます。
線の種類
指定できる枠線の種類は8種類あります。それぞれがどのように表示されるものなのかを見ていきましょう。
下のサンプルでは分かりやすくするために、線の太さを5pxに指定しています。
- 実線
-
実線のサンプル
一番利用する機会の多い線だと思います。普通の直線が表示されます。 - 点線
-
点線のサンプル
点線が表示されます。破線よりも間隔の細かい点線です。 - 破線
-
破線のサンプル
点線と見比べてみるとその違いは一目瞭然です。 - 二重線
-
二重線のサンプル
二重になっている線が表示されます。1pxの細い線の二重線を使いたい場合は、線の太さを3pxに指定するとイメージ通りの線になります。 - 谷
-
谷のサンプル
線の中に谷があるかのような線が表示されます。 - 山
-
山のサンプル
谷と同じような線ですが、こちらは山があるように見える線になります。 - 沈降
-
沈降のサンプル
へこんでいるように見える線が表示されます。 - 浮上
-
浮上のサンプル
こちらは浮き上がっているように見える線が表示されます。沈降と組み合わせて使うと、マウスオーバーしたときにへこむ様なボタンをCSSだけで作ることもできます。(センスが良いかどうかは分かりませんが・・・)
上下左右で囲む線として使う機会より、左側だけにして見出しを強調したり、重要な部分に下線を引くイメージで下側だけ指定する、といった感じで使う機会の方が多いと思います。