CSSレイアウト - 解答例

文書構造の構築

  • レイアウトのための、id名・class名を付与する
  • 画像挿入



《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>うちのにゃんこ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">

<div id="header">
<h1><span>★</span>うちのにゃんこ<span>★</span></h1>
<p id="lead">我が家のアイドル、にゃんこ達を紹介します！</p>
<ul>
<li><a href="#content">我が家のにゃんこ紹介</a></li>
<li><a href="#profile">飼い主紹介</a></li>
<li><a href="#entry">猫写真募集</a></li>
</ul>
</div><!-- /#header -->

<div id="content">
<h2>我が家のにゃんこ紹介</h2>

<div id="subaru" class="block">
<h3>●すばる<span class="cat-type male">（白キジトラ・オス）</span></h3>
<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。</p>
<p><img src="img/subaru.jpg" alt="すばる" class="ph"></p>
<dl class="data">
<dt>特徴：</dt>
<dd>大きな目と耳。まがったしっぽ。</dd>
<dt>性格：</dt>
<dd>マイペース。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#subaru -->

<div id="gureko" class="block">
<h3>●ぐれ子<span class="cat-type female">（灰色毛皮・メス）</span></h3>
<p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br>
しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p>
<p><img src="img/gureko.jpg" alt="ぐれ子" class="ph"></p>
<dl class="data">
<dt>特徴：</dt>
<dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd>
<dt>性格：</dt>
<dd>甘え上手。腹黒。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#gureko -->

<div id="nezuko" class="block">
<h3>●ねず子<span class="cat-type female">（白茶トラ・メス）</span></h3>
<p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br>
見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p>
<p><img src="img/nezuko.jpg" alt="ねず子" class="ph"></p>
<dl class="data">
<dt>特徴：</dt>
<dd>片目。小顔。</dd>
<dt>性格：</dt>
<dd>プライド高い。人間に対しては女王様。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#nezuko -->

</div><!-- /#content -->

<div id="profile">
<h2>飼い主紹介</h2>
<dl>
<dt>H.N. ：</dt>
<dd>roka404</dd>
<dt>仕事 ：</dt>
<dd>フリーランスでWeb関係のお仕事してます</dd>
<dt>mail ：</dt>
<dd>info@hogehoge.com</dd>
<dt>Web ：</dt>
<dd>http://www.hogehoge.com/blog/</dd>
</dl>
</div><!-- /#profile -->

<div id="entry">
<h2>猫写真募集</h2>
<p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br>
10にゃんこ集まったら紹介ページを開設します！</p>
<p class="apply"><a href="#">応募はこちら→</a></p>
</div><!-- /#entry -->

<div id="footer">
<p><small>Copyright &#169; UCHI NO NYAN'S All Rights Reserved.</small></p>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>


《style.css》

@charset "UTF-8";

/* reset
--------------------------------------------------------------- */
html, body, div, h1, h2, h3, p, ul, li, dl, dt, dd, small  {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
img {
  border: none;
  vertical-align: bottom;
}

/* font-size
--------------------------------------------------------------- */
body { font-size: 16px; }
h1 { font-size: 36px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
p { font-size: 16px; }
ul, li, dl, dt, dd { font-size: 16px; }
small { font-size: 14px; }

/* body
--------------------------------------------------------------- */
body {
  line-height: 1.5;
  background: #FBF9CC url(img/bg-stripe01.png) repeat-x;
}

/* link
--------------------------------------------------------------- */
a { color:#DF4839; }
a:hover { color:#FF705B; }

/* layout
--------------------------------------------------------------- */
#container {
  width: 880px;
  margin: 40px auto;
  padding: 40px 80px;
  border: 1px solid #F6BB9E;
  background: #FFF;
}
#header {
  margin: 20px 0 24px 0;
}

/* heading
--------------------------------------------------------------- */
h1 {
  margin-bottom: 40px;
  color: #6FBB9A;
  text-align: center;
  font-size: 36px;
}
h2 {
  margin-bottom: 24px;
  padding: 12px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
  color: #6FBB9A;
}
h3 {
  margin-bottom: 18px;
  color: #393939;
}

/* #header
--------------------------------------------------------------- */
h1 span {
  color: #D0E35B;
}
#lead {
  margin-bottom: 20px;
  padding: 20px;
  border-top: 1px dotted #6FBB9A;
  border-bottom: 1px dotted #6FBB9A;
  text-align: center;
}
#header ul {
  list-style: disc;
  margin-left: 2.5em;
}
#header li {
  margin-bottom: 10px;
}

/* #content
--------------------------------------------------------------- */
#content .block {
  margin: 20px 0;
  padding: 55px 20px 30px 30px;
  background: #FBF9CC url(img/bg-stripe02.png) repeat-x;
}
#content p {
  line-height: 1.5;
  margin: 10px 0 6px 0;
  padding: 10px 10px 0 0;
}
span.cat-type{
  font-size: 0.8em;
  font-weight: normal;
}
span.cat-type.male{
  color:#2793A7;
}
span.cat-type.female{
  color:#DF972F;
}

/* float layout
--------------------------------------------------------------- */
img.ph{
  float:left;
  margin-right:30px;
}
dl.data{
  float:left;
  width:468px;
}
dl { overflow: hidden; }
dt {
  float:left;
  font-weight:bold;
}
dd {
  padding-left: 1em;
  margin-bottom: 10px;
}

/* more
--------------------------------------------------------------- */
#content p.more {
  clear: left;
  text-align: right;
  background: url(img/icon-arw01.png) no-repeat right 13px;
  padding-right: 20px;
}

/* other
--------------------------------------------------------------- */
#profile, #entry {
  margin-bottom: 25px;
}
#entry p {
  line-height: 1.5;
}
#entry p.apply  {
  text-align: right;
  margin: 10px 16px 0 0;
}

/* #footer
--------------------------------------------------------------- */
#footer {
  text-align: center;
  border-top: 1px dotted #666;
  padding: 10px;
}

ポイント

  • HTMLの文書構造に、id名・class名を付与する（CSSで何を記述するかを決めて、役割の名前をつける）
  • reset CSSを最適化する（不要なセレクタを記述しない）
  • 幅は、外枠を決めてそれ以外は記述しない（width: auto; の記述は省略する）
  • floatを設定する場合は、widthも必須
  • floatを設定した親要素には、overflow: hidden; を必ず記述する
  • 左右にならぶレイアウトブロックがない、単なる「回り込み」の場合は、続く要素には「clear」を記述する
  • clearを記述した要素に、margin-topは適用できないため、必要があれば「padding-top」を設定する
  • CSSでレイアウトを記述するときの、記述ルールを決めておく