WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

マークアップ実習

f:id:mmmmofu:20160921025859j:plain

前回の続き

mmmmofu.hatenablog.com
CSSで実際のサイトの見た目を作っていく。

http://efu.sakura.ne.jp/web/cats/

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 class="star"></span>うちのにゃんこ<span class="star"></span></h1>

<p class="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 class="cats">
<h3>●すばる<span class="male">(白キジトラ・オス)</span></h3>

 <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。</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><!-- /.cats -->
    
<div class="cats">
<h3>●ぐれ子<span class="female">(灰色毛皮・メス)</span></h3>

<p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</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><!-- /.cats -->
<div class="cats">
<h3>●ねず子<span class="female">(白茶トラ・メス)</span></h3>

<p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</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><!-- /.ctats -->
</div><!-- /#content -->
<div id="profile">
<h2>飼い主紹介</h2>
<dl>
<dt>H.N. :</dt>
<dd>roka404</dd>
<dt>仕事 :</dt>
<dd>フリーランスでWeb関係のお仕事してます</dd>
<dt>mail :</dt>
<dd><a href="#">メールアドレス:nfo@hogehoge.com</a></dd>
<dt>Web :</dt>
<dd><a href="#" target="_blank">http://www.hogehoge.com/</a></dd>
</dl>
</div><!-- /#profile -->
<div id="entry">
<h2>猫写真募集</h2>

<p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ <br>
<strong>10にゃんこ集まったら紹介ページを開設します!</strong></p>

<p class="tihs"><a href="#">応募はこちら→</a></p>
</div><!-- /#entry -->
<div id="footer">
<p><small>Copyright © UCHI NO NYAN'S All Rights Reserved.</small></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

CSS

@charset "utf-8";

/* reset */
html,body,div,h1,h2,h3,p,ul.li,dl,dt,dd img {
  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 {
  boder: none;
  vertical-align: bottom;
}

/* 擬似クラス */

a {
  color: #df4839;
}
a:hover {
  color: #ff705b;
  text-decoration: 
}

/* body */
body {
  font-size: 16px;
  background: #FBF9CC url(img/bg-stripe01.png) repeat-x left top;
}

/* lyout */
#container {
  width: 880px;
  margin: 40px auto;
  padding: 80px;
  background: #FFF;
  border: 1px solid #F6BB9E;
}
#header {
  text-align: center;
}
#content {
  margin-bottom: 30px;  
}
#profile {

}
#entry {
  margin-bottom: 30px;
}


/* headr */
#header h1 {
  color: #6FBB9A;
  font-size: 2.5em;
  margin-bottom: 20px;
}
#header span.star {
  color: #D0E35B;
}
#header p.lead {
  padding: 15px;
  border-top: 1px dotted #6FBB9A;
  border-bottom: 1px dotted #6FBB9A;
  margin-bottom: 20px;
}
#header ul {
  text-align: left;
  margin: 0 0 30px 32px;
  list-style: disc;
  font-size: 18px;
}
#header li {
  maergin-bottom: 8px;
}
#header h2 {
  color: #6fbb9a;
  margin-bottom: 20px;
  padding: 5px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
}
/* #content */
#content h2 {
  color: #6FBB9A;
  margin-bottom: 20px;
  padding: 10px 20px 5px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
}
#content .cats {
  margin-bottom: 20px;
  padding: 35px 30px 30px 30px;
  background: #FBF9CC url(img/bg-stripe02.png) repeat-x left top;
}
#content h3 {
  margin-bottom: 16px;
}
#content .cats span {
  font-size: 0.8em;
}
#content .cats span.male {
 color: #2893A7;
}
#content .cats span.female {
 color: #DF972F;
}
#content p {
  line-height: 1.5;
  margin: 0 0  16px 1.2em;
}
#content p img {
  float: left;
  margin-right: 16px;
}
#content .cats p.more {
  text-align: right;
  padding-right: 20px;
  background: url(img/icon-arw01.png) no-repeat right top;
  clear: left;
}
#content .cats dl {
padding-top: 3px;
}
#content .cats dt {
  float: left;
}
#content .cats dd {
  margin-bottom: 10px;
}
/* #profile */
#profile h2 {
  color: #6FBB9A;
  margin-bottom: 20px;
  padding: 10px 20px 5px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
}
#profile dl {
padding-bottom: 30px;
}
#profile dt {
  float: left;
}
/* #ently */
#ently h2 {
  color: #6FBB9A;
  margin-bottom: 20px;
  padding: 10px 20px 5px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
}
#ently p {
  line-height: 1.5; 
}
#ently p.tihs {
  text-align: right;
}
/* #footer */
#footer {
 text-align: center;
  boser-top: 1px dotted #333;
  dadding-top: 16px;
  font-size: 14px;
  }
/* other */
dt {
 font-weight: bold;
}