WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

カンプをコーディング

illustratorで作ったカンプを実際にコーディングしてみましょう。
要素や文字の大きさや色、マージンなどの値もカンプのデータをベースに作っていきます。しかし、全てカンプと完全に同じに作っていくのは非常に難しいので、コーディング段階での微調整は必要です。
各要素の値を確認する時はillustratorのカンプデータの確認したい要素を選択して、変形の情報を元にコーディングして行きましょう。
f:id:yachin29:20160615022919p:plain

HTML

HTMLで1番大事なのはアウトライン構造です。どういうレイアウトにするにしろ、まずは自分がどういうアウトライン構造を作るべきかを考え、それに応じたマークアップをしていきます。レイアウト優先では無く正しい文章構造を意識してマークアップしていきます。
授業ではフロートの回り込み解除の方法として主にoverflow:hiddenを使用して来ましたが、overflow:hiddenを指定する為だけの要素はレスポンシブレイアウトを考えると邪魔になる場合があるので、場合によってはclearが必要なケースも出て来ます。

CSS

まずはPCレイアウトのみを考えたレイアウトを作って行きましょう。PCレイアウトのみで考えるとそんなに複雑な作りではないので、もちろん今までの授業で習ったプロパティだけで作る事が出来ます。ここで出てくる基本的なプロパティをしっかりと理解すれば基本的なレイアウトは自由につくれるようになります。

今回使用するCSSプロパティ

レイアウト関係
width
height
margin
padding
float
position
background
display
overflow
clear
border
box-sizing

テキスト関係
font-size
font-weight
text-align
line-height



思い通りにレイアウト出来ない場合は要素に背景色を指定し、実際にその要素がどういう状態か可視化出来るようにして確認するのがコツです。
f:id:yachin29:20160615024430j:plain


HTMLの例

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

<body>
<div id="container">
<header>
<h1>Cotorier Cafe</h1>
<p class="text">毎日のおいしいごはんとおまけをすこし</p>
<p class="logo"><img src="img/logo.jpg" alt=""></p>

<nav>
<ul>
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div id="main">
<p id="mainImg"><img src="img/main.jpg" alt=""></p>
<div id="mainTaxt">
<h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2>

<p class="textInfo">Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。</p>

<p id="mainShop"><a href="#">お店について</a></p>
</div>
</div>

<div id="menu">
<div id="menuInner">
<h3>おすすめメニュー</h3>
<p id="all"><a href="#">すべてのメニュー</a></p>
</div>

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

<div class="menuFood">
<h4>週替わりカレー</h4>
<p class="photo"><img src="img/photo2.jpg" alt="#"></p>
<p class="photoText">甘辛たけのこカレー ゆでたまごつき</p>
</div>

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

<div class="menuFood">
<h4>ひとくち晩酌</h4>
<p class="photo"><img src="img/photo4.jpg" alt="#"></p>
<p class="photoText">今だけ!いちごごろごろサングリア</p>
</div>
</div>
</div>

<div id="info">
<div id="infoShop">
<h3>お店からのお知らせ</h3>
<dl>
<dt>■ 2016-04-22</dt> <dd>ゴールデンウィークの営業について</dd>
<dt>■ 2016-04-21</dt> <dd>今週の日替わりメニュー(4/21 - 4/26)</dd>
<dt>■ 2016-04-14</dt> <dd>今週の日替わりメニュー(414 - 4/19)</dd>
<dt>■ 2016-04-10</dt> <dd>春限定のおやつがスタートしました!</dd>
</dl>
</div>

<div id="sns">
<p>こちらもどうぞ</p>
<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>
</div>

<div id="access">
<h3>店舗情報</h3>
<h4>地図・アクセス方法</h4>
<dl>
<dt>住所</dt> 
<dd>東京都杉並区高円寺南7丁目7-4 ことりやビル2F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd>
<dt>営業時間</dt><dd>11:00 - 23:30(L.O. 23:00)<br>ランチタイム:11:00 - 15:00(L.O. 14:30)</dd>
<dt>電話</dt><dd>03-0000-0000</dd>
<dt>定休日</dt><dd>日曜日・祝日</dd>
</dl>
</div>
<footer>
<p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p>
</footer>
</div>
</div></body>
</html>

f:id:yachin29:20160725032423j:plain
f:id:yachin29:20160725032431j:plain
f:id:yachin29:20160725032438j:plain
f:id:yachin29:20160725032444j:plain
f:id:yachin29:20160725032450j:plain
f:id:yachin29:20160725032454j:plain