デザインで指定した場所に要素を配置するための方法のうち、左に寄せる・中央に寄せる・右に寄せるの横方向の配置方法について解説します！
text-alignで配置
まずはよく使うであろう「text-align」を使う方法です。
「text-align」で左右中央に配置する場合、基本的にブロック要素に使用します。インライン要素では、始端か終端にしか配置できないうえ、ブロック要素と同じ指定方法が使えないので注意が必要です。
配置の指定は、「left」「right」「center」の三つを適用することによって行われます。
インライン要素
<style>
span {
text-align: right;
}
div {
text-align: right;
}
</style>
<body>
<span>インライン要素</span>
<div>ブロック要素</div>
</body>
コード上では「span」も「div」も右寄せしていますが、インライン要素である「span」には適用されていません。このように基本的にはブロック要素に適用することが重要です。
ちなみにインライン要素の始端と終端に配置したい場合は、「start」か「end」を指定してください。
こちらもCHECK
-
-
【css】文字の位置を変更する方法８選！！【text-alignを用いた指定方法】
今回は、文字の位置を変更する「text-align」の使い方についてご紹介いたします。 目次 指定された表示範囲の開始位置にそろえる「start」 指定された表示範囲の終了位置にそろえる ...
続きを見る
floatで配置
floatでは配置がややこしくなるため、ある程度cssに慣れてから使うのが好ましいでしょう。
ブロック要素+ブロック要素
<style>
.right{
float:right;
}
</style>
<body>
<div class="right">ブロック要素右寄せ</span>
<div>ブロック要素指定なし</div>
</body>
インライン要素+ブロック要素
インライン要素右寄せ
<style>
span {
float: right;
}
</style>
<body>
<span>インライン要素右寄せ</span>
<div>ブロック要素指定なし</div>
</body>
「float」の右寄せをすると、下にあるブロック要素が上の要素の左側の空白地帯に入り込みます。このような形になるので、配置時には上記の点を考慮しながら配置しましょう。
こちらもCHECK
-
-
【css】『*』『#』『.』って何？セレクタ記号の意味７選！！
cssを学習し始めのころに様々な記号が出てきて疑問に思いませんか？ 今回はそんな記号について解説していきたいと思います。 目次 『*』の意味 『#』の意味 『.』(ドット)の意味 『,』（カンマ）の意 ...
続きを見る
marginを調節して配置
marginを使用すると「左から〇%、〇px右にずらす」というような指定が行えます。
<style>
.parcent {
margin-left: 60%;
}
.pixel {
margin-left: 500px;
}
</style>
<body>
<div class="parcent">パーセント指定</span>
<div class="pixel">ピクセル指定</div>
</body>
このように好きな位置に配置できます。レスポンシブデザインを行いたいときにはパーセント指定をしておくとスムーズにデザインができます。
まとめ
それぞれの指定にはメリット・デメリットが存在します。デザインの最終結果を考えながら適切な指定方法が求められます。また他の指定方法もまだまだありますので、いろいろ試しながらデザインをしてみるのも良いでしょう。
