webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

課題: コトリエカフェ その１

css css3 html html5 課題 rwd
  • まずは、PC用にコーディングしてから、レスポンシブに対応させる。
  • headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。

f:id:ohta-felica:20160615173426p:plain

  • 縦方向のレイアウトはpositionを使う。
  • 本来「縦」に並ぶ、各要素を無理やりfloatを使って「横」並びにしている。それをまた、レスポンシブにするために縦に戻す。先祖返り。
  • floatさせるため作る<div>にいちいち内容を反映させて.classやidの名前をつけない。自分のルールを作ってみる。すべて、「wrap」にする。
  • floatさせるブロックに、内容に関わる名前をつけるとかえって、どの部分を動かそうとしているのか、混乱する。ドライなネーミングが肝要。それが今日１番の気付き。
  • あらかじめ、共通の見映えを適用する箇所を見通せるようになりたい。
  • 「dl」「dt」「dd」のブロックがどのように広がっているか分かりにくい。分からなくなったらbackground-colorを仮に当ててみるといい。
  • リストの高さは、line-height:では決められない。line-height:は中の文字要素に適用される。高さは、height:で決める。

f:id:ohta-felica:20160615164353j:plain

 html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>cotorier cafe</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
<h1>Cotorier Cafe</h1>
<p class="img"><img src="img/cotorier_logo.svg"></p>
<p class="text">毎日の　おいしいごはんと　おまけをすこし</p>
<nav>
<ul class="navigaton">
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</div>

<div id="main">
<div id="wrap1">
<h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2>
<p class="text">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。</p>
</div><!--wrap1下の緑色部分をwrapしない。rwdのため！-->
<p class="img"><img src="img/mainImgResize.jpg"></p>
<p class="link"><a href="#">お店について</a></p>
</div><!--main-->

<div id="wrap2">
<h3>おすすめメニュー</h3>
<p class="link"><a href="#">すべてのメニュー</a></p>
</div><!--wrap2-->

<div id="wrap3">

<div class="menu menu1">
<h4>日替わりごはんセット</h4>
<p><img src="img/photo1.jpg"></p>
<p>春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p>
</div><!--menu1-->

<div class="menu menu2">
<h4>週替わりカレー</h4>
<p><img src="img/photo2.jpg"></p>
<p>甘辛たけのこカレー ゆでたまごつき</p>
</div><!--menu2-->

<div class="menu menu3">
<h4>季節のおやつ</h4>
<p><img src="img/photo3.jpg" ></p>
<p>西か東か！さくらもち食べ比べ対決セット</p>
</div><!--menu3-->

<div class="menu menu4">
<h4>ひとくち晩酌</h4>
<p><img src="img/photo4.jpg"></p>
<p>今だけ！いちごごろごろサングリア</p>
</div><!--menu4-->

</div><!--wrap3-->


<div id="info">
<div id="wrap4">
<h3>お店からのお知らせ</h3>
<dl>
<dt>■ 2015-04-22</dt><dd> ゴールデンウィークの営業について</dd>

<dt>■ 2015-04-21</dt><dd> 今週の日替わりメニュー（4/21 - 4/26)</dd>

<dt>■ 2015-04-14</dt><dd> 今週の日替わりメニュー（４14 - 4/19）</dd>

<dt>■ 2015-04-10</dt><dd> 春限定のおやつがスタートしました！</dd>
</dl>
</div><!--wrap4-->

<div id="wrap5">
<h4>こちらもどうぞ</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div><!--wrap5-->
</div><!--info-->

<div id="access">
<div id="wrap6">
<h3>店舗情報</h3>
<p class="link"><a href="#">地図・アクセス方法</a></p>
</div><!--wrap6-->

<div id="wrap7">
<dl class="adress">
<dt>住所 </dt><dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd>
<dt>電話</dt><dd> 03-0000-0000</dd>
</dl>
<dl class="open">
<dt>営業時間</dt><dd> 11:00 - 23:30（L.O. 23:00）</dd>
<dt>ランチタイム</dt><dd> 11:00 - 15:00（L.O. 14:30）</dd>
<dt>定休日</dt><dd> 日曜日・祝日</dd>
</dl>
</div><!--wrap7-->
</div><!--access-->

<div id="footer">
<p>Copyright© Cotorier Cafe. All rights Reserved.</p>
</div><!--footer-->
</div><!--container-->
</body>
</html>

 css

@charset "utf-8";
/* CSS Document */
html, body, h1, h2, h3, h4, dl, dt, dd, ul, li, img, p, a {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
color: #4A0000;
}
ul, li, dl, dt, dd{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}
/*reset
------------------------------------------------------------------*/
#container{
width: 960px;
margin: 0 auto;
background :#ffffdd;
}
.text{
line-height: 1.6;
}
.link{
background: #EBE0BE;
text-align: center;
border: 1px solid #4A0000;
box-sizing: border-box;
border-radius :4px;
text-shadow: 1px 1px 1px #aaa;
font-weight: bold;
}
ul>li{
text-align:center;
background: #EBE0BE;
border: 1px solid #4A0000;
box-sizing: border-box;
text-shadow: 1px 1px 1px #aaa;
border-radius: 4px;
font-weight: bold;
}
#header{
width: 960px;
height: 100px;
background: #B49536;
position: relative;
margin-bottom: 3rem;
}
#header h1{
position :absolute;
left: 120px;
bottom: 10px;
text-shadow: 1px 1px 1px #ffffee;
}
#header .img{
position: absolute;
top: 10px;
left: 10px;
}
#header .text{
position :absolute;
left: 120px;
top: 30px;
}
#header nav{
float: right;
overflow: hidden;
height: 80px;
width: 450px;
margin: 10px 1rem 0 0;
}
#header nav>ul>li{
float: left;
width: 140px;
height: 80px;
background: #EBE0BE;
margin-left: 10px;
}
#header nav>ul>li>a{
display: block;
line-height: 80px;
}
/*
---------------------------------------------------------------header*/
#main {
overflow: hidden;
margin-bottom: 3rem;
}
#wrap1{
width: 540px;
float: left;
margin-left: 1rem;
}
#wrap1 h2{
font-size: 2rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap1 p.text{
margin-bottom: 2rem;
}
#main .link{
width: 540px;
height: 80px;
margin-left: 1rem;
float: left;
}
#main .link a{
line-height: 80px;
display: block;
}
#main img{
float: right;
margin-top: 2rem;
margin-right: 1rem;
}
/*main
------------------------------------------------------------------*/
#wrap2{
overflow: hidden;
margin-left: 1rem;
margin-bottom: 3rem;
}
#wrap2 h3{
font-size: 2rem;
width: 480px;
float: left;
text-shadow: 1px 1px 1px #aaa;
}
#wrap2 p.link{
width: 220px;
height: 40px;
float: right;
margin: 0.5rem 1rem 0 0 ;
}
#wrap2 p a{
line-height: 40px;
text-align: center;
display: block;
}
#wrap3{
margin-left: 1rem;
overflow: hidden;
margin-bottom:2rem;
}
.menu{
float: left;
width: 220px;
margin-right: 1rem;
}
.menu h4{
text-align: center;
margin-bottom: 1.5rem;
text-shadow: 1px 1px 1px #aaa;
}
.menu p{
margin-bottom: 1rem;
}
.menu img{
border: 2px solid #4A0000;
box-sizing: border-box;
border-radius: 6px;
}
/*menu
---------------------------------------------------------------------*/
#info{
overflow: hidden;
margin-bottom: 2rem;
margin-left: 1rem;
}
#wrap4{
float: left;
margin-right: 1rem;
}
#wrap4 h3{
font-size: 28px;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap4 dl{
list-style: decimal;
overflow: hidden;
}
#wrap4 dt{
float: left;
width: 120px;
margin-right: 1rem;
height: 48px;
}
#wrap4 dd{
width: 440px;
height: 48px;
}
#wrap5{
float: right;
width: 456px;
margin-right: 1rem;
}
#wrap5 h4{
font-size: 28px;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap5 ul{
overflow: hidden;
width: 456px;
}
#wrap5>ul>li{
width: 220px;
height: 50px;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
float: left;
}
#wrap5>ul>li a{
display: block;
line-height: 50px;
}
#wrap6{
margin-left: 1rem;
overflow: hidden;
margin-bottom: 2rem;
}
#wrap6 h3{
font-size: 28px;
float: left;
margin-right: 3rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap6 p{
width: 220px;
height: 40px;
float: left;
}
#wrap6 p a{
line-height: 40px;
display: block;
}
#wrap7{
overflow: hidden;
margin-bottom: 3rem;
}
dl.adress{
margin-left: 1rem;
float: left;
overflow: hidden;
margin-right: 3rem;
}
dl.adress dt{
width: 60px;
height: 50px;
float: left;
}
dl.adress dd{
width: 480px;
height: 50px;
}
dl.open {
overflow: hidden;
}
dl.open dt{
width:120px;
height: 30px;
float: left;
}
dl.open dd{
width: 360px;
height: 30px;
}
/*access
--------------------------------------------------------------------*/
#footer{
width :960px;
height: 160px;
background: #4A0000;
text-align: center;
margin-bottom: 1rem;
}
#footer p{
line-height: 160px;
color: #ffffee;
}
@media screen and (max-width:959px){
#container{
width: 98%;
}
.text{
line-height: 1.6;
}
.link{
background: #EBE0BE;
text-align: center;
border: 1px solid #4A0000;
box-sizing: border-box;
border-radius :4px;
text-shadow: 1px 1px 1px #aaa;
font-weight: bold;
}
ul>li{
text-align:center;
background: #EBE0BE;
border: 1px solid #4A0000;
box-sizing: border-box;
text-shadow: 1px 1px 1px #aaa;
border-radius: 4px;
font-weight: bold;
}
#header{
width: 100%;
height: 100px;
position: relative;
margin-bottom: 0;
}
#header h1{
position :absolute;
left: 180px;
bottom: 10px;
text-shadow: 1px 1px 1px #ffffee;
}
#header .img{
position: absolute;
top: 10px;
left: 90px;
}
#header .text{
position :absolute;
left: 180px;
top: 10px;
}
#header nav{
position: absolute;
top: 100px;
left: 0;
float: none;
overflow: hidden;
height: 50px;
width: 100%;
margin: 0;
}
#header nav>ul>li{
float: left;
width: 33.33%;
height: 50px;
margin-left: 0;
}
#header nav>ul>li>a{
display: block;
line-height: 50px;
}
/*
---------------------------------------------------------------header*/
#main {
overflow: i;
margin-bottom: 2rem;
}
#mainText{
width: 60%;
float: left;
margin-left: 1rem;
}
#mainText h2{
font-size: 1.5rem;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#mainText p.text{
margin-bottom: 1rem;
}
#mainText p.link{
width: 100%;
height: 50px;
}
#mainText p.link a{
line-height: 50px;
font-size :1rem;
display: block;
}
#main img{
float: right;
margin-top: 2rem;
margin-right: 1rem;
}
/*main
------------------------------------------------------------------*/
#wrap1{
overflow: hidden;
margin-left: 1rem;
margin-bottom: 3rem;
}
#wrap1 h3{
font-size: 2rem;
width: 480px;
float: left;
text-shadow: 1px 1px 1px #aaa;
}
#wrap1 p.link{
width: 220px;
height: 40px;
float: right;
margin: 0.5rem 1rem 0 0 ;
}
#wrap1 p a{
line-height: 40px;
text-align: center;
display: block;
}
#wrap2{
margin-left: 1rem;
overflow: hidden;
margin-bottom:2rem;
}
.menu{
float: left;
width: 220px;
margin-right: 1rem;
}
.menu h4{
text-align: center;
margin-bottom: 1.5rem;
text-shadow: 1px 1px 1px #aaa;
}
.menu p{
margin-bottom: 1rem;
}
.menu img{
border: 2px solid #4A0000;
box-sizing: border-box;
border-radius: 6px;
}
/*menu
---------------------------------------------------------------------*/
#info{
overflow: hidden;
margin-bottom: 2rem;
margin-left: 1rem;
}
#wrap3{
float: left;
margin-right: 1rem;
}
#wrap3 h3{
font-size: 28px;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap3 dl{
list-style: decimal;
overflow: hidden;
}
#wrap3 dt{
float: left;
width: 120px;
margin-right: 1rem;
height: 48px;
}
#wrap3 dd{
width: 440px;
height: 48px;
}
#wrap4{
float: right;
width: 456px;
margin-right: 1rem;
}
#wrap4 h4{
font-size: 28px;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap4 ul{
overflow: hidden;
width: 456px;
}
#wrap4>ul>li{
width: 220px;
height: 50px;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
float: left;
}
#wrap4>ul>li a{
display: block;
line-height: 50px;
}
#wrap5{
margin-left: 1rem;
overflow: hidden;
margin-bottom: 2rem;
}
#wrap5 h3{
font-size: 28px;
float: left;
margin-right: 3rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap5 p{
width: 220px;
height: 40px;
float: left;
}
#wrap5 p a{
line-height: 40px;
display: block;
}
#wrap6{
overflow: hidden;
margin-bottom: 3rem;
}
dl.adress{
margin-left: 1rem;
float: left;
overflow: hidden;
margin-right: 3rem;
}
dl.adress dt{
width: 60px;
height: 50px;
float: left;
}
dl.adress dd{
width: 480px;
height: 50px;
}
dl.open {
overflow: hidden;
}
dl.open dt{
width:120px;
height: 30px;
float: left;
}
dl.open dd{
width: 360px;
height: 30px;
}
/*access
--------------------------------------------------------------------*/
#footer{
width :960px;
height: 160px;
background: #4A0000;
text-align: center;
margin-bottom: 1rem;
}
#footer p{
line-height: 160px;
color: #ffffee;
}

}