WEB、始めました

半年間WEB制作の学校に通います。その記録。

１７日目　webページ制作

f:id:chawannmusi:20160214191103p:plain

 

 

html----------------------------------------------------------------------------------------

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="">
</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/
</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>

 

 

---------------------------------------------------------------------------------------------------

 

 

stylesheet-------------------------------------------------------------------------------------

 

 

@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;
background: url(img/icon-arw01.png) no-repeat right center;
padding-right: 20px;
}

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

 

 

----------------------------------------------------------------------------------------------

 

 

 

 

floatとclear

 

f:id:chawannmusi:20160214191406p:plain

 

html----------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatとclear</title>
<link rel="stylesheet" href="style2.css">
</head>

<body>
<div class="section">
<h3>●すばる<span class="cat-type male">（白キジトラ・オス）</span></h3>
<p><img src="img/subaru.jpg" alt="すばる">目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。
段ボール箱のかどや柱で爪とぎをするのが大好き。</p> <!--pの文字の１文字目として画像をいれる。同じ内容の説明だから-->
</div>
</body>
</html>

 

----------------------------------------------------------------------------------------------

 

 

stylesheet-------------------------------------------------------------------------------------

@charset "UTF-8";

/* reset */
html, body, h1, p {
margin: 0;
padding: 0;
line-height: 1.5;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

.section {
width: 760px;
margin: 50px auto;
}

p>img {
float: left;
width: 380px;
margin-right: 20px;
}

 

----------------------------------------------------------------------------------------------