3連休の課題(2) - ichisemasashi's blog

[CSS]復習(2)文字と背景

A08

>||

@charset "UTF-8";

/* リセット */
body,h1,h2,h3,p,ul,li,img {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}

||<

A09

>||

body {
color: #333333;
font-size: 16px;
font-family: "ＭＳゴシック";
line-height: 1.5em;
}

||<

A10

>||

body {
background-color: #3366CC;
}
h1 {
color: #FFFFFF;
}
||<

A11

>||

a:hover {
color: #FF8C00;
}

||<

A12

>||

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>TITLE</title>
<style>
/* reset */
body, ul, li, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #FFFFFF;
}
li {
width: 180px;
line-height: 20px;
margin: 5px;
background-color: #87CEEB;
}
li a {
display: block;
padding: 10px;
}
li a:hover {
background-color: #FA8072;
}
</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>

||<

A13

>||

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>TITLE</title>
<style>
/* reset */
body, ul, li {
margin: 0;
padding: 0;
}
li {
width: 330px;
margin: 10px;
padding: 10px;
}
li#n00 {
border: 1px solid #000000;
}
li#n01 {
width: 327px;
border: 3px solid #808080;
}
li#n02 {
border: 1px solid #FF0000;
}
li#n03 {
border: 1px dotted #000000;
}
li#n04 {
width: 310px;
border-top: 5px solid #008000;
border-left: 20px solid #008000;
border-right: 1px dotted #008000;
border-bottom: 1px dotted #008000;
}
li#n05 {
border-top: 3px solid #0000FF;
border-left: 1px solid #0000FF;
border-bottom: 3px double #0000FF;
}

</style>
</head>
<body>
<ul>
<li id="n00">テキストの囲みを表現したい[標準]</li>
<li id="n01">テキストの囲みを表現したい[線の太さ]</li>
<li id="n02">テキストの囲みを表現したい[線のカラー]</li>
<li id="n03">テキストの囲みを表現したい[線のスタイル]</li>
<li id="n04">テキストの囲みを表現したい[複数の指定]</li>
<li id="n05">テキストの囲みを表現したい[複数の指定]</li>
</ul>
</body>
</html>

||<

A14

>||

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>TITLE</title>

</ul>
<hr>

<ul>

<li>アクセシビリティに配慮した文字指定をしたい[200%]</li>
<li>アクセシビリティに配慮した文字指定をしたい[2em]</li>
<li>アクセシビリティに配慮した文字指定をしたい[32px]</li>
<li>アクセシビリティに配慮した文字指定をしたい[xx-large]</li>
</ul>
</body>
</html>

||<

A15

>||

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>TITLE</title>
<style>
/* reset */
body, ul, li {
margin: 0;
padding: 0;
font-family:
 "Hiragino Kaku Gothic ProN",
 Meiryo,
 sans-serif;
}
body {
width: 520px;
}
#str00 {
line-height: 16px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
border: 1px solid #000000;
}
#str01 {
line-height: 25px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
border: 1px solid #000000;
}
#str02 {
line-height: 32px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
border: 1px solid #000000;
}

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