CSSで要素を右寄せする方法!画像やボタンの右寄せを徹底解説

2022.11.13
CSSで要素を右寄せする方法まとめ

「CSSでHTML要素を右寄せしたい」
「右寄せしようとしてもうまくいかない」

上記のような疑問を抱えている方もいるのではないでしょうか。

右寄せできるCSSプロパティは複数ありますが、自分が右寄せしたい要素はどのCSSを使えばいいのか迷いますよね。

今回WEBCAMP MEDIAでは、CSSでさまざまな要素を右寄せする方法について解説します。

  • ボタンと画像の右寄せ方法
  • marginを使った右寄せ方法
  • flexboxを使った右寄せ方法
  • 右寄せできないときの対処法

以上の項目について解説します。

この記事を読むと、CSSを使ってインライン要素とブロック要素を右寄せする方法について理解できるのでぜひチェックしてみてくださいね!

CSSのtext-alignでボタンや画像を右寄せする

CSSのtext-alignは、ブロック要素内に指定されたインライン要素を水平方向へ配置できるプロパティです。

text-alignにrightという値を指定することで、ブロック要素内のインライン要素を右寄せできます。

HTMLbuttonタグやimg、aタグは全てインライン要素なので、ブロック要素で囲って「text-align:center;」を指定すると右寄せできるのです。

text-alignを使ってボタンや画像を右寄せする方法について、サンプルコードを用いて詳しく解説します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
  .btn, .img, p{
    text-align: right;
  }
  </style>
</head>
<body>
  <div class="btn">
    <button>ボタン</button>
  </div>
  <div class="img">
    <img src="pic/icon.png">
  </div>
  <p>text-alignテスト</p>
</body>
</html>

インライン要素のbuttonタグとimgタグをブロック要素のdivタグで囲い「text-align:right;」を指定して右寄せしています。

また、pタグに「text-align:right;」を指定すると、タグ内の文字列のみ右寄せされます。

実行結果

実行結果

上記のように、aタグやimgタグは要素全体が右寄せされますが、ブロック要素であるpタグの場合は指定された文字のみ右寄せされています。

CSSのmarginで要素全体を右寄せする

marginプロパティの値に「0 0 0 auto」を指定することでブロック要素全体を右寄せできます。

marginの値は左から順に、上、右、下、左の余白を指定するので、上下と右に0を入力して左だけ自動算出(auto)を入力すると右に寄せることが可能です。

また、marginを指定するブロック要素は、CSSのwidthとheightで横幅と高さを必ず設定しましょう。

要素に高さと横幅がない場合、右寄せするための余白がないのでうまく反映されません。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
  .container{
    margin: 0 0 0 auto;
    height: 100px;
    width:  100px;
    background-color: blue;
  }
  </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

実行結果

実行結果

上記画像のように、marginによって要素が右に寄せられているのが分かります。

CSSのflexboxどんな要素も右寄せできる

CSSのflexboxを使えば、インライン要素とブロック要素のどちらも右寄せできます。

flexboxで右寄せするには下記2つのCSSを使います。

  • display:flex;・・・要素を並列にするflexboxを利用するためのスタイル
  • justify-content: flex-end;・・・flexboxの終了地点から要素を配置する

justify-contentは、要素の位置を水平方向に移動できるプロパティです。

justify-contentの値であるflex-endは、並列になった要素を右端の終了地点から配置する処理なので右寄せができるという内容です。

flexboxでインライン要素とブロック要素の2種類を右寄せする方法をサンプルコードで解説します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
  .test, a{
    display: flex;
    justify-content: flex-end;
  }
  </style>
</head>
<body>
  <p class="test">flexboxのテスト</p>
  <a href="#">aタグのテスト</a>
</body>
</html>

ブロック要素のpタグと、インライン要素のaタグに同じCSSを指定して右寄せしています。

実行結果

実行結果

CSSで右寄せできないときにチェックすべきこと

CSSで右寄せできないときは、利用しているCSSプロパティの特徴を再度チェックするのがおすすめです。

  • text-alignはブロック要素に指定し、内部のインライン要素のみ右寄せできる
  • marginはブロック要素のみ右寄せできる
  • flexboxで右寄せできないとき:スペルミスやdisplay:flex;の入力忘れがないかチェック

上記の内容をチェックした上で試してもうまくいかないときは、検証ツールで内容をチェックすると右寄せできない原因を見つけられます。

HTMLとCSSの内容を検証ツールでチェックする方法!検証ポイントも解説

まとめ

今回は、CSSで要素を右寄せする方法について解説しましたが、いかがでしたでしょうか?

HTML要素は下記のポイントを押さえることで簡単に右寄せできます。

  • インライン要素を右寄せしたい:親要素にブロック要素を指定して「text-align:center;」を入力
  • ブロック要素を右寄せしたい:widthとheightで横幅と高さを指定して「margin:0 0 0 auto;」を入力

インライン要素とブロック要素どちらも右寄せしたいときは、flexboxを利用することをおすすめします。

ぜひ参考にしてみてくださいね!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5