低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

ボックス要素の右下端にボタンを配置する

ボックス要素の右下にバナーやボタンなどを配置したい場合、paddingやmarginなどで間隔を空けるよりもよりよい方法があります。

HTML

1<div class="sampleBox">
2    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
3    <a href="#">
4        <img src="./banner.gif" alt="お問い合わせはこちら" />
5    </a>
6</div>

CSS

01.sampleBox {
02    border:1px solid #cccccc;
03    height: 200px;
04    position: relative;
05}
06.sampleBox img {
07    position: absolute;
08    right: 0;
09    bottom: 0;
10}

サンプルページ

position: absolute; は、基本的にページの最も端から数えて要素を配置するスタイルですが、親要素にposition: relative; を指定することで、その要素が基準点となります。

今回の例ですと、親要素であるsampleBoxにposition: relativeが指定されているため、sampleBoxの端がその基準点となります。また、そのポジションの指定にright: 0; とbottom: 0; が指定されているので、「右端から数えて0px」と「下から数えて0px」の位置に要素を配置する、という解釈になります。

要素内の文字数や画像のサイズが一定でない場合にバナーなどを配置する場合、このテクニックを使ってみてはいかがでしょうか。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ