ピアノサイト 回答例 HTML5 CSS3
ドレミファピアノ教室
僕の回答例
ーーーーーーーーーーーーーーーーーーーーーーーーー
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドレミファ音楽教室_hiyoshi</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:600' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="headerwrap">
<h1><a href="#"><img src="img/header-logo.png" alt="ドレミファ音楽教室"></a></h1>
<dl>
<dt>お問い合わせ・お申し込み</dt>
<dd>01-4321-7890</dd>
</dl>
</div><!-- headerwrap -->
<nav>
<ul>
<li><a href="#">教室について</a></li>
<li><a href="#">大人のコース</a></li>
<li><a href="#">子どものコース</a></li>
<li><a href="#">体験クラス</a></li>
<li><a href="#">お申し込み</a></li>
</ul>
</nav>
</header>
<div class="container">
<p class="key"><img src="img/home-keyvisual.jpg" alt="音楽の楽しさをみなさんに伝えたい"></p>
<section>
<h2>お知らせ</h2>
<ul>
<li class="link"><a href="#"><img src="img/home-news-1.jpg" alt="news1"><p><span>今月の体験クラスの情報を掲載しました。</span>先着順でお申し込み受付中ですのでお早めにどうぞ。</p></a></li>
<li class="link"><a href="#"><img src="img/home-news-2.jpg" alt="news2"><p>「大人のためのやりなおしピアノ」開講しました。子どもの頃は習っていたけれど今はすっかり……という方におすすめです。</p></a></li>
<li><img src="img/home-news-3.jpg" alt="news3"><p>ドレミファ音楽教室が4周年を迎えました。これからもどうぞよろしくお願いいたします！</p></li>
</ul>
</section>
<div class="subcontent">
<p><a href="#"><img src="img/home-banner-1.png" alt="子どもがよろこぶ！お菓子が登場する曲特集"></a></p>
<p><a href="#"><img src="img/home-banner-2.png" alt="ピアノを習うのは何才からがベスト？"></a></p>
<p><a href="#"><img src="img/home-banner-3.png" alt="大きな音が出せない！練習場所のなやみ"></a></p>
</div><!-- subcontent -->
</div><!-- container -->
<footer>
<ul>
<li><a href="#">教室について</a></li>
<li><a href="#">大人のコース</a></li>
<li><a href="#">子どものコース</a></li>
<li><a href="#">体験クラス</a></li>
<li><a href="#">お申し込み</a></li>
</ul>
<p><small>©copyright DoReMiFa Music School, all rights reserved.</small></p>
</footer>
</body>
</html>
||<
ーーーーーーーーーーーーーーーーーーーーーーーーーー
CSS
@charset "utf-8";
/* reset */
html,body,div,h1,h2,p,dl,dt,dd,ul,li,a,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: 0;
vertical-align: bottom;
}
/* font-size */
html { font-size: 65.2%;}
body { font-size: 16px;}
h1 { font-size: 32px;}
h2 { font-size: 20px;}
p { font-size: 16px;}
ul,li { font-size: 14px;}
small { font-size: 14px;}
/* layout */
body {background: #FFF;}
.container {
overflow: hidden;
width: 980px;
margin: 0 auto;
}
section {
float: left;
width: 610px;
margin: 0 20px;
}
.subcontent{
float: left;
width: 290px;
margin: 0 20px;
}
/* header */
header {background:url(img/header-bg.jpg) repeat-x top;}
.headerwrap {
width: 980px;
height: 200px;
margin: 0 auto;
position: relative;
}
header h1{
position: absolute;
top: 40px;
left: 0;
}
header dl {
position: absolute;
top: 0;
right: 10px;
width: 300px;
height: 100px;
border-radius: 0 0 20px 20px;
background-color: #F80;
color: #FFF;
text-align: center;
}
header dt {padding: 15px 0 10px;}
header dd {
font-family: 'Josefin Sans',sans-serif;
font-size: 40px;}
/* nav */
nav {
background: #F80;
}
nav ul {
overflow: hidden;
width: 980px;
margin: 0 auto;
background: #FFF;
}
nav li {
float: left;
background: #F80;
width: 196px;
height: 80px;
font-size: 16px;
text-align: center;
}
nav a {
display: block;
border-left: 1px solid #FFF;
line-height: 80px;
color: #FFF;
}
nav li:first-child a{
border-left: none;
}
nav li:hover {
opacity: 0.9;
}
/* container */
.key {margin-bottom: 40px;}
/* section */
section h2 {}
section li {
overflow: hidden;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dotted #DCC7A3;
}
section li img {
float: left;
margin: 0 10px 0 20px;
border-radius: 45px;
}
section li p span {
color: #F33;
text-decoration: underline;
}
section a {color: #000;}
section li.link:hover {opacity: 0.7}
/* subcontent */
.subcontent p {margin-bottom: 20px;}
.subcontent a:hover {opacity: 0.7}
/* footer */
footer{
overflow: hidden;
width: 980px;
margin: 20px auto 0;
padding: 20px 0;
border-top: 2px solid #DCC7A3;
}
footer ul{
overflow: hidden;
}
footer li{
float: left;
border-left: 2px solid #927f67;
text-align: center;
}
footer li:first-child{
border-left: none;
}
footer a{
display: block;
padding: 0 10px;
color: #927f67;
}
footer a:hover {opacity: 0.7;}
footer small{
float: right;
color: #927f67;
}
ーーーーーーーーーーーーーーーーーーーーーーーーー
考察
opacityの使い方
色々弄ってみたところopacityの使い方に目覚めた。
このサイトの場合だとグローバルナビのulのbackgroundに白い色を入れるとopacityを効かせたときにボタンが点灯したように明るくなり、黒い色を入れると影が出来たように暗くなる。
当たり前ですね、透明になるわけだからね。
でも、一人で「うおおスゲー」って感動してました。
両方とも良い感じなのでお試しあれ。
borderをつけるとレイアウトがズレる問題
li:hoverにboder:none;を効かせたらどうしてもズレてしまった。
先生からのメールのコードを見て、aにborderを効かせたら上手く行く事に気づいた。
aに効かせる理由は解ったけど、liに効かせると崩れる理由はわからぬ。げせぬ。
bodyにbg_imgを使うとはみ出る問題
bodyにヘッダー部分の背景画像をかけるという話だったけれど、上手くいかない
初めはそうしたけど見た目のレイアウトを合わせようとすると、背景画像がヘッダーからはみ出るんですよね。
どうしたもんか。
先生に聞こう。
