CSSの基本的なプロパティを理解する：表示、配置について

Webデザインにおいて、CSSはページの外観を制御するために重要な役割を果たします。

この記事では、CSSの基本的なプロパティについて説明し、表示、配置について解説します。Webページの見た目を調整したい場合には、この記事を参考にしてください。

CSSで表示と配置をコントロールするプロパティにはどんなものがありますか？

Webページの表示、配置に関するプロパティがあります。たとえば、displayプロパティは、要素をどのように表示するかを指定するために使用されます。positionプロパティは、要素を配置するために使用されます。

表示と配置に関するプロパティについて紹介しましょう。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

ボックスモデルについて

CSSの基本的なコンセプトの1つは、ボックスモデルです。このモデルは、Webページの各要素を矩形のボックスとして表現する方法です。

このボックスには、コンテンツ、パディング、ボーダー、マージンの4つの要素があります。CSSを使用すると、これらの要素のサイズ、色、スタイルなどを指定できます。

ボックスの幅と高さを指定する方法

ボックスの幅と高さを指定することによって、Webページのレイアウトを調整し、視覚的に魅力的なデザインを作成することができます。以下では、ボックスの幅と高さを指定する方法について説明します。

幅と高さをピクセル単位で指定する

幅と高さをピクセル単位で指定することは、最も一般的な方法です。この方法では、CSSプロパティのwidthとheightを使用します。

div {
  width: 200px;
  height: 100px;
}

この例では、div要素の幅が200ピクセル、高さが100ピクセルに設定されます。

幅と高さをパーセントで指定する

幅と高さをパーセントで指定することもできます。この方法では、CSSプロパティのwidthとheightを使用します。

div {
  width: 50%;
  height: 50%;
}

この例では、div要素の幅と高さが、親要素の幅と高さの50％に設定されます。この方法を使用すると、画面サイズに応じて要素のサイズが自動的に調整されるため、レスポンシブデザインに適しています。

min-widthとmin-height、max-widthとmax-heightを使用する

要素の幅と高さを厳密に指定することができない場合、min-widthとmin-height、max-widthとmax-heightを使用することができます。これらのプロパティは、要素が必要とする最小および最大の幅と高さを指定します。

div {
  min-width: 100px;
  max-width: 500px;
  min-height: 50px;
  max-height: 200px;
}

この例では、div要素の幅が100ピクセル未満または500ピクセル以上にならず、高さが50ピクセル未満または200ピクセル以上にならないように設定されます。

overflowを使用する

要素の幅と高さが指定されたサイズよりも大きい場合、overflowプロパティを使用して、要素の内容の表示方法を指定することができます。overflowプロパティには、hidden、scroll、auto、visibleの値があります。

div {
 width: 200px;
 height: 100px;
 overflow: auto;
}

この例では、要素の幅が200ピクセル、高さが100ピクセルに設定され、要素の内容がこのサイズを超える場合には、スクロールバーが表示されるように設定されます。overflowプロパティを使用することで、Webページのレイアウトを調整し、要素の内容を適切に表示することができます。

ボックスの内側の余白を指定する

要素の内側の余白を指定することによって、テキストや画像といった要素が適切に配置され、Webページ全体のバランスが良くなります。以下では、ボックスの内側の余白を指定する方法について説明します。

paddingプロパティを使用する

要素の内側の余白を指定するために、最も一般的に使用される方法は、paddingプロパティを使用することです。このプロパティは、要素の内容とボーダーの間に余白を作成します。

div {
  padding: 20px;
}

この例では、div要素の内側の上下左右の余白が20ピクセルに設定されます。paddingプロパティは、個別の方向に異なる値を指定することもできます。

div {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

この例では、div要素の上部余白が10ピクセル、下部余白が20ピクセル、左側余白が30ピクセル、右側余白が40ピクセルに設定されます。

box-sizingプロパティを使用する

要素の内側の余白を指定すると、要素の実際の幅や高さが大きくなります。このため、Webページのレイアウトを調整する場合には、box-sizingプロパティを使用して、要素の幅や高さを制御する必要があります。

box-sizingプロパティには、content-boxとborder-boxの2つの値があります。content-boxは、paddingやborderの分も含めた全体のサイズを指定する方法です。border-boxは、paddingやborderも要素のサイズに含める方法です。

div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}

この例では、div要素の幅が300ピクセルに設定され、paddingとborderも要素のサイズに含まれるため、実際の幅は300ピクセルのままで、内側の余白が作成されます。

ボックスの外側の余白を指定する

要素の外側の余白を指定することによって、要素間のスペースを調整し、Webページ全体のバランスが良くなります。以下では、ボックスの外側の余白を指定する方法について説明します。

marginプロパティを使用する

要素の外側の余白を指定するために、最も一般的に使用される方法は、marginプロパティを使用することです。このプロパティは、要素のボーダーと隣接する要素の間に余白を作成します。

div {
  margin: 20px;
}

この例では、div要素の外側の上下左右の余白が20ピクセルに設定されます。marginプロパティは、個別の方向に異なる値を指定することもできます。

div {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  margin-right: 40px;
}

この例では、div要素の上部余白が10ピクセル、下部余白が20ピクセル、左側余白が30ピクセル、右側余白が40ピクセルに設定されます。

margin-collapseプロパティを使用する

Webデザインにおいて、要素の外側の余白を指定することは、Webページのレイアウトを調整するために非常に重要です。要素の外側の余白を指定することによって、要素間のスペースを調整し、Webページ全体のバランスが良くなります。以下では、ボックスの外側の余白を指定する方法について説明します。

1. marginプロパティを使用する

要素の外側の余白を指定するために、最も一般的に使用される方法は、marginプロパティを使用することです。このプロパティは、要素のボーダーと隣接する要素の間に余白を作成します。たとえば、以下のように書きます。

cssCopy codediv {
  margin: 20px;
}

この例では、div要素の外側の上下左右の余白が20ピクセルに設定されます。marginプロパティは、個別の方向に異なる値を指定することもできます。たとえば、以下のように書きます。

cssCopy codediv {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  margin-right: 40px;
}

この例では、div要素の上部余白が10ピクセル、下部余白が20ピクセル、左側余白が30ピクセル、右側余白が40ピクセルに設定されます。

2. margin-collapseプロパティを使用する

要素間の余白が重なる場合、margin-collapseプロパティを使用して余白を調整することができます。このプロパティは、要素間の余白を統合するかどうかを指定します。margin-collapseプロパティには、collapse、separate、autoの3つの値があります。

div {
  margin: 20px;
}

p {
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
  margin-collapse: collapse;
}

この例では、div要素とp要素の間に余白が作成されますが、p要素のmargin-collapseプロパティがcollapseに設定されているため、上下の余白が重なり合って、20ピクセルの余白が作成されます。

ボックスの配置方法を指定する：positionプロパティ

要素の位置を正確に指定することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。以下では、要素の配置方法を指定するpositionプロパティについて説明します。

要素の配置方法がデフォルトの位置に設定：static

positionプロパティの初期値はstaticです。staticを指定すると、要素の配置方法がデフォルトの位置に設定されます。この場合、top、right、bottom、leftプロパティは無視されます。たとえば、以下のように書きます。

div {
  position: static;
}

元の位置からの相対的な位置に設定：relative

relativeを指定すると、要素の配置方法が、元の位置からの相対的な位置に設定されます。たとえば、以下のように書きます。

div {
  position: relative;
  top: 20px;
  left: 10px;
}

この例では、div要素が元の位置から上に20ピクセル、左に10ピクセル移動します。relativeを指定する場合、top、right、bottom、leftプロパティを使用して、要素の位置を指定することができます。

absolute

absoluteを指定すると、要素の配置方法が、最も近いpositionがrelative、absolute、fixedの要素を基準に設定されます。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この例では、div要素が親要素の中央に配置されます。absoluteを指定する場合、top、right、bottom、leftプロパティを使用して、要素の位置を指定することができます。また、transformプロパティを使用して、要素を正確な位置に移動することもできます。

要素の配置方法が、ビューポートの左上隅を基準に設定：fixed

fixedを指定すると、要素の配置方法が、ビューポートの左上隅を基準に設定されます。たとえば、以下のように書きます。

div {
  position: fixed;
  top: 0;
  left: 0;
}

この例では、div要素がビューポートの左上隅に固定されます。fixedを指定する場合、top、right、bottom、leftプロパティを使用して、要素の位置を指定することができます。

ボックスの配置位置を指定する：top, left ,right , bottomプロパティ

素を正確な位置に配置することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。以下では、要素の配置位置を指定するtop、left、right、bottomプロパティについて説明します。

topプロパティは、要素の上端の位置を指定します。この例では、div要素が親要素の上端から20ピクセル下に移動します。

div {
  position: absolute;
  top: 20px;
}

leftプロパティは、要素の左端の位置を指定します。この例では、div要素が親要素の左端から10ピクセル右に移動します。

div {
  position: absolute;
  left: 10px;
}

rightプロパティは、要素の右端の位置を指定します。この例では、div要素が親要素の右端から50ピクセル左に移動します。

div {
  position: absolute;
  right: 50px;
}

bottomプロパティは、要素の下端の位置を指定します。この例では、div要素が親要素の下端から30ピクセル上に移動します。

div {
  position: absolute;
  bottom: 30px;
}

これらのプロパティを組み合わせて、要素を正確な位置に配置することができます。

div {
  position: absolute;
  top: 20px;
  left: 10px;
}

この例では、div要素が親要素の上端から20ピクセル下、左端から10ピクセル右に移動します。

また、これらのプロパティは、positionプロパティの値がabsolute、fixedの場合にのみ有効です。staticを指定した場合、これらのプロパティは無視されます。

ボックスの重ね順を指定する：z-indexプロパティ

要素を正確な順序で配置することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。以下では、要素の重ね順を指定するz-indexプロパティについて説明します。

z-indexプロパティは、要素の重ね順を指定するために使用されます。z-indexの値が大きい要素は、z-indexの値が小さい要素の上に表示されます。

div {
  position: absolute;
  top: 20px;
  left: 10px;
  z-index: 1;
}

p {
  position: absolute;
  top: 50px;
  left: 20px;
  z-index: 2;
}

この例では、p要素がdiv要素の上に表示されます。p要素のz-indexプロパティの値が2であり、div要素のz-indexプロパティの値が1であるため、p要素が上に表示されます。

z-indexプロパティには、正の整数、負の整数、autoの値を指定することができます。正の整数を指定すると、その値が大きい要素が上に表示されます。負の整数を指定すると、その値が小さい要素が上に表示されます。autoを指定すると、要素の重なり順は自動的に決定されます。

ただし、z-indexプロパティは、positionプロパティの値がstaticの場合には無効です。また、z-indexプロパティを指定する要素の親要素にもpositionプロパティを指定する必要があります。

ボックスの回り込みを指定する：floatプロパティ

要素を正確な位置に配置することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。以下では、要素の回り込みを指定するfloatプロパティについて説明します。

floatプロパティは、要素を左または右にフロートさせ、テキストや他の要素が周り込むようにします。たとえば、以下のように書きます。

img {
  float: left;
}

この例では、img要素が左にフロートされ、その右側にテキストや他の要素が周り込むように表示されます。floatプロパティは、個別の方向に異なる値を指定することもできます。

img {
  float: right;
  margin-left: 10px;
}

この例では、img要素が右にフロートされ、その左側に10ピクセルの余白が設定されます。floatプロパティを使用する場合、overflowプロパティを設定する必要がある場合があります。これは、floatプロパティによって、親要素の高さが自動的に決定されなくなるためです。

floatプロパティを指定した要素は、親要素から切り離されてしまうため、その親要素が高さを持たなくなる場合があります。この場合、親要素に対してclearプロパティを設定することで、問題を解決することができます。

<div style="overflow: auto; clear: both;">
  <img src="image.jpg" style="float: left;">
  <p>テキスト</p>
</div>

この例では、div要素にoverflowプロパティとclearプロパティが設定されています。これにより、img要素がfloatされていても、div要素が適切な高さを保持することができます。

ボックスの回り込み解除を指定する：clearプロパティ

要素を正確な位置に配置することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。以下では、要素の回り込み解除を指定するclearプロパティについて説明します。

clear: both;を指定すると、左右の両方から回り込みを解除します。この例では、div要素が左右の両方から回り込みを解除します。

div {
  clear: both;
}

clear: left;を指定すると、左側から回り込みを解除します。この例では、div要素が左側から回り込みを解除します。

div {
  clear: left;
}

clear: right;を指定すると、右側から回り込みを解除します。この例では、div要素が右側から回り込みを解除します。

div {
  clear: right;
}

clearプロパティは、回り込みを解除する要素の直後に設定する必要があります。

<div>
  <img src="image.jpg" style="float: left;">
  <p>テキスト</p>
  <div style="clear: both;"></div>
</div>

この例では、div要素の中に、floatされたimg要素とp要素があります。floatされた要素があるため、div要素の高さが自動的に決定されなくなります。そのため、回り込みを解除するdiv要素を設置しています。

ボックスからはみ出た内容の表示方法を指定する：overflow , over-flow-x , over-flow-y

Webデザインにおいて、要素の内容がボックスからはみ出すことがあります。この場合、要素の表示方法を指定することができます。以下では、要素からはみ出た内容の表示方法を指定するoverflow、overflow-x、overflow-yプロパティについて説明します。

要素の内容がボックスからはみ出した場合の表示方法を指定：overflow

overflowプロパティは、要素の内容がボックスからはみ出した場合の表示方法を指定します。

div {
  overflow: hidden;
}

この例では、div要素の内容がボックスからはみ出した場合、はみ出た部分を非表示にします。この場合、ボックスのサイズは変わらず、はみ出した部分が隠れてしまうだけです。

要素の横方向に対する内容がボックスからはみ出した場合の表示方法を指定：overflow-x

overflow-xプロパティは、要素の横方向に対する内容がボックスからはみ出した場合の表示方法を指定します。

div {
  overflow-x: scroll;
}

この例では、div要素の横方向に対する内容がボックスからはみ出した場合、スクロールバーを表示して内容を表示します。スクロールバーが表示されるため、はみ出した内容を表示することができます。

要素の縦方向に対する内容がボックスからはみ出した場合の表示方法を指定：overflow-y

overflow-yプロパティは、要素の縦方向に対する内容がボックスからはみ出した場合の表示方法を指定します。

div {
  overflow-y: auto;
}

この例では、div要素の縦方向に対する内容がボックスからはみ出した場合、スクロールバーを表示して内容を表示します。スクロールバーが表示されるため、はみ出した内容を表示することができます。

以上が、要素からはみ出た内容の表示方法を指定するoverflow、overflow-x、overflow-yプロパティについての説明です。これらのプロパティをうまく使うことで、Webページのレイアウトを調整し、要素を正確に配置することができます。

ボックスの切り抜きを指定する：clipプロパティ

Webデザインにおいて、要素を切り抜くことが必要になることがあります。例えば、画像をクリップすることで、特定の領域だけを表示したり、背景画像をクリップすることで、特定の領域だけを表示することができます。以下では、要素の切り抜きを指定するclipプロパティについて説明します。

clipプロパティは、要素を切り抜くために使用されます。要素を正確な位置に配置することによって、Webページのレイアウトを調整し、デザインのバランスをとることができます。clipプロパティは、positionプロパティがabsoluteまたはfixedである場合にのみ使用できます。

clipプロパティは、四角形の座標を指定する値で構成されます。これらの値は、上、右、下、左の順で指定されます。

img {
  position: absolute;
  clip: rect(0px, 100px, 100px, 0px);
}

この例では、img要素が左上から100ピクセルの幅と高さで切り抜かれ、残りの部分が表示されます。rect関数で指定された4つの値は、上、右、下、左の順で指定され、単位はピクセルです。

clipプロパティを使用する場合、要素の表示サイズが変更されるため、要素の位置を調整する必要がある場合があります。

img {
  position: absolute;
  clip: rect(0px, 100px, 100px, 0px);
  top: 20px;
  left: 20px;
}

この例では、img要素が左上から100ピクセルの幅と高さで切り抜かれ、残りの部分が表示されます。また、topプロパティとleftプロパティが設定されているため、img要素が正確な位置に配置されます。

以上が、要素の切り抜きを指定するclipプロパティについての説明です。これらのプロパティをうまく使うことで、Webページのレイアウトを調整し、要素を正確に配置することができます。

ボックスの種類を指定する：displayプロパティ

要素の種類に応じてボックスの種類を指定することができます。たとえば、文字列やリストなどの要素にはデフォルトでブロック要素やインライン要素が設定されていますが、displayプロパティを使用してボックスの種類を変更することができます。以下では、displayプロパティについて説明します。

blockを指定すると、要素がブロック要素として表示されます。この例では、div要素がブロック要素として表示されます。ブロック要素は、自動的に改行が挿入され、親要素の幅いっぱいを占めます。

div {
  display: block;
}

inlineを指定すると、要素がインライン要素として表示されます。この例では、span要素がインライン要素として表示されます。インライン要素は、ブロック要素と比較して幅と高さが自動的に設定され、親要素の内側のテキストの中に表示されます。

span {
  display: inline;
}

inline-blockを指定すると、要素がインラインブロック要素として表示されます。この例では、button要素がインラインブロック要素として表示されます。インラインブロック要素は、インライン要素と同様に行内に表示されるが、ブロック要素と同様に高さや幅を設定できる。

button {
  display: inline-block;
}

noneを指定すると、要素が表示されなくなります。この例では、p要素が表示されなくなります。noneを指定することで、不要な要素を非表示にすることができます。

p {
  display: none;
}

displayに指定できるキーワード

以下は、displayプロパティで指定できるキーワードと、その意味を表にまとめたものです。

これらのキーワードを使用することで、要素の表示方法を調整し、Webページのレイアウトを調整することができます。

文字を並ぶ方向を指定する：directionプロパティ、 unicode-bibiプロパティ

Webデザインにおいて、文字の表示方向を指定することができます。たとえば、日本語のように横書きが一般的な言語では、文字が左から右に表示されます。しかし、アラビア語のように右から左に表示される言語もあります。

また、文字エンコーディングによっても、文字の表示方向が異なることがあります。以下では、文字の並ぶ方向を指定するdirectionプロパティとunicode-bidiプロパティについて説明します。

テキストの並ぶ方向を指定：directionプロパティ

directionプロパティは、テキストの並ぶ方向を指定します。

p {
  direction: rtl;
}

この例では、p要素内のテキストが右から左に並ぶように指定されます。directionプロパティには、ltr（左から右）またはrtl（右から左）を指定することができます。

テキストの並び順を指定：unicode-bidiプロパティ

unicode-bidiプロパティは、テキストの並び順を指定するために使用されます。

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

この例では、p要素内のテキストが右から左に並ぶように指定されます。また、unicode-bidiプロパティには、bidi-override、embed、override、isolate、plaintextのいずれかを指定することができます。

bidi-overrideは、テキストの並び順を上書きするために使用されます。embedは、テキストの並び順を自動的に判別するために使用されます。overrideは、特定の範囲内でテキストの並び順を変更するために使用されます。isolateは、特定の範囲内でテキストの並び順を分離するために使用されます。plaintextは、テキストを左から右に表示するために使用されます。

以上が、directionプロパティとunicode-bidiプロパティについての説明です。これらのプロパティをうまく使うことで、Webページのレイアウトを調整し、テキストの表示方向を正確に制御することができます。

ボックスの表示・非表示を指定する：visibilityプロパティ

Webデザインにおいて、要素の表示・非表示を指定することができます。visibilityプロパティは、要素の表示・非表示を制御するために使用されます。以下では、visibilityプロパティについて説明します。

visibilityプロパティは、要素を表示するかどうかを指定するために使用されます。たとえば、以下のように書きます。

div {
  visibility: hidden;
}

この例では、div要素が非表示になります。visibilityプロパティには、visible（表示）、hidden（非表示）、collapse（表の列または行を非表示にする）を指定することができます。

ただし、visibilityプロパティによって要素が非表示になっても、その要素が占めるスペースは残ります。要素の表示と非表示の両方を制御したい場合は、displayプロパティを使用することができます。

div {
  display: none;
}

この例では、div要素が非表示になり、占めるスペースも消えます。displayプロパティには、none（非表示）、block（ブロック要素）、inline（インライン要素）など、visibilityプロパティと同様のキーワードが使用できます。

以上が、visibilityプロパティについての説明です。これらのプロパティをうまく使うことで、Webページのレイアウトを調整し、要素を正確に制御することができます。

行内のテキストや要素の縦の揃えを指定する：vertical-alignプロパティ

Webデザインにおいて、行内のテキストや要素の縦方向の揃えを指定することができます。vertical-alignプロパティは、行内要素の縦方向の位置を制御するために使用されます。以下では、vertical-alignプロパティについて説明します。

vertical-alignプロパティは、行内要素の縦方向の位置を指定するために使用されます。

span {
  vertical-align: middle;
}

この例では、span要素が親要素の中央に垂直に揃えられます。vertical-alignプロパティには、以下のような値を指定することができます。

vertical-alignプロパティは、行内要素の縦方向の位置を制御するために使用されますが、ブロック要素には影響しません。ブロック要素の縦方向の位置を制御する場合は、marginプロパティを使用することができます。

以下は、vertical-alignプロパティで指定できる値とその意味を表にまとめたものです。

これらの値を使用することで、テキストや行内要素の縦方向の位置を正確に制御することができます。ただし、ブロック要素には影響を与えませんので、ブロック要素の縦方向の位置を制御する場合は、marginプロパティを使用する必要があります。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

CSSの基本的なプロパティについて説明し、表示、配置について解説しました。

displayプロパティやpositionプロパティについての説明は、初学者にとっては非常に役立ちました。また、プロパティの種類が多く、どれを覚えたらいいかわからなかったのですが、基本的なプロパティをまとめて説明してくれたので、とても助かりました。

CSSは、Webデザインにおいて非常に重要な役割を担っています。この記事で紹介した基本的なプロパティをしっかりと覚えておくことが、Webページのデザインを行う上での大きな武器になります。また、CSSを学ぶ際には、実際に手を動かしながら学ぶことが大切です。自分でコードを書いて試してみることで、理解が深まります。Webデザインを楽しみながら、CSSを学んでいきましょう。