以前マークアップしたhtmlデータにcssを追加してページを完成させてしまいましょう。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <h1>★<span>うちのにゃんこ</span>★</h1> <p id="lead">我が家のアイドル、にゃんこ達を紹介します！</p> <ul> <li><a href="#cats">我が家のにゃんこ紹介</a></li> <li><a href="#profile">飼い主紹介</a></li> <li><a href="#entery">猫写真募集</a></li> </ul> <div id="cats"> <h2>我が家のにゃんこ紹介</h2> <div id="subaru" class="frame"> <h3>●すばる<span class="cat-type male">（白キジトラ・オス）</span></h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>段ボール箱のかどや柱で爪とぎをするのが大好き。</p> <div class="wrapper"> <p class="photo"><img src="img/subaru.jpg" alt="すばる"></p> <dl class="data"> <dt>特徴：</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格：</dt> <dd>マイペース。</dd> </dl> </div> <p class="more"><a href="#">もっと見る</a></p> </div> <div id="gureko" class="frame"> <h3>●ぐれ子<span class="cat-type female">（灰色毛皮・メス）</span></h3> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br>しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> <div class="wrapper"> <p class="photo"><img src="img/gureko.jpg" alt="ぐれ子"></p> <dl class="data"> <dt>特徴：</dt> <dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd> <dt>性格：</dt> <dd>甘え上手。腹黒。</dd> </dl> </div> <p class="more"><a href="#">もっと見る</a></p> </div> <div id="nezuko" class="frame"> <h3>●ねず子<span class="cat-type female">（白茶トラ・メス）</span></h3> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br>見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p> <div class="wrapper"> <p class="photo"><img src="img/nezuko.jpg" alt="ねず子"></p> <dl class="data"> <dt>特徴：</dt> <dd>片目。小顔。</dd> <dt>性格：</dt> <dd>プライド高い。人間に対しては女王様。</dd> </dl> </div> <p class="more"><a href="#">もっと見る</a></p> </div> </div> <div id="profile"> <h2>飼い主紹介</h2> <dl> <dt>H.N. ：</dt> <dd>roka404</dd> <dt>仕事 ：</dt> <p>フリーランスでWeb関係のお仕事してます</p> <dt>mail ：</dt> <dd>info@hogehoge.com</dd> <dt>Web ：</dt> <dd>http://www.hogehoge.com/</dd> </dl> </div> <div id="entery"> <h2>猫写真募集</h2> <p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br> <strong>10にゃんこ集まったら紹介ページを開設します！</strong></p> <p><a href="#">応募はこちら→</a></p> </div> <p><small>Copyright © UCHI NO NYAN'S All Rights Reserved.</small></p> <p class="logo"><img src="img/logo.png" alt=""></p> </div> </body> </html>
@charset "utf-8";
/*リセット部分*/
img{
/*画像の余白を無くす*/
vertical-align: bottom;
}
/*ウィンドウ背景色の設定*/
body{
background:#fbf9cc url(../img/bg.png)repeat-x;
}
/*リンク色の設定*/
a{
color: #df4839;
}
a:hover{
color:#ff705b;
}
/*コンテンツ全体の設定*/
#wrap{
padding: 40px 80px;
border: #f6bb9e;
background-color: #FFF;
width: 960px;
margin: 40px auto;
position: relative;
}
/*ページタイトルの設定*/
h1{
color: #d0e35b;
text-align: center;
font-size: 250%;/*100%=16px*/
}
h1>span{
color: #6fbb9a;
}
h2{
color: #6fbb9a;
border: #94c8b1 1px dotted;
border-left: #d0e35b 10px solid;
padding: 5px 20px;
margin-bottom: 0;
}
dt{
font-weight: bold;
}
#lead{
border-top: #6fbb9a 1px dotted;
border-bottom: #6fbb9a 1px dotted;
padding: 15px;
text-align: center;
}
.more {
text-align:right;
padding-right: 20px;
background: url(../img/arrow.png) no-repeat right center;
}
/*3匹共通*/
.cat-type {
font-size: 80%;
font-weight: normal;
}
/*性別分け*/
.cat-type.male {
color: #2793a7;
}
.cat-type.female {
color:#df972f;
}
/*フレームの設定*/
.frame {
margin:20px 0;
padding:35px 30px 30px;
background:#fbf9cc url(../img/bg2.png) repeat-x;
}
.wrapper{
overflow: hidden;
}
.photo{
width: 320px;
float: left;
}
dl.data{
width: 400px;
float: right;
}
dt{
float: left;
}
.logo{
width: 300px;
height: 300px;
position: absolute;
top: -60px;
right:-80px;
transform: rotate(10deg);
}
コメント