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

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

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

演習1

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

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

今月のおすすめ

きのこのオムライス

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


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

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

©2018  卵料理カフェ Cockeyolly


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

html 例

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

<body>
<div id="container">
<div id="header">
<h1>卵料理カフェ Cockeyolly</h1>
<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>
</div>
<div id="wrapper">
<div id="main">
<h2>今月のおすすめ</h2>

<div class="food">
<h3>きのこのオムライス</h3>
<p class="txt">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円</p>
<p class="photo"><img src="img/photo01.jpg" alt="きのこのオムライス"></p>
</div>
<div class="food">
<h3>シーフードスパゲッティバルサミコ風味</h3>
<p class="txt">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円</p>
<p class="photo"><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味"></p>
</div><!--/.food-->
</div><!--/#main-->
<div id="footer">
<p><small>&copy; 2018  卵料理カフェ Cockeyolly</small></p></div>
</div><!--/#wrapper-->
</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;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,sans-serif;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
#container {
  width:800px;
  margin:0 auto;
  overflow:hidden;
}
#header {
  width:140px;
  height:600px;
  background:url(../img/bg.gif) repeat-y;
  padding-top:20px;
  float:left;
}
h1 {
  width:82px;
  height:78px;
  background:url(../img/logo.gif) no-repeat;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  margin:0 0 0 10px;
}
ul {
  margin:50px 0 0 5px;
}
li {
  margin-bottom:20px;
}
li a {
  display:block;
  color:#FFFFFF;
  font-weight:bold;
}
li a:hover {
  color:#FFFF66;
}
li.current a {
   color:#FFFF66;
}
#wrapper {
  width:600px;
  float:right;
  padding-top:20px;
}
h2 {
  width:231px;
  height:49px;
  margin: 0 auto;
  background:url(../img/title.gif) no-repeat;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  margin-bottom:20px;
}
.food {
  overflow:hidden;
  margin-bottom:60px;
}
h3 {
  color:#CC3300;
  font-size:20px;
  border-left: solid 10px #993300;
  padding:10px 0 10px 30px;
  margin-bottom:10px;
}
p.txt {
  width:390px;
  float:left;
  line-height:1.5;
}
p.photo {
  width:185px;
  float:right;
}
#footer {
  border-top: solid 1px #666;
  padding-top:20px;
}
#footer p {
  text-align:center;
}
演習2

f:id:yachin29:20180313130130p:plain


使用するテキスト

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

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

© 2018 Historical Japan


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



作例

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>2カラムの練習</title>
<style>
html,body,h1,p,small {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "sans-serif";
}
img {
vertical-align: bottom;
}

body {
background: url(img/bg.gif) repeat;
}

#container {
width: 636px;
background: #000;
margin: 50px auto 0;
padding: 20px 20px 0 20px;
}
#wrapper {
overflow: hidden;
}
#txt-box {
width: 308px;
float: left;
}
h1 {
color: #FAD94D;
padding: 20px 0;
font-size: 22px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
}
h1 span {
font-size: 18px;
}
#txt-box p {
color: #FFF;
line-height: 1.7;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
}
#photo-box {
width: 308px;
float: right;
}
#footer {
height: 50px;
}
#footer p {
color: #FFF;
text-align: center;
line-height:50px;
}
</style>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="txt-box">
<h1>薬玉文様 <span>(くすだまもんよう)</span></h1>
<p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。</p>
</div>
<div id="photo-box">
<p><img src="img/image.jpg" alt="薬玉文様"></p>
</div>
</div>
<div id="footer">
<p><small>&copy; 2018 Historical Japan</small></p>
</div>
</div>
</body>
</html>