タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）でレイアウトを設定する方法

スタイルシート（CSS）でレイアウトを設定する方法

[最新更新] 2022年08月06日
[初回公開] 2013年05月22日

スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から余白や回り込みなどレイアウト設定する使い方と実際に指定するプロパティを紹介する。

1. スタイルシート（CSS）でレイアウトを設定するメリット

スタイルシート（CSS）で各要素に対して余白や回り込みといったレイアウトを設定するメリットとしては、見やすさの向上につながる。
見出しや段落を CSS を利用せず装飾が無い状態では見出しの上下に無駄な空白ができたり、反対に段落と段落の間は空白が無く文章が見づらくなるが、適切に余白や要素の位置を指定することで読みやすくなる。

また、HTML タグはブラウザの上下スクロールに対応した性質があるため、要素も縦に並ぶようになっているが、CSS の設定により部分的に横並びにすることができる。

2. スタイルシートのレイアウトに関するプロパティ

スタイルシートのレイアウトに関するプロパティは、主に余白と位置、並び方や回り込みなど多岐に渡る。
また、位置を指定する場合は要素の幅を予め設定しておく必要があるなど、利用するプロパティが正常に動作するために複数のプロパティをセットで設定する場合がある。

2-1. 幅を指定する（width）

スタイルシートで幅を指定したい場合はプロパティ「width」を次のように利用する。
{数値} には px（ピクセル）や pt（ポイント） といった単位付きの数値や % を利用した割合での指定を行う。

width : {数値}

2-2. 高さを指定する（height）

スタイルシートで高さを指定したい場合はプロパティ「height」を次のように利用する。
{数値} には px（ピクセル）や pt（ポイント） といった単位付きの数値や % を利用した割合での指定を行う。

height : {数値}

2-3. 余白を設ける（margin）

スタイルシートで要素の外周方向に余白を設ける場合はプロパティ「margin」を次のように利用する。
{数値} には px（ピクセル）や pt（ポイント） といった単位付きの数値や % を利用した割合での指定を行う。

margin : {上方向数値} {右方向数値} {下方向数値} {左方向数値}

また、上だけ（margin-top）、下だけ（margin-bottom）、左だけ（margin-left）、右だけ（margin-right）に余白を設けることも可能である。

2-4. 枠と内容の間に余白を設ける（padding）

スタイルシートで要素の内周方向に余白を設ける場合はプロパティ「padding」を次のように利用する。
{数値} には px（ピクセル）や pt（ポイント） といった単位付きの数値や % を利用した割合での指定を行う。

padding : {上方向数値} {右方向数値} {下方向数値} {左方向数値}

また、上だけ（padding-top）、下だけ（padding-bottom）、左だけ（padding-left）、右だけ（padding-right）に余白を設けることも可能である。

2-5. 要素の横並びを指定する（display）

スタイルシートで要素を横並びにしたい場合はプロパティ「display」を次のように利用する。
{形式} には inline か block を指定し、要素を非表示にする場合は none で指定する。

display : {形式}

• inline ： インライン要素にする
• block ： ブロック要素にする
• none ： 要素を表示しない

2-6. 要素の位置を指定する（position）

スタイルシートで要素の位置を指定したい場合はプロパティ「position」を次のように利用する。
{配置指定} には absolute か relative を指定し、配置指定しない場合は static で指定する。

position : {配置指定}

• absolute ： 絶対位置で指定
• relative ： 相対位置で指定
• static ： 配置指定しない

2-7. 要素を回り込ませる（float）

スタイルシートで要素を回り込ませたい場合はプロパティ「float」を次のように利用する。
{配置場所} には left または right で指定する。

float : {配置場所}

• left ： 左への回り込み
• right ： 右への回り込み

2-8. 要素の回り込みを解除する（clear）

スタイルシートで回り込みしている要素を解除したい場合はプロパティ「clear」を次のように利用する。
{解除場所} には left または right で指定する他、両方に対応した強制解除する場合は both を指定する。

clear : {解除場所}

• left ： 左への回り込みを解除
• right ： 右への回り込みを解除
• both ： 強制解除

2-9. 要素の位置を指定する（top、bottom、left、right）

スタイルシートで要素を指定した位置に配置したい場合は次のように利用する。
上下左右にそれぞれ配置する場所を指定し、ブラウザの左上が top が 0、left が 0 の位置となる。
{数値} には px（ピクセル）や pt（ポイント） といった単位付きの数値や % を利用した割合での指定を行う。

top : 数値
bottom : 数値
left : 数値
right : 数値

これらのプロパティを利用する場合は要素の位置を指定する「position」と併用する必要がある。

2-10. 重ね順を指定する（z-index）

スタイルシートで要素の重ね順を指定したい場合はプロパティ「z-index」を次のように利用する。
{数値} には px や pt といった単位を付けずに整数値で指定する。

z-index : {数値}

指定する数値が大きいほど手前に配置されるようになる。

2-11. スクロールバーを表示する（overflow）

スタイルシートで要素にスクロールバーを付けたい場合はプロパティ「overflow」を次のように利用する。
{表示形式} には単純にスクロールバーを表示させる scroll や状態に応じて表示するように指定する。

overflow : {表示形式}

• scroll ： スクロールバーを表示する
• visible ： 幅と高さを超えて表示する
• hidden ： 幅と高さが足りなければその分を表示しない
• auto ： ブラウザの設定に従う

関連記事