webサイト制作の勉強|2018年9月クラス用ブログ

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

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

演習1

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

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

今月のおすすめ

きのこのオムライス

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


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

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

©2018  卵料理カフェ Cockeyolly


使用画像
http://yachin29.webcrow.jp/cockeyolly-img.zip

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

<body>
<div class="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="current"><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>
<div class="food">
<h3>きのこのオムライス</h3>
<p><img src="img/photo01.jpg" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p>
</div>
<div class="food">
<h3>シーフードスパゲッティバルサミコ風味</h3>
<p><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p>
</div>
<footer>
<p><small>&copy;2018  卵料理カフェ Cockeyolly</small></p>
</footer>
</div><!--/.content-->
</div><!--/.container-->
</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;
  color:#222;
}
img {
  vertical-align:bottom;
}

.container {
  width:800px;
  margin:0 auto;
  overflow:hidden;
}
header {
  width:260px;
  height:700px;
  padding:20px 0 0 40px;/*上、右、下、左*/
  box-sizing:border-box;/*paddigとborderを内側に入れてくれる*/
  background:url(../img/header.gif) repeat-y;
  float:left;
}
h1 {
  width:82px;
  height:78px;
  background:url(../img/logo.gif) no-repeat;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  margin-bottom:40px;
}
li {
  width:200px;
  height:50px;
}
li a {
  display:block;
  line-height:50px;
  font-weight:bold;
  color:#FFF;
}
li a:hover {
  color:#F8F218;
}
li.current a {
  color:#F8F218;
}
.content {
  width:540px;
  height:700px;
  float:right;
}
h2 {
  text-align:center;
  padding: 60px 0 40px;
}
.food {
  padding-left:40px;
  margin-bottom:40px;
}
h3 {
  border-left:10px solid #F09100;
  padding-left:16px;
  margin-bottom:20px;
}
.food img {
  float:right;
}
.food p {
  overflow:hidden;
  line-height:1.6;
}
.price {
  font-weight:bold;
  color:#B3340F;
  display:block;
  text-align:right;
  padding-right:200px;
  
}
footer {
  border-top:1px solid #999;
  margin-left:40px;
  padding-top:20px;
}
footer p {
  text-align:center;
}
演習2

f:id:yachin29:20180313130130p:plain


使用するテキスト

薬玉文様(くすだまもんよう)

薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。

© 2018 Historical Japan


使用画像
http://yachin29.webcrow.jp/japanese-img.zip