CSSで要素を右側に固定したいけどやり方が分からない。marginの使い方はあってるのかな。
あー誰か教えてほしいよー！
今回は上記のような疑問やお悩みに役立つ内容となっております。
WEB制作時に要素を右端に固定させているサイトってありますよね。
自身も初学者の頃つまずいたポイントだったので、対処法を紹介したいと思います。
CSSの要素の配置もっと上手くなりたいな
という方は3分で読める記事となっていますので是非読んでみてください。
それでは早速行ってみましょう！
cssで要素を右寄せで固定するにはposition:fixedプロパティを使いましょう
結論：positionプロパティを使えば実装可能です。
See the Pen rNWdRGE by shino (@rytym0720) on CodePen.
上記はbox1という青いdivを右端に固定しています。
以下がbox1のcssです。
.box1{
width:100px;
height:100px;
position:fixed;
top:30px;
right:0px;
background-color:blue;
color:white;
}ここで注目して頂きたいのが、positionプロパティです。
positionプロパティを【fixed】にし、rightを0にすることで右端に固定する事が出来ます。
ちなみにこれをleft:0にすると左側に固定する事が可能です。
topの30pxというのはブラウザの上部から30px離すという意味になりますね。
固定せずに右端に配置したい場合はposition:absoluteを使用しよう
See the Pen qBqYoJb by shino (@rytym0720) on CodePen.
固定せずに単純に右端に配置したい場合は、positionをabsoluteにしてあげればOKです。
positionはabsoluteを使うことで、ブラウザの左上を起点にした上で、要素の配置を決める事が出来ますが
セレクタ{
position:absoulte;
top:50px;
right:0px;
}上記のようにrightを0にする事で右端に配置する事が出来ます。
ただし、親要素にposition:relative;と指定して、子要素にabsoluteを指定するとrelativeに対しての配置になりますのでご注意ください。
positionプロパティの値について
以下にpositionプロパティについてまとめました。
サクッとご確認いただければと思います。
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
参考:HTMLクイックリファレンス
終わりに
positionプロパティは要素を自由自在に扱うためには不可欠なプロパティになります。
displayプロパティと合わせてしっかり習得しておきましょう。
本日もお読み頂きありがとうございました。
それではまた。