検索の仕方が悪いのかもしれないけれど、あんまりお目にかからないので、この機会に取り上げてみます。何も見出しである必要は全くないのだけれど、見出し部分で使用する機会が多いかと思うので、あえて見出しとしました。

HTML タグ

あくまでサンプルだけれども、以下のようなタグがある場合に、「見出し」は左寄せに、「リンク」は右寄せにすることを考えてみます。別に h1 である必要はないので、p タグでも span タグでもなんでもよく、便宜上 class 名を指定していますが、必要でなければ指定する必要はありません。

<h1 class="headline1">見出し<a class="rSidePosition" href="#">リンク</a></h1>

CSS

CSS で、以下のように指定することで「リンク」の右寄せが実現できます。見出しに対して 1 つ、a 要素に対して 4 つの、合計 5 つと覚えておくこと。

h1.headline {
    position: relative;
    height: 100%;
}

a.rSidePosition {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
}

結果は以下のような感じ。

簡単な解説

position に absolute を指定すると、通常はブラウザの左上を基準に top と right で指定した場所に表示されることになりますが、親要素の position に relative を指定することで、その要素の左上を基準にさせることができるので、right を 0 にすることで右寄せが実現されます。

また、上記の CSS では h1 にposition: relative; を指定すると同時に height: 100%; を指定しています。これは Windows IE7 への対策で、見出しが複数行にわたる場合に、一行分しか高さが確保されないことへの回避策です。

ささいなことだけれど注意が必要なのは、親要素に padding を指定する場合。親要素のpadding-top の値と a 要素に指定する top の値を合わせ、padding-right に指定する値を right に指定することで余白をとります。

サンプルのダウンロード

以下のリンクからサンプルをダウンロードできます。各ファイルの格納についてはおれ基準になっていますがご了承ください。

サンプルのダウンロードはこちら