WEBサイト制作の勉強

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

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

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

HTML+CSS

f:id:yachin29:20160318175839p:plain

 

使用するテキスト

卵料理カフェ Cockeyolly

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

今月のおすすめ

きのこのオムライス

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


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

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

©2016  卵料理カフェ Cockeyolly

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

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>卵料理カフェ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#" class="this">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</nav>
</header><!-- /header -->
<div id="main">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p><img src="img/photo01.jpg" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p>
<h3>シーフードスパゲッティ<br>バルサミコ風味</h3>
<p><img src="img/photo02.jpg" alt="シーフードスパゲッティ バルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。<br>バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p>
<footer>
<p><small>&copy;2016  卵料理カフェ Cockeyolly</small></p>
</footer>
</div><!-- /#main -->
</div><!-- /#container -->
</body>
</html>

スタイルシート

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, p, ul, li, header, footer, nav {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
     sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  color: #22;
  font-size: 16px;
  background: url(file:///C|/yajima/bg_img.gif) repeat-y;
}

/* layout */
#container {
  width: 680px;
  padding: 15px;
  overflow: hidden;
}
header {
  width: 130px;
  float: left;
}
header h1 {
  margin-bottom: 50px;
  margin-left: 15px;
  background: url(../img/logo.gif) no-repeat;
  width: 82px;
  height: 78px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav li {
  line-height: 2.0;
}
nav li a {
  display: block;
  color: #FFF;
  font-weight: bold;
}
nav li a:hover, nav li a.this {
  color: #FF6;
}
#main {
  width: 460px;
  float: left;
  margin: 30px 0 0 50px;
}
#main h2 {
  text-align: center;
  margin-bottom: 50px;
}
#main h3 {
  color: #7C533F;
  line-height: 1.3;
  margin-bottom: 10px;
  padding-left: 0.5em;
  border-left: 8px solid #DA8125;
}
#main p {
  line-height: 1.6;
  margin-bottom: 30px;
}
span.price {
  color: #F30;
  font-weight: bold;
}
#main p img {
  float: right;
  margin-left: 1.0em;
}
footer p {
  text-align: center;
  border-top: 1px solid #AAA;
  padding-top: 20px;
}

f:id:yachin29:20160319031256j:plain

provence

プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。
地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。

© provence

画像素材
http://yachin29.com/provence-img.zip

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>provence</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>provence</h1>
</header>
<div id="wrapper">
<nav>
<ul>
<li id="home"><a href="#">HOME</a></li>
<li id="about"><a href="#">About Us</a></li>
<li id="product"><a href="#">Works</a></li>
<li id="shop"><a href="#">Access</a></li>
<li id="access"><a href="#">Blog</a></li>
<li id="contact"><a href="#">Contact Us</a></li>
</ul>
</nav><!-- /nav -->
<div id="content">
<p><img src="img/illust.gif">プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。<br>
地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。</p>
</div><!-- /#content -->

</div><!-- /#wrapper -->
<footer>
<p><small>(c)provence</small></p>
</footer><!-- /footer -->
</div><!-- /#container -->
</body>
</html>


スタイルシート

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

/* reset */
html, body, div, h1, p, ul, li, header, nav, footer {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo, 
  sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}

body{
  color: #222;
}

/* layout */
#container {
  width: 700px;
  margin: 20px auto;
}
header {
  width: 700px;
  height: 120px;
  background-image: url(img/header.gif);
  margin-bottom: 20px;
}
#wrapper {
  width: 700px;
  overflow: hidden;
  margin-bottom: 20px;
}
nav {
  width: 200px;
  float: left;
}
#content {
  width: 480px;
  float: right;
}
footer {
  clear: both;
  width: 700px;
  height: 61px;
  background-image: url(img/footer.gif);
}

/* nav */
nav li {
  margin-bottom: 3px;
}
nav li a {
  display: block;
  width: 200px;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

nav li#home {
  background: url(img/nav_bg001.gif) no-repeat;
}
nav li#about {
  background: url(img/nav_bg002.gif) no-repeat;
}
nav li#product {
  background: url(img/nav_bg003.gif) no-repeat;
}
nav li#shop {
  background: url(img/nav_bg004.gif) no-repeat;
}
nav li#access {
  background: url(img/nav_bg005.gif) no-repeat;
}
nav li#contact {
  background: url(img/nav_bg006.gif) no-repeat;
}

/* content */
header h1 {
  color: #FFF;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 36px 0 0 20px;
}
#content p {
  line-height: 1.6;
  font-size: 14px;
}
#content p img{
  float: right;
  margin-left: 16px;
}
footer p {
  color: #FFF;
  text-align: center;
  padding-top: 24px;
}

f:id:yachin29:20160319030429j:plain

Computer Technology Groups

    エコロジー
    コンピューター
    モバイル
    ショッピング
    お問い合わせ

エコロジー
エコロジーへの取り組み

Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
商品のラインナップ

紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。

 © Computer Technology Groups. All rights reserved.

画像素材
http://yachin29.com/eco-img.zip

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>Computer Technology Groups</h1>
<nav>
<ul>
<li><a href="#">エコロジー</a></li>
<li><a href="#">コンピューター</a></li>
<li><a href="#">モバイル</a></li>
<li><a href="#">ショッピング</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav><!-- /nav -->
<div id="content">
<h2><img src="img/ecology.gif" alt="エコロジー"></h2>
<div class="section">
<h3>エコロジーへの取り組み</h3>
<p>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
</p>
<p>
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
</p>
</div>
<div class="section">
<h3>商品のラインナップ</h3>
<p>
紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
</p>
</div>

</div><!-- /.section -->
<footer>
<p><small>&copy; Computer Technology Groups. All rights reserved.</small></p>
</footer><!-- /footer -->
</div><!-- /#container -->
</body>
</html>

スタイルシート

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

body, h1, h2, p, ul, li, div {
  margin: 0;
  padding: 0;
  font-family:
  "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #4C904E;
}
img {
  border: 0;
  vertical-align: bottom;
}



body {
  color: #555555;
  font-size: 16px;
  line-height: 1.7;
}
#container {
  width: 600px;
  margin: 10px auto;
}
nav {
  width: 600px;
  border-top: 1px solid #4C904E;
  border-bottom: 1px solid #4C904E;
  margin-bottom: 20px;
}
nav ul {
  font-size: 14px;
  width: 500px;
  overflow: hidden;
  margin: 0 auto;
}
nav li {
  float: left;
}
nav li a {
  display: block;
  line-height: 40px;
  margin: 0 8px;
}
nav li a:hover {
  text-decoration: underline;
}
#content {
  clear: both;
  margin-bottom: 40px;
}
h1 {
  height: 60px;
  font-size: 16px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  margin: 0 0 30px 0;
  padding-left: 60px;
  background: url(../img/logo.gif)  no-repeat;
}
h2 {
  text-align:center;
  padding: 10px 0 22px 0;
  background-color: #4C904E;
}
h3 {
  color: #4C904E;
  font-size: 18px;
  margin:0 0 15px 0;
  padding:0 0 0 26px;
  background: url(../img/mark.gif) no-repeat left 5px;
}
.head {
  color: #4C904E;
  margin-bottom: 10px;
}
.section {
  width:500px;
  margin:2em auto 0 auto;
}
footer {
  padding-top: 10px;
  border-top: 2px solid #4C904E;
  text-align: center;
}

f:id:yachin29:20160319031856j:plain

 

薬玉文様（くすだまもんよう）

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

© 2016 Historical Japan

画像素材
http://yachin29.com/japanese-img.zip

ソースコード

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

スタイルシート

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

body, div, h1, p, ul, li, footer {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
body {
  background: #000000 url(../img/bg.gif);
  background-color: #FFFFFF;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.6;
}
#container {
  width: 620px;
  height:440px;
  border: 15px solid #000000;
  background: #000000 url(../img/image.jpg) no-repeat right bottom;
  margin: 50px auto 0;
}
h1 {
  width: 280px;
  color: #E4D669;
  font-size: 20px;
  margin: 0 0 20px 16px;
  padding-top: 15px;
}
h1 span {
  font-size: 16px;
}
p {
  width: 280px;
  color: #FFFFFF;
  margin-left: 16px;
  line-height: 1.8;
}
footer p {
  font-size: 14px;
  color: #999999;
  margin-top: 80px;
  text-align: right;
  letter-spacing: 2px;
}