aタグ,span(インライン要素)やinline-blockを右寄せにする方法

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

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

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

【結論】親要素にtext-align:right

インライン要素またはinline-block要素の外側をdivで囲み親要素を作り、そのdivにtext-align:rightを指定します。

インライン要素の場合

<div style="text-align: right;">例）<a href="#">インライン要素</a></div>

inline-blockの場合

<div style="text-align: right;"><input type="text" value="インラインブロック"></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>

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

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

inline-blockインラインブロックとは

インラインブロックはインライン要素とブロック要素の特徴のいいとこどりをした要素です。

CSSで「display:inline-block」を指定することでhtmlタグをインラインブロックにできます。

• インライン要素では指定できないmarginやpadding、widthを指定できる
• 左右にインライン要素が続く
• widthを指定しない場合内容に応じた幅になる

text-alignの使い方

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

左右に寄せるには幅が必要です。

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

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

まとめ

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