css 画像 中央

デザイン五輪書

図解で分かりやすい!CSSで画像を中央寄せする方法

読了までの目安時間:約 11分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

図解で分かりやすい!CSSで画像を中央寄せする方法

CSSで画像を中央寄せする際に必要な概念

急がば回れ

今回は、CSSを使って画像を中央寄せ表示する方法をご紹介します。
その際、ブロック要素インライン要素と言う概念を理解しておかないと、手法がごっちゃになってしまいます。
ですから、最初にブロック要素とインライン要素について簡単に説明します。

既にブロック要素とインライン要素について理解している方は読み飛ばしても構いませんが、急がば回れです。

急がば回れ

▲もくじへ戻る

ブロック要素とインライン要素

ブロック要素として代表的なタグは、<h1>タグ等の見出しタグ、段落を表す<p>タグ、タグの固まりを表す<div>等があります。
通常、ブロック要素の前後には改行が入り、ブラウザの画面や親要素の横幅に合わせて、ブロック要素は表示されます。

ブロック要素

一方、インライン要素として代表的なタグは、<a>タグ、<img>タグ、<span>タグ等があります。
通常、インライン要素の前後には改行が入らず、複数のインライン要素を記述した際には、同じ行内に連なって表示されます。
そして、基本的に、インライン要素はブロック要素内に記述されます。

インライン要素

▲もくじへ戻る

画像を中央寄せにするCSS

text-alignプロパティ

画像を中央寄せで表示する際、通常はtext-alignプロパティを使用します。

text-alignプロパティとは、ブロック要素内の行揃えを行う際に使用するプロパティの事です。
text-alignプロパティにおいて、中央揃えとして使用出来る値は「center」です。

p{
	text-align:center;
}

画像を中央揃え

▲もくじへ戻る

marginプロパティ

text-alignプロパティを中央揃えにする事で上手く行けば、それが最も手っ取り早い訳ですが、ブロック要素の横幅がwidthプロパティで指定されていた場合、この方法では上手く行きません。

p{
	text-align:center;
	width:300px;
}

中央揃えが中央寄せにならないケース

図を見てみると分かりやすいと思いますが、画像が中央揃えになっているのは、あくまでもブロック要素内においてです。
ですから、ブロック要素の中央の位置が画面の中央の位置と一致しない場合、text-alignで中央揃えを行ったとしても、それは中央寄せにはならない訳です。

画面の中央位置とのズレ

このような場面においては、ブロック要素の左右の外側余白を自動に設定する事で、結果的に、中央揃えが中央寄せと一致するように修正する事が出来ます。

p{
	text-align:center;
	width:300px;
	margin-left:auto;
	margin-right:auto;
}

ブロック要素の左右余白を同じにする

▲もくじへ戻る

displayプロパティ

個人的には、少々、荒技のような印象を持っているのですが、画像自体をブロック要素に変換して、左右の外側余白を自動に指定する事で、結果的に、画像を中央寄せ表示すると言った方法もあります。

img{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

画像自体をブロック要素に変換する

▲もくじへ戻る

画像が中央寄せにならない!?

使用テンプレートによる影響を解除する

上記方法で間違い無く画像は中央寄せになるハズですが、時には、思い通りの結果が得られない事もあります。

悔しい~!

そのような時は、あなたが使用中のテンプレートの設定を疑いましょう。
テンプレートのCSSを見て行くと、実は、該当場所に回り込みの設定表示位置の設定がなされていたと言う事も結構あります。
これ等の設定がなされていた場合、上記方法では、きちんとした結果を得る事が出来ません。

そこで、思うような結果が得られなかった場合は、回り込みや表示位置の設定をリセットしてみましょう。
これで思った結果が得られればラッキーですし、変化が無ければ、書き加えた記述を削除すれば良いだけですから。

回り込みの設定を解除する場合は、floatプロパティの値を「none」と指定します。

p{
	float:none;
}

また、表示位置の設定を解除する場合は、positionプロパティの値を「static」と指定します。

p{
	position:static;
}

▲もくじへ戻る

CSSの特異性を意識する

CSSは読み込み順番や特異性(詳細度)によって優先度が決まります。

読み込み順番で言えば、先に指定した記述は、後から指定した記述により上書きされます。
結果、後の方に指定した記述が優先されます。
要するに、テンプレートに手を加える場合は、CSSの最後の方に記述すれば、思ったような結果を得やすいと言う事になります。

ややこしいのが、テンプレートで指定されているセレクタの特異性が高い場合、あなたが新たに記述を書き加えても、適用されない事があります。
その場合、テンプレートで指定されているセレクタよりも、特異性が勝るような記述方法に書き換える必要があります。

例えば、CSSに以下のような記述を書き加えたとします。

p{
	text-align:center;
}

ですが、テンプレートに以下のようなCSSの記述があった場合、思ったような結果は得られません。

div#header p.right{
	text-align:right;
}

この場合、テンプレートのセレクタの方が特異性が高い為、結果的に、段落は右揃えで表示されてしまいます。
そこで、こちらはテンプレートに特異性で勝るセレクタの記述の仕方をしなければなりません。

body header div#header p.right{
	text-align:center;
}

あまり良くないテンプレートの場合、特異性の非常に高い記述方法でCSSを指定している事があります。
そのようなテンプレートで、思うようなCSSの指定を行う事は非常に困難です。

CSSの指定がことごとく上手く行かない場合は、テンプレートのCSSファイルのセレクタ部分を確認してみましょう。
・・・流石に無いとは思いますが、もし、body部分からセレクタの指定を行っているようなテンプレートだった場合は、テンプレートの変更をお勧めします。

▲もくじへ戻る

最終手段!

あまりお勧めはしませんが、どうしても画像が中央寄せにならず、その原因も突き止められない場合は、強行手段に出る事も可能です。

強行手段

その強行手段とは、positionプロパティを使用する方法です。
positionプロパティの値を「relative」に指定すれば、その部分の位置を指定分だけ移動する事が出来ます。

例えば、画像に対してpositionプロパティの値を「relative」に指定し、更に、leftプロパティの値を「20px」に指定すると、画像を20px分だけ右方向に移動させる事が出来ます。

positionプロパティで画像を移動

更に、leftプロパティの値を%単位で指定する事も出来ます。
レスポンシブデザインのサイトの場合は、%で指定しましょう。

leftプロパティの数値は画像サイズにもよるので、ケースバイケースです。
中央位置に画像が来るように、目分量で決めて下さい。

img{
	position: relative;
	left: 20%;
}

この方法は、どうしようもない時に、最終手段で用いるものです。
正確な中央位置に画像が表示される訳ではありませんし、PCとスマートフォンで表示確認を行った場合、少なからず、位置にズレが生じます。
そこを了承した上で、使用して下さい。

▲もくじへ戻る

まとめ

ご紹介した順番で試してみる

今回は、CSSで画像を中央寄せにする方法をご紹介しました。

おさらいですが、画像を中央寄せにする場合、ブロック要素インライン要素について理解しておく必要があります。
そして、画像を中央寄せにする方法としては、text-alignプロパティmarginプロパティdisplayプロパティを使用する方法をご紹介しました。

画像が中央寄せにならない原因として、テンプレートの影響をご紹介しました。
回り込みや表示位置の設定解除。
そして、CSSの特異性についてもご紹介しました。

更に、最終手段として、positionプロパティを使用する方法をご紹介しました。

色々とご紹介しましたが、基本的には、text-alignプロパティで対処出来ると思います。
それでも無理だった場合は、ご紹介した順番でCSSを書き換えてみて下さい。

あなたの思うようにサイトがデザイン出来ますよう、応援しています。
頑張って下さい。

最後までご覧頂き、ありがとうございました。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :   

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る