【第6回】ウェブサイト制作講座：初心者でも安心！10ステップでホームページを作ろう！
第6回：レイアウトを自由自在に！CSSの基本レイアウトテクニック
前回は、CSSを使ってホームページを装飾する方法について解説しました。
今回は、CSSの基本的なレイアウトテクニックを使って、ホームページのレイアウトを自由自在に変更する方法について解説します。
CSSレイアウトの基本要素
CSSレイアウトには、以下の要素が重要です。
- displayプロパティ
要素の表示方法を指定します。block、inline、noneなどがあります。 - positionプロパティ
要素の配置方法を指定します。static、relative、absolute、fixedなどがあります。 - topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティ
要素の位置をピクセル単位で指定します。 - widthプロパティ、heightプロパティ
要素の幅と高さをピクセル単位で指定します。 - marginプロパティ、paddingプロパティ
要素の周りの余白と内側の余白をピクセル単位で指定します。
代表的なレイアウトテクニック
- ブロックレイアウト
要素を横並びに並べるレイアウトです。
CSS例.block-layout { display: block; } - インラインレイアウト
要素を縦並びに並べるレイアウトです。
CSS例.inline-layout { display: inline; } - グリッドレイアウト
要素を格子状に並べるレイアウトです。
CSS例.grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } - フレックスレイアウト
要素を柔軟に配置するレイアウトです。
CSS例.flex-layout { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
例
以下のコードは、3つの要素を横並びに並べるレイアウトです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レイアウト例</title>
<style>
.layout {
display: flex;
flex-direction: row;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff0000;
margin: 10px;
}
.box2 {
width: 100px;
height: 100px;
background-color: #0000ff;
margin: 10px;
}
.box3 {
width: 100px;
height: 100px;
background-color: #00ff00;
margin: 10px;
}
</style>
</head>
<body>
<div class="layout">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
まとめ
今回は、CSSの基本的なレイアウトテクニックについて解説しました。
次回からは、さらに高度なレイアウトテクニックや、レスポンシブデザインについて解説していきますので、ぜひご期待ください！
