ブラウザの中央に表示

positionを使ったレイアウト（１）

  • ブラウザの天地左右の中央に表示されるよう記述しなさい


薬玉文様（くすだまもんよう）

薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。

©2014 Historical Japan
<body>
<div id="container">
<h1>薬玉文様<span>（くすだまもんよう）</span></h1>
<p>
薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。
</p>
<p class="footer"><small>&copy;2014 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",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    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を使ったレイアウト（２）

  • 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;
}