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

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

CSS復習問題

1カラムの復習

f:id:yachin29:20170821131950p:plain


使用テキスト

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

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

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

使用する画像

f:id:yachin29:20160806123909j:plain

f:id:yachin29:20160806123917j:plain

[f:id:yachin29:20051013134629j:plain


記述例

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Herb Kitchen</title>
<style>
html,body,header,div,footer,h1,h2,p,small,img {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
border: none;
vertical-align: bottom;
}

body {
background: url(img/herb.jpg) no-repeat right top;
}
#container {
width: 800px;
margin: 0 auto;
}
header {
margin-bottom: 20px;
}
h1 {
color: #1EB20B;
font-size: 38px;
letter-spacing: 0.6em;
font-weight: normal;
padding: 40px 0;
}
h2 {
border-left: 10px solid #1EB20B;
padding-left: 30px;
margin-bottom: 20px;
}
#content p {
margin-bottom: 40px;
line-height: 1.5;
}
#content p img {
float: left;
margin-right: 10px;
}
</style>
</head>

<body>
<div id="container">
<header>
<h1>Herb Kitchen</h1>
<p>イタリアの家庭料理のオリジナルレシピを紹介します。</p>
</header>
<div id="content">
<h2>タコのカルパッチョ</h2>
<p><img src="img/food01.jpg" alt="">
たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。<br>
レモン果汁などさわやかな酸味、セロリやかいわれ菜などの香りのある野菜を上手に加えると、塩分を抑えてもおいしいおつまみになります。<br>
たこのうまみを引き立てる、さわやかな青じそペーストはパスタやソテーのソースにも使えて便利な一品です。ニンニクや香草の香りが特長のソースは、素材の味をひき立てるビールや辛口の白ワインにピッタリ!スパークリングワインと合わせて、ちょっぴり気の効いた前菜としてもおすすめです。</p>

<h2>しらすのペペロンチーノ</h2>
<p><img src="img/food02.jpg" alt="">
おうちでのランチはお手軽にすませたいですよね♪かつ、美味しければなおうれしい!今回は、ごはんの友のしらすを使った簡単パスタ、しらすのペペロンチーノをご紹介します。<br>
味付けはしらすの塩気とパスタの茹で汁を使います。ソースをあらかじめ作って茹で上がったパスタを絡めるので失敗知らずですよ。<br>
ペペロンチーノは基本の素材がダイレクトに出ます。スパゲティ、オイル、塩、にんにく、唐辛子。全てが上質だと出来上がりも素晴らしく違いますよ</p>
</div>
<footer>
<p><small>&copy; Herb Kitcten Co.,Ltd.</small></p>
</footer>
</div>
</body>
</html>

1カラムの復習その2

f:id:yachin29:20160319030429j:plain


使用するテキスト

Computer Technology Groups

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

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

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

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

 © Computer Technology Groups. All rights reserved.

使用する画像
f:id:yachin29:20170810005218g:plain
f:id:yachin29:20170810005230g:plain
f:id:yachin29:20170810005245g:plain


記述例


スタイルシート


1カラムの復習3


f:id:yachin29:20170809163827p:plain


画像は海の写真を自身で用意

使用するテキスト

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、 マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、 そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、 特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。

観光スポット

「川平(かびら)湾」
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。

「宮良川(みやらがわ)のヒルギ林」
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。

「底地(すくじ)ビーチ 」
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。

「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。

「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。

「マエザトビーチ」
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。

「唐人墓(とうじんばか)」
石垣空港より富崎観音堂方面へ車で15分
19世紀中頃に、中国のアモイからカリフォルニア行きの船に乗せられて死んでしまった128人の中国の人を悼み、琉球特有のお墓です。

「明石パラワールド」
石垣市街地より車で45分
島の北方で水牛などの牧場が広がる地域に1997年にできました。素晴らしい景観を見ながら、 パラグライダーを楽しむことができます。


記述例

<!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>石垣島観光ガイド</h1>
</header>
<div id="content">
  <p class="lead"> 石垣島八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。<br>
  亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。
</p>
  <h2>観光スポット</h2>
  <h3>「 川平(かびら)湾」</h3>
  <h4>石垣港から車で約20分</h4>
  <p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>

  <h3>「宮良川(みやらがわ)のヒルギ林」</h3>
  <h4>石垣港からバスで30分宮良橋で下車</h4>
  <p>巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。</p>
  <h3>「底地(すくじ)ビーチ 」</h3>
  <h4>川平湾から車で約10分</h4>
  <p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
  <h3>「フサキビーチ」</h3>
  <h4>石垣港からバスで30分、宮良橋下車</h4>
  <p>島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。
</p>

<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。
</p>
<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div>
</div><!--/#container-->

</body>
</html>

スタイルシート

@charset "utf-8";
/*  リセットCSS  */
html,body,header,div,h1,h2,h3,h4,p{
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  font-size:16px;
}
body{
  background:#D5EBFF;
}
a{
  text-decoration:none;
}

/*  レイアウト  */
#container{
  width:768px;
  background:#FFF;
  margin:10px auto;
  padding:16px;
}
header{
  color:#FFF;
  margin-bottom:16px;
  width:768px;
  height:160px;
  background:url(img/header.jpg) no-repeat left top;
}
h1{
  font-size:28px;
  color:#FFF;
  padding: 110px 0 0 520px;
}
p.lead{
  font-size:14px;
  line-height:1.5em;
  margin-bottom:16px;
  text-indent:1.0em;
}
h2{
  font-size:20px;
  border-left:6px solid #069;
  margin-bottom:10px;
  text-indent:1.0em;
  margin-bottom:24px;
}
h3{
  font-size:18px;
  border-top:thin dotted #0099FF;
  border-bottom:thin dotted #0099FF;
  background:#D5EBFF;
  font-weight:bold;
  color:#000099;
  margin-bottom:18px;
  padding: 12px 0 10px 10px;
}
h4{
  font-weight:bold;
  color:#09F;
  margin-bottom:16px;
}
p{
  font-size:14px;
  margin-bottom:20px;
  line-height:1.5em;
}

2カラムの復習

f:id:yachin29:20160319031256j:plain

使用するテキスト

provence

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

© provence

使用する画像
http://yachin29.webcrow.jp/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:20160903105730j:plain



使用する画像
http://yachin29.webcrow.jp/pasta-yajima/pasta-img.zip



使用するテキスト(※alt内のテキストは適宜)

パスタとワインの店 atella

concept
pasta
drink
side
access

現在実施中のキャンペーンやお得な情報
Today's Pasta 今日の日替わりパスタ
ペンネアラビアータ(ピリ辛トマトソースのペンネ)

2017.1.20
トマトソースの作成ビデオを公開しました。
2016.12.24
今年も恒例のクリスマス特別コースをお出しします。

©2017 atella all right reserved.


マークアップ記述例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パスタとワインの店 atella</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>パスタとワインの店 atella</h1>
<nav>
<ul>
<li id="concept"><a href="#">concept</a></li>
<li id="pasta"><a href="#">pasta</a></li>
<li id="drink"><a href="#">drink</a></li>
<li id="side"><a href="#">side</a></li>
<li id="access"><a href="#">access</a></li>
</ul>
</nav>
</header>
<div id="content">
<ul>
<li><img src="img/subimage01.jpg" alt=""></li>
<li><img src="img/subimage02.jpg" alt=""></li>
<li><img src="img/subimage03.jpg" alt=""></li>
</ul>
<div id="wrapper">
<h2><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2>
<div class="box today top">
<div id="txt-box">
<h3><img src="img/todaypastaText.png" alt="今日の日替わりパスタ"></h3>
<p>ペンネアラビアータ<br>(ピリ辛トマトソースのペンネ)</p>
</div>
</div>

<p class="info coupon top">クーポン券</p>

<div class="box news">
<h3><img src="img/newsText.png" alt="news"></h3>
<dl>
<dt>2017.8.20</dt>
<dd>トマトソースの作成ビデオを公開しました。</dd>
<dt>2017.7.24</dt>
<dd>今年も恒例の夏の冷製特別コースをお出しします。</dd>
</dl>
</div><!--/.box news-->


<p class="info poster">料理動画のポスター</p>
</div><!--/#wrapper-->
</div><!--/#content-->
<footer>
<p><small>&copy; 2017 atella all right reserved.</small></p>
</footer>
</div><!--/#container-->
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li,dl,dt,dd,header,footer,div,a,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;
}
img {
  border:none;
  vertical-align:bottom;
}


/*レイアウト部分*/
body {
  background:url(img/back.jpg) repeat;
}
#container {
  width:980px;
  margin: 0 auto;
  background:#FFF;
}
header {
  width:100%;
  height:560px;
  background:url(img/mainimage.jpg) no-repeat;
  position:relative;
}
h1 {
  width:149px;
  height:78px;
  background:url(img/logo.png) no-repeat 40px top;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
header nav {
  width:980px;
  height:60px;
  position:absolute;
  bottom:0;
  left:0;
}
header ul {
  overflow:hidden;
}
header li {
  width:196px;
  height:60px;
  float:left;
}
header li a {
  display:block;
  width:100%;
  height:60px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(img/menu_concept.png) no-repeat;
}
header li#pasta a {
  background:url(img/menu_pasta.png) no-repeat;
}
header li#drink a {
  background:url(img/menu_drink.png) no-repeat;
}
header li#side a {
  background:url(img/menu_side.png) no-repeat;
}
header li#access a {
  background:url(img/menu_access.png) no-repeat;
}
header li a:hover {
  opacity:0.6;
}

#content {
  width:930px;
  margin:0 auto;
}
#content ul {
  width:930px;
  overflow:hidden;
  margin-bottom:50px;
}
#content li {
  float: left;
  margin:30px;
}
#wrapper {
  width:870px;
  margin:0 auto 50px;
  overflow:hidden;
}
#wrapper h2 {
  margin-bottom:20px;
}
.box {
  width:560px;
  height:140px;
  margin-right:40px;
  float:left;
}
.info {
  width:270px;
  height:140px;
  float:left;
}
.top {
  margin-bottom:40px;
}
.today {
  background:url(img/todaypasta.jpg) no-repeat left top;
}
#txt-box {
  width:300px;
  text-align:center;
  margin-left:260px;
}
#txt-box h3 {
  padding:20px 0;
}
p.coupon {
  width:270px;
  height:140px;
  background:url(img/coupon.png) no-repeat left top/cover;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
p.poster {
  width:270px;
  height:140px;
  background:url(img/poster.jpg) no-repeat left top/cover;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.news h3 {
  text-align:center;
  padding: 16px 0;
}
.news dl {
  width:100%;
  padding-left:10px;
  box-sizing:border-box;
}
.news dt {
  float:left;
  margin-right:20px;
}
.news dt, .news dd {
  margin-bottom:14px;
}
footer p {
  text-align:center;
  padding:10px 0;
}