新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
【CSS3】要素の幅が変動しても[margin:0px auto;]で左右中央寄せする方法

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか?

例えばテキストを画面の、あるいはエリアの中央に寄せたい場合は[text-align:center;]が一般的ですよね。

あるいはブロック要素なら、そのブロックの幅を決めたうえで、同じクラスやタグに[margin:0px auto;]のように指定すれば中央寄せになるでしょうか。

では、ブロック要素の幅が明確に指定されていなかったら、どうしましょう??

今回の記事は、「要素の幅が変動しても[margin:0px auto;]で左右中央寄せする方法」をご紹介します。

この記事の目次

【結論】要素の幅が変動しても[margin:0px auto;]で左右中央寄せする方法

幅が変動する要素を左右中央に寄せたい場合は、width属性に[max-content]という値を設定します。

具体的には、このような記述です。

.className {
	width:max-content;
	width:-ms-max-content;
	width:-moz-max-content;
	width:-webkit-max-content;
	width:-o-max-content;
	margin:0px auto;
}

こちらの記述でうまく左右中央に表示されない場合は[max-content]の部分を他の値に変えてみてください。

[max-content]は「その要素が取りうる幅の最大値」ですが、他にはこのような値です。

■[min-content]…逆に「その要素が取りうる幅の最小値」

■[available]…該当するブロックの幅からmarginやpadding、borderといった「幅を決定する値」を差し引いた値

■[fit-content]…まず[max-content]と[available]の小さい方を判別して、その値と[min-content]とを比較して大きい方の値

ちょっと[fit-content]が難しいですが、私は大まかに、

「包まれている要素の幅を超えず、逆に包んでいる要素がはみ出ない程度の値」

という解釈をしています。

ページの先頭へ戻る

[説明]主要ブラウザに対応させるための記述について

上記のCSSの記述には[width:-@@@@@@-content;]のような記述のものがあります。

「width属性にこんなに値を設定して大丈夫?最後の1種類だけしか効かないんじゃない!?」

というご意見もありそうですが、こちらは主要ブラウザに等しく対応させるための記述だとお考えください。

この記事を執筆している時点(2018年2月)で、[max-content]をはじめとしてこの記事でご紹介している値の設定は、一部のブラウザで非対応となっているので、[width:max-content;]以外の。

具体的には、以下の通りの記述で主要ブラウザに対応させる必要があります。

接頭辞[-ms-]

指定したい値の頭に[-ms-]を付け加える場合は、Internet ExplorerやMicrosoft Edgeのみに対応させることを目的としたものです。

コーディングをしていて、IEのみ、またはEdgeのみ、あるいはIEとEdgeのみ他のブラウザと挙動が異なるという場合があるのは、コーディングをされている皆さんも経験があることなのでは?

なので、それらのブラウザのみにもしっかりスタイル定義を反映させたい場合は、接頭辞[-ms-]を追加します。

接頭辞[-moz-]

[-moz-]の接頭辞はFirefoxのブラウザに対応させることを目的としたものです。

Firefoxのみにスタイル定義が効かない場合は、こちらを接頭辞に追加します。

接頭辞[-webkit-]

[-webkit-]を接頭辞にする場合は、「WebKit」を用いたブラウザへの対応といいまして、具体的にはGoogle Chrome、Safari、Opera(一部バージョンのみ)、iOSブラウザ(一部バージョンのみ)が該当します。

接頭辞[-o-]

[-o-]という接頭辞もあります。

最近はこれ無しでコーディングすることも個人的にありますが、こちらはOpera(一部バージョンのみ)となります。

WebKitをベースにしていない、特定の時点より前のバージョンのOperaということになるでしょうか。

ページの先頭へ戻る

コンテンツの幅を自由に設定して、左右中央への表示を頑張ってください(^-^)

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[【CSS3】要素の幅が変動しても[margin:0px auto;]で左右中央寄せする方法]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:【CSS3】要素の幅が変動しても[margin:0px auto;]で左右中央寄せする方法

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.