HTML のボタンを右揃えにする

ボタンを親領域の右端に配置するには、コンテナ内にボタンを置き、そのコンテナのCSSプロパティtext-alignをrightに設定します。配置はコンテナの利用可能な幅を基準にするため、コンテナはボタンを置きたい領域全体に広げる必要があります。この記事では代替方法としてfloat: rightも紹介し、レイアウト上の違いが重要になる場面を説明します。

ボタンの右揃えに使うプロパティ

CSSでは、コンテナ内のインラインコンテンツをtext-alignで揃えたり、要素をfloatで回り込ませたりできます。ページ要素の配置について詳しくは、CSSで配置を調整するさまざまなプロパティを参照してください。

text-alignプロパティでHTMLのボタンを右揃えにする

ボタンを<div>の中に置き、その<div>にtext-align: rightを適用します。たとえば、マークアップ全体は<div class="button-row" style="text-align: right;"><button type="button">Save</button></div>のようになります。ボタンは通常のインラインコンテンツの流れに残り、コンテナがその右側に配置します。スタイルシートでは、同じルールを.button-row { text-align: right; }と記述し、class="button-row"を使って<div>に適用できます。

この自己完結型のJavaScriptは、コンテナを使った方法を含むHTMLページのソースを出力します。出力されたマークアップをHTMLファイルとして保存し、ブラウザーで開くと、ページの右側にボタンが表示されます。変更されていないコード例のボタンラベルはSaveで、英語のままです。

const page = `<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>`;

console.log(page);

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>

ボタンが揃うのはコンテナ内であり、自動的にブラウザーウィンドウの端に揃うわけではありません。コンテナには、配置したい領域の幅を指定してください。幅いっぱいに広がるブロックコンテナなら、そのブロックの右端にボタンが揃います。これらのHTMLとCSSはソース例であり、見た目を確認するにはブラウザーで表示する必要があります。

floatプロパティでHTMLのボタンを右揃えにする

ボタン自体を右に回り込ませるには、<button type="button" style="float: right;">Save</button>を使います。または、スタイルシートに.action-button { float: right; }というルールを記述し、ボタンにclass="action-button"を指定します。floatを指定すると、ボタンは親ブロックの右側へ移動し、周囲のインラインコンテンツがその周りを流れるようになります。後続のレイアウトを浮動要素の下から始めたい場合は、回り込みを解除するか、代わりにフレックスボックスなどのレイアウト方法を使います。

コンテナを使う方法と同様に、floatによる配置も親ブロックの幅を基準にします。それだけでボタンがブラウザーウィンドウの右端に配置されるわけではありません。これらの例はブラウザーでのCSSの動作を示すもので、設定済みの実行環境では実行できません。

ボタンの配置に適したCSSプロパティ

行やセクションの右側にボタンを1つ置く場合は、コンテナにtext-align: rightを指定する方法がおすすめです。ボタンは通常のコンテンツの流れに残り、インラインコンテンツの位置をコンテナが決めるため、配置を担う要素が明確です。テキストをボタンの周りに回り込ませたい場合や、周囲のレイアウトで浮動配置が必要な場合はfloat: rightを使います。その際は、横に流れるコンテンツを考慮し、後続のコンテンツを下から始める必要があれば回り込みを解除してください。

どちらの方法でも、対象となるページ領域が自動で選ばれるわけではありません。ボタンが意図より左や右に見える場合は、コンテナの幅と配置を確認してください。コントロールが複数ある場合や、より複雑な間隔調整が必要な場合は、justify-content: flex-endを使うフレックスコンテナも選択肢です。ここで紹介した2つの方法は、基本的な右揃えに対応します。

まとめ

ボタンをシンプルに右揃えにするには、適切な幅のコンテナにtext-align: rightを指定します。float: rightは、特有のテキスト回り込みが必要な場合にボタンへ適用し、周囲のコンテンツの流れを調整してください。どちらの場合も、見た目上の右端は親ブロックによって決まります。