（最終更新日：2023年6月）
✔以下のような方々におすすめです
「HTMLでどうやって要素を中央寄せにするのか？」
「HTMLでの中央寄せの手法を具体的に知りたい」
「HTMLで要素を中央寄せにする具体的な例を見てみたい」
✔当記事で学べること
- HTMLでの要素の中央寄せの基本的な方法
- 中央寄せの具体的な手法とその応用
- HTMLで要素を中央寄せにする実例
この記事では、HTMLで要素を中央寄せにする基本的な方法から、さまざまなオプションを駆使した応用例まで、詳しく解説します。
ぜひ最後までご覧ください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
HTMLでの中央寄せの基本
こちらでは、HTMLにおける「中央寄せ」の基本についてお伝えしていきます。
「中央寄せ」の基本を理解することで、ウェブページの見栄えを良くし、情報を効果的に伝えられます。
- 中央寄せの意味と重要性
- 文字、要素、画像、表、リストを中央寄せする基本的な方法
中央寄せの意味と重要性
「中央寄せ」とは、文字や要素をウェブページの中心に配置するデザイン手法のことを指します。
ウェブページを見る際、人の目は自然と中央に引き寄せられる傾向があるのです。
重要な情報や視覚的な要素を中央寄せにすることで、情報伝達がスムーズに進みます。
文字、要素、画像、表、リストを中央寄せする基本的な方法
中央寄せはHTML要素の種類に関係なく適用できます。
- テキスト：「text-align: center」のスタイルを使用
- 画像や他のブロック要素：「margin: auto」を使用
また、テーブルやリストも同様にCSSを用いて中央寄せすることが可能です。
テキストの中央寄せ
このセクションでは、HTMLでテキストを中央寄せにする方法について詳しく解説します。
- text-align属性を用いた中央寄せ
- 画像のテキスト対齐と中央寄せ
- テキスト中央寄せの具体的な例
text-align属性を用いた中央寄せ
テキストの中央寄せは、「text-align: center」を使用しておこないます。
これをCSSスタイルとしてpタグやh1〜h6タグなどのテキストを含む要素に適用することで、テキストを容易に中央寄せにできます。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<p class="center">このテキストは中央寄せです。</p>
</body>
</html>画像のテキストを中央寄せ
画像内のテキストもまた、「text-align: center」を使用して中央寄せできます。
これは画像がブロック要素として配置され、その内部にテキストが含まれている場合に特に有用です。
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<div class="center-text">
<img src="image.jpg" alt="image">
<p>このテキストは画像の下に中央寄せです。</p>
</div>
</body>
</html>テキスト中央寄せの具体的な例
実際の例を見てみましょう。例えば、以下のHTMLを考えます。
<div>
<p>This is a paragraph that we want to center.</p>
</div>この段落を中央寄せにするには、インラインスタイルでは以下のようになります。
<div style="text-align: center;">
<p>This is a paragraph that we want to center.</p>
</div>これにより、テキストは中央寄せになります。
ブロック要素の中央寄せ
ここでは、ブロック要素の中央寄せについて詳しく説明します。
ブロック要素を適切に配置することは、ウェブページのデザインにおいて重要です。
- margin:autoを用いたブロック要素の中央寄せ
- divタグを利用した中央寄せ
- ブロック要素中央寄せの具体的な例
margin:autoを用いたブロック要素の中央寄せ
ブロック要素を中央寄せにする基本的な方法のひとつは、「margin: auto」を使用すること。
この方法は、要素の左右のマージンを自動的に等しくすることで、要素を中央に配置します。
ただし、これを機能させるためには、要素に固定の幅（width）が設定されている必要があります。
<!DOCTYPE html>
<html>
<head>
<style>
.center-block {
width: 50%; /* ここで要素の幅を指定します */
margin: auto; /* 左右のマージンを自動的に等しくします */
}
</style>
</head>
<body>
<div class="center-block">
<p>このテキストは中央に配置されたブロック要素の中にあります。</p>
</div>
</body>
</html>divタグを利用した中央寄せ
divタグは、HTMLのブロック要素で、一般的にデザインやレイアウトを適用するために使用されます。
div要素を中央寄せにするには、「margin: auto」を適用し、固定の幅を設定。
<!DOCTYPE html>
<html>
<head>
<style>
.center-div {
width: 80%; /* 固定の幅を設定します */
margin: auto; /* 左右のマージンを自動的に等しくします */
}
</style>
</head>
<body>
<div class="center-div">
<p>このテキストは中央に配置されたdiv要素の中にあります。</p>
</div>
</body>
</html>ブロック要素中央寄せの具体的な例
具体的な例を挙げてみましょう。
次のHTMLで定義されたdiv要素を考えます。
<div>
This is a block element that we want to center.
</div>このdiv要素を中央寄せにするには、インラインスタイルで次のよう書きます。
<div style="margin: auto; width: 50%;">
This is a block element that we want to center.
</div>画像の中央寄せ
このセクションでは、HTMLで画像を中央寄せにする方法について詳しく解説します。
- 画像の水平方向への中央寄せ
- 画像の垂直方向への中央寄せ
画像の水平方向への中央寄せ
HTMLで指定した画像を水平方向に中央寄せするためには、その画像を囲むブロックレベルのコンテナに対して「text-align: center」を指定します。
また、「margin: auto」を使用する場合、画像要素に「display: block」を指定する必要があります。
<!DOCTYPE html>
<html>
<head>
<style>
.center-image {
display: block;
margin: auto;
}
.center-text {
text-align: center;
}
</style>
</head>
<body>
<div class="center-text">
<img class="center-image" src="image.jpg" alt="Centered Image">
</div>
</body>
</html>画像の垂直方向への中央寄せ
画像の垂直方向への中央寄せは少しトリッキーです。
一つの方法として、親要素に対して「display: flex」および「align-items: center」を使用する方法があります。
<!DOCTYPE html>
<html>
<head>
<style>
.center-vertical {
display: flex;
align-items: center;
height: 300px; /* 必要に応じて高さを調節 */
border: 1px solid black; /* 視覚化のためのボーダー */
}
</style>
</head>
<body>
<div class="center-vertical">
<img src="image.jpg" alt="Centered Image">
</div>
</body>
</html>テーブルの中央寄せ
ここでは、HTMLとCSSを使用してテーブルを中央寄せにする方法を詳しく解説します。
- HTMLのalign属性での中央寄せ
- CSSを用いたテーブルの中央寄せ
HTMLのalign属性での中央寄せ
HTML4までは、「align」属性を使用してテーブルを中央寄せにすることができました。
たとえば、「<table align=”center”>」というように使用されます。
しかし、HTML5ではこの属性は非推奨となり、次のCSSによる方法がおすすめです。
CSSを用いたテーブルの中央寄せ
現代的な方法としては、CSSを使用したテーブルの中央寄せが推奨されています。
テーブルに「margin: auto」を適用することで、テーブルはその親要素の中央に配置されます。
<!DOCTYPE html>
<html>
<head>
<style>
.center-table {
margin: auto;
}
</style>
</head>
<body>
<table class="center-table" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>リストの中央寄せ
順序付きリスト（ol）や順序なしリスト（ul）を中央寄せにするには、リスト自体をブロック要素として扱い、その左右のマージンを自動に設定します。
具体的には、「<ul style=”margin: auto; width: 50%;”>」というようにスタイルを設定することでリストを中央寄せにできます。
具体的な例として、以下のリストを考えましょう。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
このリストを中央寄せにするには、次のようにCSSを追加します。
<ul style="margin: auto; width: 50%;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>これにより、リストはページの中央に配置されます。
高度な中央寄せの手法
このセクションでは、より高度な中央寄せの手法を解説します。
これらの方法は、特定の条件下で特に有効な手段となります。
- transformを用いた中央寄せ
- Flexboxを用いた中央寄せ
- CSS Gridを用いた中央寄せ
transformを用いた中央寄せ
CSSの「transform」プロパティを用いて要素を中央寄せすることも可能です。
この方法は特に要素のサイズが動的な場合に有効で、要素の位置をその自身のサイズに基づいて調整します。
「transform: translate(-50%, -50%)」は要素を左上から見て左に50%、上に50%移動させます。
これを利用すると、要素が親要素の中心を基準に移動します。
例はこちらです。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f8f9fa;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #6c757d;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="centered">I am centered</div>
</div>
</body>
</html>Flexboxを用いた中央寄せ
CSS3から導入されたFlexboxは、要素の配置、方向、順序、サイズ等を容易に制御できる強力なツールです。
Flexboxを使った中央寄せは、「display: flex」を親要素に設定し、その後「justify-content: center」(水平方向) と「align-items: center」(垂直方向) を設定します。
これらのプロパティは、フレックスアイテムを親要素の中心に配置します。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
justify-content: center;
align-items: center;
background-color: #f8f9fa;
}
.centered {
background-color: #6c757d;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="centered">I am centered</div>
</div>
</body>
</html>CSS Gridを用いた中央寄せ
CSS Gridもまた要素の配置を制御する強力なツールで、Flexboxと同様に要素を簡単に中央寄せにできます。
親要素に「display: grid」を設定し、「justify-content: center」(水平方向)と「align-items: center」(垂直方向)を設定します。
これらのプロパティは、グリッドアイテムを親要素の中心に配置します。
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 200px;
justify-content: center;
align-items: center;
background-color: #f8f9fa;
}
.centered {
background-color: #6c757d;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="centered">I am centered</div>
</div>
</body>
</html>HTML5で非推奨となった中央寄せのタグと属性
ここでは、HTML5で非推奨となった中央寄せのタグと属性について説明します。
- centerタグの歴史と代替手段
- align属性の歴史と代替手段
centerタグの歴史と代替手段
centerタグの使用はせず、CSSを使用した方が適切です。
なぜならHTML5で非推奨となった方法だから。
HTML4までは、centerタグで、中に含まれる要素全体を中央寄せできました。
例えば「text-align: center」を用いると、テキストを中央寄せにできたのです。
今はCSSを活用して、中央寄せをおこないましょう。
align属性の歴史と代替手段
align属性もまた、HTML4までのもので、HTML5では非推奨とされました。
この属性を用いて、テキストや画像などの要素を左寄せ、右寄せ、または中央寄せに配置することが可能でした。
しかし、現在では、この属性の代わりにCSSを用いて要素の配置を制御します。
例えば、テキストの場合、「text-align: center」を使用して中央寄せを実現しましょう。
画像やブロック要素の場合、「margin: auto」を使用してください。
中央寄せの注意点とブラウザーの互換性
ここでは、HTMLでの中央寄せを行う上での注意点と、ブラウザ間の互換性について説明します。
- 中央寄せの際のブラウザ間の互換性問題
- 中央寄せとレスポンシブデザイン
中央寄せの際のブラウザ間の互換性問題
HTMLとCSSで実装された中央寄せの表示はブラウザによって異なる可能性があります。
これは、各ブラウザがHTMLとCSSを解釈する方法が異なるためです。
そのため、中央寄せを正確に実現するためには、対象となるブラウザでテストをおこないましょう。
中央寄せとレスポンシブデザイン
レスポンシブデザインの観点からも、中央寄せの実装は重要です。
デバイスのサイズや向きによって、中央寄せの要素がどのように表示されるかが変わります。
具体的には、メディアクエリを用いてデバイスの幅に基づいたスタイルを適用することで、各デバイスで最適な中央寄せを実現できます。
まとめ：HTMLでの中央寄せの理解と活用
当記事で解説したことはこちら。
- テキスト、ブロック要素、画像、テーブル、リストを中央寄せにする方法
- 高度な中央寄せ手法
- 非推奨となったタグや属性
- ブラウザ間の互換性
- レスポンシブデザインとの関係
中央寄せは、ページを見やすくなるために必ず使われる手法です。
必ず理解したうえで、さまざまな要素に適用できるようになりましょう。
ほかのCSSと組み合わせると、さらにデザイン性がアップします。