復習(2)　文字と背景 - 東京脱出日記　＜WEB勉強篇＞

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;
}