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

2013/11/29 00:25更新
TAGS: | HTML|CSS|右寄せ|左寄せ|float|align|text-align

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

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


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

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

サンプル

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

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


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

align="right"

のように設定します。

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

サンプル

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


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


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


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


サンプル

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


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

.clearRight {
    clear:right;
}


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


サンプル

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

※2、ここでは、先に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>


サンプル

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

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

5、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;
}


サンプル 

6、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


コメント

記事への評価

USER LOGIN FIRST
メールアドレス:
パスワード: