読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

2カラムレイアウトの演習

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円


シーフードスパゲッティシーフードスパゲッティ
バルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円

©2017  卵料理カフェ Cockeyolly

使用する画像
http://yachin29.com/cockeyolly-img.zip


ソースコードの作例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの練習</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>
<h1>卵料理カフェ Cockeyolly</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li class="this"><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<h2>今月のおすすめ</h2>

<div class="inner">
<h3>きのこのオムライス</h3>
<p class="txt">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span>800円</span></p>
<p class="photo"><img src="img/photo01.jpg" alt="きのこのオムライス"></p>
</div>

<div class="inner">
<h3>シーフードスパゲッティバルサミコ風味</h3>
<p class="txt">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span>900円</span></p>
<p class="photo"><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味"></p>
</div>
</div>
<footer>
<p><small>&copy;2017  卵料理カフェ Cockeyolly</small></p>
</footer>
</div>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  border:0;
  vertical-align:bottom;
}

body {
  background:url(img/bg.png) repeat-y;
}
#container {
  width:800px;
}
header {
  width:180px;
  float:left;
}
h1 {
  width:82px;
  height:78px;
  margin: 20px auto;
  background:url(img/logo.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav {
  width:180px;
  margin: 40px auto 0;
}
header li {
  height:40px;
}
header li a {
  display:block;
  color:#FFFFFF;
  text-align:center;
  line-height:40px;
  font-weight:bold;
}
header li.this a {
  color:#FFFF33;
}
header li a:hover {
  color:#FFFF33;
}
#wrapper {
  width:620px;
  padding-left:20px;
  box-sizing:border-box;
  float:right;
}
h2 {
  background:url(img/title.gif) no-repeat;
  width:231px;
  height:49px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  margin: 40px auto;
}

.inner {
  overflow:hidden;
  margin-bottom:20px;
}
h3 {
  color:#993300;
  border-left: 6px solid #FF6600;
  padding:5px;
  margin-bottom:20px;
}
p.txt {
  width:400px;
  float:left;
  line-height:1.6;
}
p.photo {
  width:185px;
  float:right;
}
footer {
  text-align:center;
  padding:20px 0;
  border-top: 1px solid #666666;

}

1カラムの復習

f:id:yachin29:20160806123753j:plain

使用テキスト

Herb Kitchen
イタリアの家庭料理のオリジナルレシピを紹介します。

タコカルパッチョ
画像
たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。
レモン果汁などさわやかな酸味、セロリやかいわれ菜などの香りのある野菜を上手に加えると、塩分を抑えてもおいしいおつまみになります。
たこのうまみを引き立てる、さわやかな青じそペーストはパスタやソテーのソースにも使えて便利な一品です。ニンニクや香草の香りが特長のソースは、素材の味をひき立てるビールや辛口の白ワインにピッタリ!スパークリングワインと合わせて、ちょっぴり気の効いた前菜としてもおすすめです。

しらすのペペロンチーノ
画像
おうちでのランチはお手軽にすませたいですよね♪かつ、美味しければなおうれしい!今回は、ごはんの友のしらすを使った簡単パスタ、しらすのペペロンチーノをご紹介します。
味付けはしらすの塩気とパスタの茹で汁を使います。ソースをあらかじめ作って茹で上がったパスタを絡めるので失敗知らずですよ。
ペペロンチーノは基本の素材がダイレクトに出ます。スパゲティ、オイル、塩、にんにく、唐辛子。全てが上質だと出来上がりも素晴らしく違いますよ
Copyright コピーライトマーク Herb Kitcten Co.,Ltd.




使用する画像

f:id:yachin29:20160806123909j:plain

f:id:yachin29:20160806123917j:plain

f:id:yachin29:20051013134629j:plain