HP初心者講座
前回は、HTMLで「Webサイトの骨組み（ヘッダー・メイン・フッター）」を作りました。
今回はそのページにCSSでレイアウト（配置）を整える方法です。
文章や画像を横に並べたり、全体を中央に寄せたりすると、ぐっと見やすくなります。
まずは基本 テキストを中央寄せする
一番シンプルな配置方法が「中央寄せ」です。
テキストの場合は text-align: center; を使います。
HTML
<h1>Webサイト</h1>
<p>ようこそ！</p>CSS
h1, p {
text-align: center;
}これで見出しも段落も中央寄せになります。
ボックスを中央に寄せる（横方向）
画像やボックス全体を中央に置きたいときは、
次のように margin: 0 auto; を使います。
HTML
<div class="box">中央のボックス</div>CSS
.box {
width: 300px;
background-color: #f2f2f2;
padding: 20px;
margin: 0 auto;
text-align: center;
}「margin: 0 auto;」は上下（0）・左右（auto）を指定して
左右の余白を自動で均等にする＝真ん中に寄せる という意味です。
要素を横に並べる（Flexboxの使い方）
現在の主流は Flexbox（フレックスボックス）を利用する方法 です。
親要素に display: flex; を指定するだけで、中の要素を横に並べることができます。
HTML
<div class="flex">
<div class="item">左のボックス</div>
<div class="item">右のボックス</div>
</div>CSS
.flex {
display: flex;
justify-content: center; /* 全体を中央寄せ */
gap: 20px; /* 要素の間に余白を入れる */
}
.item {
width: 200px;
padding: 20px;
background-color: #e0f7fa;
text-align: center;
}これで2つのボックスがきれいに横並びになります。
応用 画像とテキストを横に並べる
HTML
<div class="profile">
<img src="profile.jpg" alt="プロフィール画像">
<div class="text">
<h2>こんにちは！</h2>
<p>Web制作をしています。</p>
</div>
</div>CSS
.profile {
display: flex;
align-items: center; /* 縦方向の中央をそろえる */
gap: 20px;
}
.profile img {
width: 120px;
border-radius: 50%;
}
.profile .text {
font-size: 16px;
}ポイント
align-items: center;で縦方向の位置をそろえるgapで余白を調整border-radius: 50%;で丸い画像にできる
まとめ
| 目的 | プロパティ | 内容 |
|---|---|---|
| テキスト中央寄せ | text-align: center; | テキストを中央に配置 |
| ボックス中央寄せ | margin: 0 auto; | 要素全体を中央に配置 |
| 要素を横並びに | display: flex; | 複数の要素を横並びに配置 |
CSSの配置を覚えると、デザインが一気に整って見えるようになります
初心者の皆様へ
「Flexboxを使っても思ったように並ばない…」
「画像とテキストのバランスが崩れてしまう…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！
次回予告
次回は、「画像やボタンを使って“サイトっぽく”見せる方法」 を紹介します。
画像を配置したり、ボタンを装飾すると見栄えがぐっと良くなります。
