HTML/CSSで右寄せの６つの実装方法例

2009/02/18 20:57Update
TAGS: HTML | CSS | 右寄せ | 左寄せ | float | align | text-align

HTML要素をページやコンテナー（DIVなど）の右に配置したい時があります。本文はその実装方法について学びます。

１、TABLEレイアウトによる右寄せ


TABLEによるレイアウトはあまり推奨されていませんが、初心者にとっては、一番簡単・直観的なものだと言えるかも知れません。
それと、TABLEレイアウトによる右揃えも簡単です。

こんな感じです。
<table width="100%" border="1px">
    <tr>
        <td width="90%">ボタンや文字など</td>
        <td align="right">右揃え要素はここに</td>
    </tr>
</table>

サンプル

メリット：簡単、直観
デメリット：推奨されていません（HTMLの内容とデザインは混ぜてしまい、分離されていないため）。

２、HTML要素のalign属性による右寄せ


tableやdiv、tr、tdなどの要素にalign属性があります。align属性では、要素内のデータの横方向の表示位置を指定します。
右寄せの場合、

align="right"

のように設定します。

例：
<div align="right">
    右寄せ文字・ボタンなど
</div>

サンプル

※align属性は、要素内のすべてのデータを同時に右寄せにすることができますが、同じ行内で左寄せ、右寄せにしたい場合、align属性だけではできません。


３、CSSのtext-align属性による右寄せ


HTML要素のalign属性のCSS実装版です。
例：
CSS定義：
div#right {
text-align: right;
}


HTMLコード：
<div id="right">
    右寄せ文字・ボタンなど
</div>


サンプル

４、CSSのfloat属性による右寄せ


CSS定義：
div#right {
    float: right;
}

.clearRight {
    clear:right;
}


HTMLコード：
<div id="container">
    <div id="right">
        右寄せ文字・ボタンなどの要素
    </div>
    <div>
        通常通り左寄せ文字・ボタンなどの要素
    </div>
    <p class="clearRight" />
</div>


サンプル

※１、CSSのfloat属性に適応された要素は「浮動」の状態になり、後に続く要素はその反対側に回り込みで表示されます。

※２、ここでは、先にid="right"のdiv要素をfloat:rightによる右寄せにさせましたが、float:leftでも可能です。
float:leftの場合、CSS及びHTML定義は次のようになります。
div#left {
    float: left;
}

div#right {
    text-align: right;
}

.clearLeft {
    clear:left;
}


<div id="container">
    <div id="left">
        通常通り左寄せ文字・ボタンなどの要素
    </div>
    <div id="right">
        右寄せ文字・ボタンなどの要素
    </div>
    <p class="clearLeft" />
</div>


サンプル

※２、float属性を解除するには、clear（left,right,both）による解除が必要です。
例：
　clear:left;  float:leftを解除します。

clearによる解除にしてしまうと、直近のfloat回り込みだけではなく、すべてのfloatが解除されてしまいます。そのため、表示が乱れてしまうので注意が必要です。

５、CSSのposition属性による右寄せ


例：
<div id="container">
    <div id="left">
        通常通り左寄せ文字・ボタンなどの要素
    </div>
    <div id="right">
        右寄せ文字・ボタンなどの要素
    </div>
</div>


CSS定義：
div#container {
    position:relative;
}

div#right {
    position:absolute;
    right:0;
    top:0;
    width:130px;
}


サンプル　

６、HTML要素のalign属性とCSSのmargin-top属性による右寄せ



HTMLコード：
<div id="container">
    <div id="left">
        通常通り左寄せ文字・ボタンなどの要素
    </div>
    <div align="right" id="right">
        右寄せ文字・ボタンなどの要素
    </div>
</div>


CSSコード：
div#left {
    height:20px;
}
div#right {
    margin-top:-20px;
}

サンプル

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

  • Relative Articles