Web制作課題Q15

課題

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>復習（2）文字と背景Q15</title>
<a link href="style.css">
</head>
<body>
<div id="sample1">
<p>複数行の文章がひとつのかたまりとして表示されている場合、行と行の間隔を「行間｝と見なします。行間が狭いとたくさんの情報量を詰め込むとができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカにみえてしまうことがあります。見栄えだけではなく可能性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。</p>
</div>
<hr>
<div id="sample2">
<p>複数行の文章がひとつのかたまりとして表示されている場合、行と行の間隔を「行間｝と見なします。行間が狭いとたくさんの情報量を詰め込むとができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカにみえてしまうことがあります。見栄えだけではなく可能性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。</p>
</div>
<hr>
<div id="sample3">
<p>複数行の文章がひとつのかたまりとして表示されている場合、行と行の間隔を「行間｝と見なします。行間が狭いとたくさんの情報量を詰め込むとができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、広すぎてスカスカにみえてしまうことがあります。見栄えだけではなく可能性にも影響する重要なものですが、CSSでは「行間」ではなく「行高」として扱います。</p>
</div>
</body>
</html>

CSS

@charset"UTF-8";
body.div {
  margin: 0;
  padding: 0;
 }
#sample1 {
 width:500px;
 height:auto;
 border:1px solid #333333;
 line-height:1;
}
#sample2 {
 width:500px;
 height:auto;
  border:1px solid #333333;
 line-height:1;
line-height:1.5;
}
#sample3{
 width:500px;
 height:auto;
  border:1px solid #333333;
 line-height:1;
line-height:2;
}