96's blog

WEBサイト制作科 6ヶ月コース

復習(2)文字と背景

Q08

  • 使用している要素が、h1、h2、h3、p、ul、li、img の場合のリセットCSSを記述しなさい
h1,h2,h3,p,ul,li,img {
  margin: 0;
  padding: 0;
}

Q09

  • bodyを、プロパティ(文字サイズ:16px、文字色:#333333、書体:ゴシック体、行送り:1.5)で指定しなさい
body {
  font-size: 16px;
  color: #333333;
  font-family;
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
}

Q10

  • bodyの背景色が「#3366CC」のとき、h1が白色で表示されるよう指定しなさい
body {
  background-color: #3366cc;
}
h1 {
  color: #ffffff;
}

Q11

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

f:id:web-mind:20130713144154j:image

a:hover {
  color: #ffa500;
}
a:active {
  color: #ffa500;
}

Q12

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

f:id:web-mind:20130713145011j:image

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul,li {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  width: 200px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
li {
  font-weight: bold;
  border-bottom: 2px solid #ffffff;
}
li a{
  display: block;
  padding: 3px 0 3px 8px;
}
li a:link{
  color: #ffffff;
  background-color: skyblue;
}
li a:visited{
  background-color: turquoise;
}
li a:hover{
  background-color: coral;
}
li a:active{
  background-color: lawngreen;
}

Q13

  • 枠線が以下のように表示するように設定しなさい

f:id:web-mind:20130713173435j:image

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
div {
  margin: 0;
  padding: 0;
}
div {
  font-size: 14px;
  font-weight: bold;
  width: 348px;
  border: 1px solid #808080;
  margin-bottom: 10px;
  padding: 10px 0 10px 10px;
}
.weight{
  width: 342px;
  border-width: 4px;
}
.color{
  border-color: #ff0000;
}
.style{
  border-style: dotted;
}
.multi-specify1{
  width: 339px;
  border-top: 4px solid #228b22;
  border-right: 1px dotted #228b22;
  border-bottom: 1px dotted #228b22;
  border-left: 10px solid #228b22;
}
.multi-specify2{
  width: 349px;
  border-top: 2px solid #4682b4;
  border-right: none;
  border-bottom: 3px double #4682b4;
  border-left: 1px solid #4682b4;
}

Q14

  • 文字が以下のように表示するように設定しなさい

f:id:web-mind:20130713174212j:image

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
	sans-serif;
}
p {
  margin: 0;
  padding: 0;
}
.f100{
  font-size: 100%;
}
.f1em{
  font-size: 1em;
}
.f16px{
  font-size: 16px;
}
.fmedium{
  font-size: mideum;
}
.f200{
  font-size: 200%;
}
.f2em{
  font-size: 2em;
}
.f32px{
  font-size: 32px;
}
.fxx-large{
  font-size: xx-large;
}

Q15

  • 行間が以下のように表示するように設定しなさい(文字は入力すること)

f:id:web-mind:20130713174621j:image

p,hr {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
	Meiryo,
	sans-serif;
}
p {
  width: 518px;
  font-weight: bold;
  border: 1px solid #708090;
  margin: 8px 0;
  padding: 20px 10px;
}
.section1{
  line-height: 1;
}
.section2{
  line-height: 1.5;
}
.section3{
  line-height: 2;
}
hr {
  width: 540px
}
<pclass="section1">
複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。
行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。
逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、
広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する
重要なものですが、CSSでは「行間」ではなく「行高」として扱います。
</p>
<hr>
<pclass="section2">
複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。
行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。
逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、
広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する
重要なものですが、CSSでは「行間」ではなく「行高」として扱います。</p>
<hr>
<pclass="section3">
複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。
行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。
逆に行間を広くすると余白が確保されてゆったりとしたレイアウトになりますが、
広すぎてスカスカに見えてしまうことがあります。見栄えだけではなく可読性にも影響する
重要なものですが、CSSでは「行間」ではなく「行高」として扱います。
</p>

※ブログのレイアウトの都合により、適宜改行しています。