WebページをCSSで装飾したい場合に右寄せ・左寄せ・中央寄せをする事ができます。そのブロックの要素まるごとだけでなく、要素内の文字や画像もCSSで右寄せ・左寄せ・中央寄せをすることができますので、そのCSSの内容の紹介をしていきます。
CSSで要素の位置を調整したいときは右寄せ・左寄せ・中央寄せで大体の位置を指定します。右寄せ・左寄せ・中央寄せしたい要素によって利用するCSSも異なりますので、右寄せ/左寄せする場合と中央寄せする場合それぞれの方法を紹介します。
利用するタグは下記と仮定して説明していきます。
| <div> <p class="text">右寄せなどをしたい文字</p> <p class="img"><img src="画像URL" alt="右寄せなどをしたい画像"></p> </div> |
まずは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で中央寄せする場合の手順の説明に移ります。
要素まるごと中央寄せする場合も「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サイトの作成に役立ててみてください。
1 / 2
続きを読む