HTML/CSS

【簡単です】HTML/CSSで要素を右寄せに固定する方法

2021年3月3日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2023年6月時点)。

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プロパティについてまとめました。

サクッとご確認いただければと思います。

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。

relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

参考:HTMLクイックリファレンス

終わりに

positionプロパティは要素を自由自在に扱うためには不可欠なプロパティになります。

displayプロパティと合わせてしっかり習得しておきましょう。

本日もお読み頂きありがとうございました。

それではまた。

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2023年6月時点)。

-HTML/CSS
-