【CSS】背景画像の設定
photoshopで背景画像を作成したので、
HTMLで表示してみるソースです。
実践課題【CSS10】の下拵え的に。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>背景画像の練習3【CSS10】の準備</title> <style type="text/css"> #container { width: 670px; } #content{ background-color: #99FF66; float:right; width: 500px; } #side { background-image:url(css10/bg_img.gif); background-repeat: repeat-y; float: left; width: 160px; height: auto; margin-right: 10px; } ul { list-style-type:none; } </style> </head> <body> <div id="container"> <div id="content"> 本文ですよ。 </div> <div id="side"> <ul> <li>menu01</li> <li>menu02</li> </ul> </div> </div> </body> </html>
上記ソースの表示結果画像は『実習課題公開中 | おぼえがき』で公開中。