KompoZerのCSSエディタで枠線を設定する方法
KompoZerのCSSエディタを使って、HTML要素の枠線の指定、色や太さの指定などをする方法を解説。CSSで作成できる枠線のサンプルも掲載。
- 2016/8/16
- 2012/1/7
CSSエディタの「枠線タブ」では、ページ上の要素に対して上下左右の枠線を指定する事ができます。
枠線は、「線の種類」「線の太さ」「線の色」から、設定した時のプレビューを見ながら指定することができます。
基本的に上下左右で別々の枠線を指定することもできますが、要素を囲むような上下左右で同じ枠線を作るときは「上下左右すべて同じ指定を用いる」のチェックを入れておきます。
線の種類
指定できる枠線の種類は8種類あります。それぞれがどのように表示されるものなのかを見ていきましょう。
下のサンプルでは分かりやすくするために、線の太さを5pxに指定しています。
- 実線
-
実線のサンプル
一番利用する機会の多い線だと思います。普通の直線が表示されます。 - 点線
-
点線のサンプル
点線が表示されます。破線よりも間隔の細かい点線です。 - 破線
-
破線のサンプル
点線と見比べてみるとその違いは一目瞭然です。 - 二重線
-
二重線のサンプル
二重になっている線が表示されます。1pxの細い線の二重線を使いたい場合は、線の太さを3pxに指定するとイメージ通りの線になります。 - 谷
-
谷のサンプル
線の中に谷があるかのような線が表示されます。 - 山
-
山のサンプル
谷と同じような線ですが、こちらは山があるように見える線になります。 - 沈降
-
沈降のサンプル
へこんでいるように見える線が表示されます。 - 浮上
-
浮上のサンプル
こちらは浮き上がっているように見える線が表示されます。沈降と組み合わせて使うと、マウスオーバーしたときにへこむ様なボタンをCSSだけで作ることもできます。（センスが良いかどうかは分かりませんが・・・）
上下左右で囲む線として使う機会より、左側だけにして見出しを強調したり、重要な部分に下線を引くイメージで下側だけ指定する、といった感じで使う機会の方が多いと思います。
Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール
私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。
ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。
スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。
WebCampPro
（3ヶ月の超ガッチリ型）
3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。
しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。
WebCamp
（1か月の集中型）
こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。
このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。
CodeCamp
（2〜6か月のカスタマイズ型）
現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。
新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。
