2021年06月09日更新
CSSで要素を右寄せ・左寄せ・中央寄せする方法を解説！
WebページをCSSで装飾したい場合に右寄せ・左寄せ・中央寄せをする事ができます。そのブロックの要素まるごとだけでなく、要素内の文字や画像もCSSで右寄せ・左寄せ・中央寄せをすることができますので、そのCSSの内容の紹介をしていきます。
CSSで要素を右寄せ/左寄せ/中央寄せする方法
CSSで要素の位置を調整したいときは右寄せ・左寄せ・中央寄せで大体の位置を指定します。右寄せ・左寄せ・中央寄せしたい要素によって利用するCSSも異なりますので、右寄せ/左寄せする場合と中央寄せする場合それぞれの方法を紹介します。
利用するタグは下記と仮定して説明していきます。
| <div> <p class="text">右寄せなどをしたい文字</p> <p class="img"><img src="画像URL" alt="右寄せなどをしたい画像"></p> </div> |
CSSで要素を左右寄せする手順
まずはCSSで右寄せ・左寄せする場合のやり方を説明します。
要素丸ごと
要素丸ごと寄せる場合は「margin」を利用します。指定なしだと左寄せになりますが、あえてCSSにすると下記のとおりです。
| div{ width: 500px; margin: 0 auto 0 0;/*左寄せ*/ padding: 0; background-color: lightgray; } p{ width: 350px; margin: 0 auto 0 0;/*左寄せ*/ padding: 0; background-color: yellow; } |
右寄せする場合は下記のCSSの形になります。
| div{ width: 500px; margin: 0 0 0 auto;/*右寄せ*/ padding: 0; background-color: lightgray; } p{ width: 350px; margin: 0 0 0 auto;/*右寄せ*/ padding: 0; background-color: yellow; } |
要素ブロック内の文字や画像
要素ブロック内の文字や画像の左寄せには「text-align」を利用します。
| .text{ text-align: left; } .img{ text-align: left; } |
文字や画像の右寄せの場合、CSSは次のようになります。
| .text{ text-align: right; } .img{ text-align: right; } |
CSSで要素を中央寄せする手順
CSSで中央寄せする場合の手順の説明に移ります。
要素丸ごと
要素まるごと中央寄せする場合も「margin」を利用します。
| div{ width: 500px; margin: auto;/*中央寄せ*/ padding: 0; background-color: lightgray; } p{ width: 350px; margin: auto;/*中央寄せ*/ padding: 0; background-color: yellow; } |
要素ブロック内の文字や画像
要素ブロック内の文字や画像を中央寄せする場合も「text-align」を利用します。CSSは次のとおりです。
| .text{ text-align: center; } .img{ text-align: center; } |
右寄せなどを組み合わせた場合の例
前述した右寄せなどのCSSを組み合わせた場合の一例も紹介しておきます。
| div{ width: 500px; margin: 0 0 0 auto;/*右寄せ*/ padding: 0; background-color: lightgray; } p{ width: 350px; margin: auto;/*中央寄せ*/ padding: 0; background-color: yellow; } .text{ text-align: right;/*右寄せ*/ } .img{ text-align: left;/*左寄せ*/ } |
最後に
CSSでの右寄せは、要素のまとまりであればmargin、要素内の文字や画像であればtext-alignを利用します。組み合わせながらWebサイトの作成に役立ててみてください。
【初心者向け】はてなブログのおしゃれな設定方法を解説！はてなブログはおしゃれなデザインを設定することができるので紹介していきます。はてなブログでは...
【初心者向け】「はてなブログ」の目次デザインのカスタマイズ方法！はてなブログの目次をカスタマイズしたいけれど初心者でわからない人も多いかと思います。この記事...
はてなブログのデザインのおすすめテンプレート(デザインテーマ)は？選び方も解説！これからはてなブログを始めようと思っている方やお洒落なデザインにしたいけれど、うまく行かない...
