ブラウザの中央に表示
positionを使ったレイアウト 例1
- ブラウザの天地左右の中央に表示されるよう記述しなさい
薬玉文様(くすだまもんよう) 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。 ©2015 Historical Japan
<body> <div id="container"> <h1>薬玉文様<span>(くすだまもんよう)</span></h1> <p> 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。 </p> <p class="footer"><small>©2015 Historical Japan</small></p> </div><!-- /#container --> </body>
@charset "UTF-8"; /* reset */ body, div, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } /* body */ body { background: #000 url(../img/bg.gif) repeat ; font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; font-weight: bold; font-size: 15px; line-height: 1.6; } /* layout */ #container { width: 620px; height:440px; border: 15px solid #000; background: #000 url(../img/image.jpg) no-repeat right bottom; position:absolute; left: 50%; top: 50%; margin: -220px 0 0 -310px; } h1 { width: 280px; color: #E4D669; font-size: 20px; margin: 0 0 20px 16px; padding-top: 15px; } h1 span { font-size: 16px; } p { width: 280px; color: #FFF; margin-left: 16px; line-height: 1.8; } p.footer { font-size: 14px; color: #999; margin-top: 80px; text-align: right; }
positionを使ったレイアウト 例2
- CSSを記述し以下のカンプのようにしなさい(ブラウザの中央揃えに表示する)
Patisserie camellia Information Menu Access Mail プリン ショートケーキ ワッフル コーヒー キャンドル イチゴプリン イチゴスムージー ヨーグルト ライト コーヒー キャンペーン情報
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Patisserie camellia</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1><img src="img/logo.gif" alt="Patisserie camellia"></h1> <ul> <li><a href="#"><img src="img/m_info.gif" alt="Information"></a></li> <li><a href="#"><img src="img/m_menu.gif" alt="Menu"></a></li> <li><a href="#"><img src="img/m_access.gif" alt="Access"></a></li> <li><a href="#"><img src="img/m_mail.gif" alt="Mail"></a></li> </ul> <div id="imageph"> <img src="img/photo01.jpg" alt="プリン" id="ph01"> <img src="img/photo02.jpg" alt="ショートケーキ" id="ph02"> <img src="img/photo03.jpg" alt="ワッフル" id="ph03"> <img src="img/photo04.jpg" alt="コーヒー" id="ph04"> <img src="img/photo05.jpg" alt="キャンドル" id="ph05"> <img src="img/photo06.jpg" alt="イチゴプリン" id="ph06"> <img src="img/photo07.jpg" alt="イチゴスムージー" id="ph07"> <img src="img/photo08.jpg" alt="ヨーグルト" id="ph08"> <img src="img/photo09.jpg" alt="ライト" id="ph09"> <img src="img/photo10.jpg" alt="コーヒー" id="ph10"> </div> </div> <div id="campaign"><a href="#"><img src="img/campaign.gif" alt="キャンペーン情報" border="0"></a></div> </body> </html>
@charset "UTF-8"; body, div, h1, ul, li { margin: 0; padding: 0; } body { background: #5B3E1C; } img { border: none; vertical-align: bottom; } a { text-decoration: none; } #container { background: #FFF url(../img/shadow.gif) repeat-x left bottom; height: 410px; width: 800px; position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -205px; } #container h1 { position: absolute; left: 30px; top: 240px; } #container ul { position: absolute; left: 30px; top: 25px; } #container li { height: 30px; } #container li img { height: 25px; width: 94px; } #imageph img { position: absolute; height: 80px; width: 80px; } img#ph01 { left: 640px; top: 80px; height: 160px; width: 160px; } img#ph02 { left: 400px; top: 240px; height: 160px; width: 160px; } img#ph03 { left: 320px; top: 0px; height: 160px; width: 160px; } img#ph04 { left: 320px; top: 160px; } img#ph05 { left: 480px; top: 0px; } img#ph06 { left: 480px; top: 160px; } img#ph07 { left: 560px; top: 80px; } img#ph08 { left: 560px; top: 240px; } img#ph09 { left: 640px; top: 320px; } img#ph10 { left: 720px; top: 240px; } #campaign { width: 170px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: 245px; margin-top: -228px; } #campaign img { width: 170px; height: 100px; }