1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerのCSSエディタで枠線を設定する方法

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

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

  • 2016/8/16
  • 2012/1/7

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

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

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

線の種類

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

実線

実線のサンプル
一番利用する機会の多い線だと思います。普通の直線が表示されます。

点線

点線のサンプル
点線が表示されます。破線よりも間隔の細かい点線です。

破線

破線のサンプル
点線と見比べてみるとその違いは一目瞭然です。

二重線

二重線のサンプル
二重になっている線が表示されます。1pxの細い線の二重線を使いたい場合は、線の太さを3pxに指定するとイメージ通りの線になります。

谷のサンプル
線の中に谷があるかのような線が表示されます。

山のサンプル
谷と同じような線ですが、こちらは山があるように見える線になります。

沈降

沈降のサンプル
へこんでいるように見える線が表示されます。

浮上

浮上のサンプル
こちらは浮き上がっているように見える線が表示されます。沈降と組み合わせて使うと、マウスオーバーしたときにへこむ様なボタンをCSSだけで作ることもできます。(センスが良いかどうかは分かりませんが・・・)

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

「役にたった」と思ったらシェアお願いします