課題2 - イチから学ぶWeb制作

Q09　文字レイアウト

@charset "UTF-8";

body{
  font-size:16px;
  color:#333333;
  font-family:
    sans-serif;
  line-height:1.5;
}

Q10 文字と背景の色指定

body{
  background-color:#3366CC;
}

h1{
  color:#FFFFFF;
}

Q11 リンクの色

@charset "UTF-8";

p a:link{
  color:#00CCFF;
}
p a:visited{
  color:#003366;
}
p a:hover{
  color:#FF6600;
}
p a:active{
  color:#CC0000;
}

Q12　ボタン　
HTML

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

CSS

@charset "UTF-8";

body,div,ul,li,a{
  margin:0;
  padding:0;
  font-size:20px;
  font-family:
    "Hiragino Kaku Gothic ProN",
     Meiryo,
     sans-serif;
}

#nav{
  margin:50px;
}

#nav ul{
  list-style-type:none;
  width:200px;
  height:auto;
  background-color:skyblue;
  
}

#nav li{
  
  border-bottom:2px solid #FFFFFF;
}

#nav li a{
  padding:5px;
  text-decoration:none;
  display:block;
    color:#FFFFFF;
}

#nav a:hover{
  background-color:#FF6600;
}

Q13　枠線
HTML

<body>
<p class="normal">テキストの囲みを表現したい[標準]</p>
<p class="futosa">テキストの囲みを表現したい[線の太さ]</p>
<p class="color">テキストの囲みを表現したい[線のカラー]</p>
<p class="style">テキストの囲みを表現したい[線のスタイル]</p>
<p class="plural1">テキストの囲みを表現したい[複数の指定]</p>
<p class="plural2">テキストの囲みを表現したい[複数の指定]</p>
</body>

CSS

@charset "UTF-8";

body,p{
  font-size:20px;
  font-family:
    "Hiragino Kaku Gothic ProN",
     Meiryo,
     sans-serif;
}

.normal{
  border:1px solid #333333;
}
.futosa{
  border:5px solid #333333;
}
.color{
  border:1px solid #FFCC00;
}
.style{
  border:1px dotted #333333;
}
.plural1{
  border-top:3px solid #333333;
  border-right:1px dotted #333333;
  border-bottom:1px dotted #333333;
  border-left:5px solid #333333;
}
.plural2{
  border-top:3px solid #0000FF;
  border-left:1px solid #0000FF;
  border-bottom:1px double #0000FF;
}

Q14　文字指定
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Q14.css">
<title>
</title>
</head>
<body>
<p class="normal1">アクセシビリティに配慮した文字指定をしたい[100%]</p>
<p class="normal2">アクセシビリティに配慮した文字指定をしたい[1em]</p>
<p class="normal3">アクセシビリティに配慮した文字指定をしたい[16px]</p>
<p class="normal4">アクセシビリティに配慮した文字指定をしたい[medium]</p>
<hr>
<p class="large1">アクセシビリティに配慮した文字指定をしたい[200%]</p>
<p class="large2">アクセシビリティに配慮した文字指定をしたい[2em]</p>
<p class="large3">アクセシビリティに配慮した文字指定をしたい[32px]</p>
<p class="large4">アクセシビリティに配慮した文字指定をしたい[xx-large]</p>
</body>
</html>

CSS

@charset "UTF-8";

body{
  font-family:
    "Hiragino Kaku Gothic ProN",
     Meiryo,
     sans-serif;
}

.normal1{
  font-size:100%;
}
.normal2{
  font-size:1em;
}
.normal3{
  font-size:16px;
}
.normal4{
  font-size:medium;
}
.large1{
  font-size:200%;
}
.large2{
  font-size:2em;
}
.large3{
  font-size:32px;
}
.large4{
  font-size:xx-large;
}

Q15 行間
HTML

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

CSS

@charset "UTF-8";

body{
  font-family:
    "Hiragino Kaku Gothic ProN",
     meiryo,
     sans-serif;
}

p{
  padding:30px;
  border:1px solid #333333;
}

.small{
  line-height:1.0;
}
.normal{
  line-height:1.5;
}
.long{
  line-height:2.0;
}