2013-07-14

復習(3)　画像と背景画像

Q16

A16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A16</title>
<link rel="stylesheet" href="css/Q16.css" media="all">
</head>

<body>
<h1>Background Design</h1>
<p>Sharing your digital photos with family and friends is such an easy thing to do these days.</p>
</body>
</html>

body,h1,p{
  mardin:0;
  padding:0;
}
body{
  font-family:
    "Hiragino Kaku Gothic Pro",
    Meiryo,
    sans-serif;
  font-size:24px;
  line-height:1.5em;
  color:white;
  background :gray url(../img/20130713232008.gif) repeat-y 80%;}

Q17

A17

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A17</title>
<link rel="stylesheet" href="css/Q17.css" media="all">
</head>
<body>
<p><img src="img/photo.gif" width="120px" height="72px" alt"写真">テキストの位置を指定します</p>
</body>
</html>

body{
  mardin:0;
  padding:0;
}
p{
  font-family:
    "Hiragino Kaku Gothic Pro",
    Meiryo,
    sans-serif;
    vertical-align:top;
}

Q18

A18

Q19

A19

Q20

A20

2013-07-13

復習(2)　文字と背景

Q08

使用している要素が、h1、h2、h3、ｐ、ul、li、img の場合のリセットCSSを記述しなさい。

A08

<style>
body,h1,h2,h3,p,ul,li,img{
  margin: 0;
  padding: 0;
}
</style>

Q09

bodyを、プロパティ（文字サイズ:16px、文字色:#333333、書体:ゴシック体、行送り:1.5）で指定しなさい。

A09

<style>

body{
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;  
  font-size:16px;
  color: #333333;
  line-height:1.5;
}

</style>

Q10

bodyの背景色が「#3366CC」のとき、h1が白色で表示されるよう指定しなさい。

A10

<style>
body{
  background-color:#3366CC;
}

h1{
  color:#FFF;
} 
</style>

Q11

リンクにマウスが乗った時に文字がオレンジ色になるよう指定しなさい。（訪問済みなどの設定は適宜）

A11

<head>
<meta charset="UTF-8">
<title>Q11</title>
<style>

body,dl,dt,dd,a{
  color: #000000;
  margin: 0;
  padding: 0;
}

a:link{
  color: lightblue;
}

a:hover{
  color: orange;
}

a:visited{
  color: lightblue;
}

a:active{
  color: red;
}

</style>
</head>

<body>
<dl>
<dt>お問い合わせはこちらになります。</dt>
<dd><a href="#">http://www.felica.co.jp</a></dd>
</dl>
</body>

Q12

ボタンのように機能するリンクを設定しなさい。

A12

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q12</title>
<style>

body,ul,li,a{
  color: #FFF;
  margin: 0;
  padding: 0;
  text-decoration: none;
  }

body{
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;  
  font-size:16px;
  line-height:1.5; 
}

ul{
background-color: skyblue;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
list-style: none;
width: 15em;
 margin:50px 0 0 200px ;
}

li{
border-bottom: 5px solid white;
padding-left: 1em; 
}

a:active{
  color: black;
}

li:hover{
  background-color: orange;
}

</style>
</head>

<body>
<ul>
<li><a href="#">a-link-skyblue</a></li>
<li><a href="#">a-visited-turquoise</a></li>
<li><a href="#">a-hover-coral</a></li>
<li><a href="#">a-active-lawngreen</a></li>
</ul>
</body>
</html>

Q13

枠線を設定しなさい。

A13

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q13</title>
<style>

body,ul,li{
  margin: 0;
  padding: 0;
  list-style:none;
}

body{
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;  
  font-size:24px;
  line-height:1.5; 
  margin:50px 0 0 50px;
}

li#a{
  border: 1px solid gray;
  width: 550px;
  margin-bottom:5px;
}

li#b{
  border: 3px solid gray;
  width: 546px;
  margin-bottom:5px;
}

li#c{
  border: 1px solid red;
  width: 550px;
  margin-bottom:5px;
}

li#d{
  border: 1px dotted black;
  width: 550px;
  margin-bottom:5px;
}

li#e{
  border-top: 2px solid green;
  border-right: 1px dotted green;
  border-bottom: 1px dotted green;
  border-left: 5px solid green;
  width:546px;
  margin-bottom:5px;
}

li#f{
  border-top: 2px solid blue;
  border-right: none;
  border-bottom: 2px double blue;
  border-left: 1px solid blue;
  width:551px;
  margin-bottom:5px;
}


</style>
</head>

<body>
<ul>
<li id="a">テキストの囲みを表現したい[標準]</li>
<li id="b">テキストの囲みを表現したい[線の太さ]</li>
<li id="c">テキストの囲みを表現したい[線のカラー]</li>
<li id="d">テキストの囲みを表現したい[線のスタイル]</li>
<li id="e">テキストの囲みを表現したい[複数の指定]</li>
<li id="f">テキストの囲みを表現したい[複数の指定]</li>
<ul>
</body>
</html>

Q14

文字を設定しなさい。

A14

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q14</title>
<style>

body,ul,li{
  margin: 0;
  padding: 0;
  list-style:none;
}

body{
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;  
  font-size:16px;
  line-height:1.5; 
  margin:50px 0 0 50px;
}

li#a{
  font-size: 100%;
  margin-bottom:5px;
}

li#b{
  font-size: 1em;
  margin-bottom:5px;
}

li#c{
   font-size: 16px;
  margin-bottom:5px;
}

li#d{
    font-size: medium;
  margin-bottom:5px;
  padding-bottom: 15px;
  border-bottom:2px solid gray;
}

li#e{
   font-size: 200%;
  margin-bottom:5px;
}

li#f{
  font-size: 2em;
  margin-bottom:5px;
}

li#g{
  font-size: 32px;
  margin-bottom:5px;
}

li#h{
  font-size: xx-large;
  margin-bottom:5px;
}

</style>
</head>
<body>
<ul>
<li id="a">アクセシビリティに配慮した文字指定をしたい[100％]</li>
<li id="b">アクセシビリティに配慮した文字指定をしたい[1em]</li>
<li id="c">アクセシビリティに配慮した文字指定をしたい[16px]</li>
<li id="d">アクセシビリティに配慮した文字指定をしたい[medium]</li>
<li id="e">アクセシビリティに配慮した文字指定をしたい[200%]</li>
<li id="f">アクセシビリティに配慮した文字指定をしたい[2em]</li>
<li id="g">アクセシビリティに配慮した文字指定をしたい[32px]</li>
<li id="h">アクセシビリティに配慮した文字指定をしたい[xx-large]</li>
<ul>
</body>
</html>

Q15

行間を設定しなさい。

A15

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>A15</title>
<link rel="stylesheet" href="css/Q15.css" media="all">
</head>

<body>
<p id="narrow">複数行が文章の一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報を詰め込む事ができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。
</p>

<hr>

<p id="normal">複数行が文章の一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報を詰め込む事ができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。
</p>

<hr>

<p id="wide">複数行が文章の一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報を詰め込む事ができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりしたレイアウトになりますが、広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。
</p>

</body>
</html>

/*reset*/

body p{
  margin:0;
  padding:0;
}

/*style*/

#narrow{
  padding:10px 10px 10px 15px;
  margine:0 0 15px 5px;
  border:1px solid;
  line-height:0.9em;
}


#normal{
  padding:10px 10px 10px 15px;
  margine:0 0 15px 5px;
  border:1px solid;
  line-height:1.25em;
}

#wide{
  padding:10px 10px 10px 15px;
  margine:0 0 15px 5px;
  border:1px solid;
  line-height:1.5em;
}

2013-07-12

復習(1)　HTML文書構造

Q01

DTD HTML5で基本構造を記述しなさい。

A01

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>A01 [DTD HTML5で基本構造を記述]</title>
</head>
<body>
<h1>A01 [DTD HTML5で基本構造を記述]</h1>
</body>
</html>

Q02

池袋で猫カフェ「CatCafé」を開いてお客さんを呼びたいと思います。適切なtitle要素を記述しなさい。

A02

<title>池袋　猫カフェ | CatCafe</title>

Q03

以下の内容をマークアップして適切な文書構造にしなさい。

CatCaféのにゃんこ紹介
●あたる（白キジトラ・オス）
目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。段ボール箱のかどや柱で爪とぎをするのが大好き。
［写真：幅200px 高さ200px］
特徴
大きな目と耳。まがったしっぽ。
性格
マイペース。

A03

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>
</head>
<body>
<h1>CatCaf&#233;のにゃんこ紹介</h1>

<h2>あたる<small>（白キジトラ・オス）</small></h2>
<p>
目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。
<br>性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。
</p>
<img src="kijitora.jpg" width=200 height=200 alt="キジトラ">
<dl>
<dt>特徴</dt>
<dd>大きな目と耳。まがったしっぽ。</dd>
</dl>

<dl>
<dt>性格</dt>
<dd>マイペース。</dd>
</dl>

</body>
</html>

Q04

Q03の内容に「もっと見る→」というテキストを追加して、クリックしたら「cat」フォルダー内の「ataru.html」に遷移するように記述しなさい。

A04

<body>
<dl>
<dt>性格</dt>
<dd>マイペース。</dd>
</dl>

<p><a href="cat/ataru.html">もっと見る→</a></span></p>
</body>

Q05

にゃんこの紹介を表組みで作りたいと思います。（大きさは適宜）
「名前」「オス・メス」「特徴」「性格」「写真」という項目で、
「あたる」を例に表示させなさい。

A05

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あたる</title>
</head>
<body>
<table width= 400 border= 1>
<tr><th>名前</th><td>あたる</td></tr>
<tr><th>オス・メス</th><td>オス</td></tr>
<tr><th>特徴</th><td>大きな目と耳<br>まがったしっぽ</td></tr>
<tr><th>性格</th><td>マイペース</td></tr>
<tr><th>写真</th><td><img src="kijitora.jpg" alt="あたる"></td></tr>
</table>
</body>
</html>

Q06

以下の内容をマークアップして正しく表示させなさい。

Copyright © CatCafé. All Rights Reserved.

A06

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>

<style>

#footer{
  border-top:1px solid gray;
  color:gray;
  text-align:center;
}

</style>
</head>

<body>

<div id="footer">
<p><small>Copyright &#169; CatCaf&#233;. All Rights Reserved.</small></p>
</div><!--/#footer-->
</body>
</html>

Q07

HTMLドキュメントと同一階層にある「cssフォルダー」内にある、「style.css」を読み込む記述をしなさい。

A07

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>池袋　猫カフェ | CatCafe</title>
<link rel="stylesheet" href="cssフォルダ/style.css">
</head>

2013-07-02

７月２日講義　＜復習＞

本日から本格的にwebサイト制作科の授業が開始。

講義内容を振り返りつつまとめていきます。