backgroundを複数重ねる方法と使いどころ。ケース①
2016.08.09
カテゴリ：WEB制作
タグ：
IE6〜8のサポートも終了し古いブラウザへの対応が無くなって来てCSS3も頻繁に使えるようになりホームページ制作が楽になってきました。今日は以外と使われてないけど知ってると便利な背景を複数重ねる方法を使って一方方向に可変のボックス作成方法を紹介します。
1.デモを見る
下記から見ることが出来ます。2.仕様について
デモのような枠を作りたいときですが、四隅の短い線はCSSで実装出来ません。厳密に言うとdivとかspanとかを使えば出来ますが、線のためだけにHTMLがごちゃごちゃしてしまいます。
そこで下記の画像の右側の3パーツを重ねて使います。
パーツの階層について
backgroundの一番下に真ん中の上下にラインが入った画像を使ってその上のレイヤーに左右の短い線が入ったパーツを配置します。
3.コードについて
下記がコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="demo-wrap" class="cf"> <div id="rsp-box" class="clearfix"> <h4>ボックスのタイトル</h4> <div id="text-area"> <dl> <dt>タイトル</dt> <dd>ここにテキストが入ります。ここにテキストが入ります。</dd> </dl> <dl> <dt>タイトル</dt> <dd>ここにテキストが入ります。</dd> </dl> <dl> <dt>タイトル</dt> <dd>ここにテキストが入ります。</dd> </dl> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
#demo-wrap{ max-width:990px; margin: 0 auto; } #rsp-box{ margin: 0 auto; padding: 0 3% 0; } #rsp-box h4{ margin: 20px auto; color:#ED6C00; text-align:center; } #text-area { max-width:500px; height:200px; background:url(画像のURL),url(画像のURL),url(画像のURL); background-repeat: no-repeat, no-repeat, repeat; background-position:left,right,right; margin: 0 auto; padding:20px 0 20px 0; text-align: left; font-size: 13px; line-height: 25px; color: #6E0000; } #text-area dl{ margin-bottom:10px; } #text-area dt { float: left; clear:both; width: 20%; margin-left:5%; } #text-area dd { margin:0 5% 0 5%; overflow: hidden; } |
背景の重ね方について
background:urlの部分でカンマ区切りに画像のURLを追加していくことで階層を重ねる事が出来ます。左に行くにつれて上の階層になり右に行くにつれて下の階層になります。
repeat、positionについても同様にカンマ区切りで個別に指定します。
4.まとめ
HTMLにボックス等を複数作らずに背景を複数設置出来るので、コードもすっきりしてくると思います。その他にもいろいろと使い勝手がいいのでオススメです。
