読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

CSSレイアウト - 解答例

HTML+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>我が家のアイドル、にゃんこ達を紹介します!</p>
</div><!-- /#header -->

<div id="nav">
<ul>
<li><a href="#">我が家のにゃんこ紹介</a></li>
<li><a href="#">飼い主紹介</a></li>
<li><a href="#">猫写真募集</a></li>
</ul>
</div><!-- /#nav -->

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

<div class="cats">
<h3>●すばる<span class="male">(白キジトラ・オス)</span></h3>
<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。</p>

<p><img src="img/subaru.jpg" alt="すばる"></p>
<dl>
<dt>特徴:</dt><dd>大きな目と耳。まがったしっぽ。</dd>
<dt>性格:</dt><dd>マイペース。</dd>
</dl>

<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /subaru -->

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

<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /gureko -->

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

<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /nezuko -->

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

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

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

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

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


《style.css

@charset "uft-8";

html,body,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { color: #F87065; }
  
body {
  background: #FBF8CB url(img/bg-stripe01.png) repeat-x center top; 
}

#container {
  width: 860px;
  margin: 50px auto;
  padding: 50px 50px 30px 50px;
  background-color: #FFF;
  border: 2px solid #F9E6B8;
  box-sizing: border-box;
}
#header {
  margin-bottom: 20px;
  text-align: center;
}
#header span {
  color: #D2E35A;
}
#header p {
  padding: 16px 0 14px;
  border-top: 1px dotted #88C5C5;
  border-bottom: 1px dotted #88C5C5;
}
#nav {
  margin-bottom: 20px;
}
#nav ul {
  padding-left: 50px;
  color: #F87065;
}
#nav li {
  margin-bottom: 8px;
}
#nav li a {
  font-weight: bold;
}
h1 {
  margin-bottom: 30px;
  color: #69B996;
  text-align: center;
}
h2 {
  margin-bottom: 20px;
  padding: 10px 0 6px 20px;
  border: 1px solid #88C5C5;
  border-left: 12px solid #D0E25B;
  font-size: 20px;
  color: #77B5B5;
}
#content {
  margin-bottom: 30px;
}
.cats {
  margin-bottom: 15px;
  padding: 50px 20px 10px 30px;
  background: #FBF8CB url(img/bg-stripe02.png) repeat-x center top; 
}
.cats h3 {
  margin-bottom: 20px;
}
.cats span.female {
  color: #F60;
  font-size: 14px;
}
.cats span.male {
  color: #3D6D0D;
  font-size: 14px;
}
.cats p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.cats img {
  float: left;
  margin-right: 20px;
}
.cats p.more {
  clear: both;
  text-align: right;
}
.cats p.more a {
  padding-right: 18px;
  font-weight: bold;
  background: url(img/icon-arw01.png) no-repeat right 3px;
}
.cats dt {
  float: left;
  font-weight: bold;
}
.cats dd {
  margin-bottom: 10px;
}

.article {
  margin-bottom: 30px;
}
.article dt {
  float: left;
  font-weight: bold;
}
.article dd {
  margin-bottom: 10px;
}
.article p {
  line-height: 1.5;
}
.article p.entry {
  text-align: right;
}
.article p.entry a {
  padding-right: 18px;
  font-weight: bold;
  background: url(img/icon-arw01.png) no-repeat right 4px;
}
#footer {
  font-size: 14px;
  margin-bottom: 10px;
}

ポイント

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