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

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

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

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

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

線の種類

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

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

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

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。