webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

ヘッダー画像の制作

header画像の作成

photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。
f:id:yachin29:20090609115035j:plain


f:id:yachin29:20151008200723p:plain


使用するテキスト

Café Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café Italia Restaurant on Zomato.


使用素材
f:id:yachin29:20170802161850j:plain


f:id:yachin29:20170323170819j:plain


子牛のステーキ アスパラガス添え

しっとりと柔らかで脂肪分の少ない仔牛のサーロイン(背肉)の芯をスジを取り除き100gのステーキにカットしました。とても柔らかく上品な風味があり、仔牛の美味しさを堪能いただける品!フランス最古の牛と言われるシャロレー牛は世界でも最高級といわれ、とっても貴重とされています。お肉の美味しさそのままに氷点熟成し、急速に液体凍結していますので解凍してそのままお使いいただけます。


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cafe de FELICA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1></h1>
</header>
<nav></nav>
<div id="content">
<h2>子牛のステーキ アスパラガス添え</h2>
<p id="txt">しっとりと柔らかで脂肪分の少ない仔牛のサーロイン(背肉)の芯をスジを取り除き100gのステーキにカットしました。とても柔らかく上品な風味があり、仔牛の美味しさを堪能いただける品!フランス最古の牛と言われるシャロレー牛は世界でも最高級といわれ、とっても貴重とされています。お肉の美味しさそのままに氷点熟成し、急速に液体凍結していますので解凍してそのままお使いいただけます。</p>
<p id="photo"><img src="img/content01.jpg" alt=""></p>
</div>
</div><!--/#container-->
<footer></footer>
</body>
</html>


style.css

@charset "utf-8";
html,body,header,nav,footer,div,h1,h2,p {
	margin:0;
	padding:0;
	line-height:1.0;
}
img {
	vertical-align:bottom;
}
body {
	background:#999;
}
#container {
	width:820px;
	margin:0 auto;
	background:#FFF;
	padding-top:10px;
}
header {
	width:800px;
	height:300px;
	background:url(img/header02.jpg) no-repeat;
	margin:0 auto 10px;
}
nav {
	width:800px;
	height:50px;
	background:#6699CC;
	margin:0 auto 10px;
}
#content {
	width:800px;
	margin:0 auto ;
	overflow:hidden;
	padding-bottom:20px;
}
h2 {
	text-align:center;
	padding:40px 0 20px;
}
p#txt {
	width:340px;
	float:left;
	margin-left:20px;
	line-height:1.5;
	background:#00CC66;
}
p#photo {
	width:400px;
	float:right;
	margin-right:20px;
}
footer {
	width:100%;
	height:200px;
	background:#505050;
}