KompoZerのCSSエディタで余白を指定する方法

KompoZerCSSエディタを使って、HTML要素の余白を指定する方法、CSSのmargin（余白）とpadding（枠内余白）の違いについても分かりやすく解説。

段落や汎用ブロック（divタグ）の高さ、幅、余白をCSSで調整するには、CSSエディタの「ボックスタブ」の設定を使います。

ボックスタブでは要素のサイズに関する指定のほかにもいくつか指定できる項目がありますが、ここでは最もよく使うであろう項目の指定方法についてご説明いたします。

HTML要素の高さと幅を指定するには

HTMLの要素の高さや幅を指定するには「高さ」「幅」のボックスに数値を入力して指定します。

指定する単位は%（パーセント）やpx（ピクセル）等、いくつかの単位がありますが、pxで指定するほうがページ全体のサイズの制御がしやすいと思います。

ただpx単位で指定する場合は、72dpi、96dpiといったモニタの解像度によって実際に表示される大きさが異なる場合があります。

またスタイルを適用する要素が「インライン要素（画像（img）やリンク（a）、spanといったものが該当します）」の場合は、高さの指定はできません。

ブロックレベル要素とは見出しや段落といった「まとまり」を表す要素で、その前後には改行が入る要素です。HTMLの構造を表す要素と考えてください。

一方インライン要素は、ブロックレベル要素の内容に意味を持たせる場合に使われる要素で、前後に改行は入りません。画像やリンクは文書構造を表している要素というよりは、HTMLの内容を表す要素なのでインライン要素になるということが分かると思います。

CSSで指定する余白には「margin（マージン）」と「pzdding（パディング）」の2つの種類があります。
marginはその要素の外側の余白で、paddingは要素の枠内の余白を意味しています。まずはそれぞれの違いをよく理解しておきましょう。

実際にmarginとpaddingを使って余白の指定をするには、「余白（margin）」か「枠内余白（padding）」のボックスに数値を入力して指定します。

高さと幅同様、%やpx等のいくつかの単位がありますが、こちらもpxで指定をするほうが、ページ全体のサイズ制御はしやすいです。

また余白の設定は、上側が30pxで下側が10px等、上下左右で別々の設定をすることができます。

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

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

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

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

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

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

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

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

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