ホーム(記事一覧)へ

aタグなどのインライン要素を右寄せにする方法

文章は通常左寄せになります。

でも「トップへ戻る」のようなaタグを作成し、右端に置いておきたい。

そんときに使える「aタグなどのインライン要素を右寄せにする方法」を説明します。

結論

aタグの外側をdivで囲み、そのdivにtext-align: rightを指定します。

例)トップへ戻る
<div style="text-align: right;">例)<a href="#">トップへ戻る</a></div>

以下で詳しく説明します。

そもそもインライン要素とブロックレベル要素とは

インライン要素

インライン要素は文章の一部にCSSを指定することを主な目的としています。

インライン要素の代表はaタグ、spanタグなどです。

例)これは赤いリンゴです。
例)これは<span style="color:red;background:#CCC;">赤い</span>リンゴです。

上記のように指定した範囲だけ色・背景が変わっています。

ブロックレベル要素

ブロックレベル要素はを文章全体あるいはその枠にCSSを指定することを主な目的としています。

ブロックレベル要素の代表はdivタグ、pタグ、h1タグなどです。

例)これは赤いリンゴです。
<div style="color:red;background:#CCC;">例)これは赤いリンゴです。</div>

要素内すべての文章に影響を与え、幅いっぱいの範囲を持ちます。

当サイトでも使っているとにかく安いサーバーについて紹介します。

逆の場合どうなるか

ブロックレベル要素をむりやり文章中に使用したらどうなるでしょうか。

例)これは
赤い
リンゴです。
例)これは<div style="color:red;background:#CCC;">赤い</div>リンゴです。

ブロックレベル要素は特別なCSSを使わない限り左右に要素を入れさせません。そのため1行にできません。

次にインライン要素で文章全体を囲うとどうなるでしょう。

例)これは赤いリンゴです。
<span style="color:red;background:#CCC;">例)これは赤いリンゴです。</span>

文章が全部赤字になっているのは共通ですが、背景色の範囲が文字の範囲と一致します。

インライン要素とブロックレベル要素の違いわかってきたでしょうか。

右寄せするにはブロックレベル要素にtext-align: rightを指定する

text-alignは左や右にインライン要素を寄せるCSSです。

右に寄せるには幅が必要です。
先に示したようにインライン要素は幅と文字の範囲が一致するため寄せようがありません。

そこでインライン要素であるaタグの外側をブロックレベル要素であるdivで囲み、このdivにtext-align: rightを指定するというわけです。

まとめ

aタグなどのインライン要素を右寄せにするにはaタグの外側をdivで囲み、そのdivにtext-align: rightを指定しましょう。

関連記事