サイト型トップページの作り方を公開しています!Check

もう迷わない!要素(バナー)を上下左右中央寄せにする方法|HTMLインラインスタイルとCSSの違い

アイキャッチ|中央寄せ テーマ共通
テーマ共通
記事内に広告が含まれています

ウェブデザインにおいて、バナーなどの要素を中央に配置することは視覚的なバランスを整える上で重要なポイントです。この記事では、CSSを使用して要素を中央寄せにする方法を解説します。

例えば、デフォルトではバナー画像は左寄せになっていることが多いです。これを中央に配置することで、見た目のバランスを整えデザインを統一できます。

バナー配置例

デフォルト:左寄せ

カスタマイズ後:中央寄せ

この例では、CSSを使って中央寄せを指定します。

  • Step1
    CSSで中央余寄せを定義

    子テーマのスタイルシートに以下を記述しておきます。一度書いておけば、サイト全体で何度でも繰り返し使えます

    .center-text {
        text-align: center;
    }
  • Step2
    HTMLでバナーリンクを囲む

    「カスタムHTML」を利用して<div class="center-text"></div>でバナーリンクを囲むだけです。

    <div class="center-text">
        <a><img src="banner.jpg" alt="バナー"></a>
    </div>

バナーを中央寄せにするにはこれだけでOK!

バナーを中央に配置する方法を知りたい方は、ぜひ参考にしてください!

スポンサーリンク

この記事を書いた人

はっちゃんです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計340件(月間約20件)購入いただいています

HTMLインラインスタイルとCSS|記述方法の違い

記述方法は2種類あり、以下の特徴があります。

項目HTML内\推奨/
CSSファイル
適用方法HTMLの style 属性CSSファイルを使う
手軽さすぐに試せるスタイルシートへの記述が必
メンテナンス性低い(都度修正)高い(共通管理できる)
可読性低い高い
再利用性低い(ページごとに記述)高い(複数ページに適用可能)

HTMLインラインスタイルの特徴

HTMLの style 属性を直接使う方法です。CSSファイルを作成せずにHTMLだけでデザインを調整できます。

  • すぐに適用できるため、簡単に試すことができる
  • HTMLの可読性が下がる
  • メンテナンス性が低い(スタイル変更時にすべてのHTMLを修正する必要あり

CSSファイル(外部スタイル)の特徴

HTMLの classid を使い、CSSファイルでスタイルを定義する方法です。

  • コードが整理され、可読性が向上
  • 複数のページや要素に対して一括適用できるため、管理がしやすい
  • 外部CSSファイルを用いることで、サイト全体のデザイン変更が容易になる

使い分けのポイント

  • すぐ試したいとき・簡単なデザイン → HTML内(インラインCSS)
  • 複数ページで統一したデザイン管理をするなら → CSSファイル

一見、「HTMLだけで指定できる方が楽じゃない?」と思われがちですが、長期的なメンテナンスのしやすさを考えると、CSSファイルで記述するのが推奨されます。

単純なレイアウトでもCSS記述一択です。

スポンサーリンク

要素を【左右】中央寄せにする方法

要素を中央に配置する方法にはいくつかのアプローチがあります。

  • インライン要素の中央寄せ(text-align:center)
  • ブロック要素の中央寄せ(margin-inline:auto)
  • Flexboxを使用する方法
  • Gridを使用する方法
  • positionを使用する方法

インライン要素|text-align:center を使用する

ブロック要素内のインライン要素を中央揃えにする場合、親要素に text-align: center; を適用します。この方法はもっともシンプルで特にテキストを手軽に中央配置したい場合に適しています。

インライン要素とはHTMLの要素のうち文字(行)の一部として扱われる要素 のこと。代表的なものとして、<span><a><strong><img> などがあります。

バナー画像は img 要素で表されることが多いため、インライン要素または inline-block として扱われます。

注意点

要素がインラインの場合のみ適用されます。

  • display: inline;
  • もしくは inline-block;
<div class="center-text">
    <img src="banner.jpg" alt="バナー">
</div>
.center-text {
    text-align: center;
}

ブロック要素|margin-inline:auto; を使用する

ブロック要素を中央揃えにする場合、CSS の margin-inline:auto; を適用します。

margin:auto; を使用しても中央寄せは可能ですが、水平方向のみに適用したい場合は margin-inline:auto; の方が適切です。これは、margin:auto; が上下左右すべてのマージンに適用されるのに対し、margin-inline:auto; は左右のみに影響するためです。

<img src="banner.jpg" alt="バナー" class="center-block">
.center-block {
    display: block;
    margin-inline: auto;
}

Flexboxを使用する

親要素に display: flex; を指定し、 justify-content: center; を適用することで子要素を水平方向に中央寄せできます。

<div class="flex-center">
    <img src="banner.jpg" alt="バナー">
</div>
.flex-center {
    display: flex;
    justify-content: center;
}

Grid を使用する

親要素に display: grid; を指定し、 justify-content: center; を適用することで子要素を水平方向に中央寄せできます。

<div class="grid-center">
    <img src="banner.jpg" alt="バナー">
</div>
.grid-center {
    display: grid;
    justify-content: center;
}

positionを使用する

position: absolute;transform: translate(); を使うことで、要素を中央に配置できます。

<div class="position-center">
    <img src="banner.jpg" alt="バナー">
</div>
.position-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
スポンサーリンク

要素を【上下左右】中央に配置する方法

複数画像スライダー

画面の上下左右中央に要素を配置する場合、height の指定が必要です。

Gridを使用する

上下左右中央に配置するには、CSSのGrid を利用する方法が非常にシンプルで直感的です。

place-items はアイテム自体の中央配置をおこない、place-content はアイテムが中央に配置された際の全体の配置をコントロールする役割があります。

<div class="container">
    <div class="content">中央の要素</div>
</div>
.container {
  display: grid;
  place-content: center;/* 上下左右中央配置 */
  height: 100vh; /* ビューポートの高さを指定 */
}

Flexboxを使用する

一般的なのは flexbox を使用する方法です。

<div class="container">
  <div class="content">中央の要素</div>
</div>
.container {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  height: 100vh; /* ビューポートの高さを指定 */
}

この方法では、justify-content: center; が水平方向の中央揃え、align-items: center; が垂直方向の中央揃えをおこないます。

positionを使用する

position: absolute;transform: translate(); を使うことで、要素を中央に配置できます。

<div class="container">
  <div class="content">中央の要素</div>
</div>
.container {
  position: relative;
  height: 100vh;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
スポンサーリンク

まとめ

バナーを中央寄せにする方法は、レイアウトの構造や用途に応じて異なります。それぞれの方法の特徴を理解し、適切なものを選びましょう。

方法メリットデメリット
text-align:center簡単に適用可能インライン要素にのみ適用
margin-inline:autoブロック要素の中央寄せに最適親要素の影響を受ける
Flexbox柔軟なレイアウトが可能親要素の設定が必要
Gridレスポンシブに適応可能グリッドレイアウトを理解する必要がある
position + transform確実な中央配置が可能記述が長くなる

どの方法を選ぶか迷った場合は、目的や使いやすさに応じて選択しましょう!

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました