開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 9.(The Box Model: Getting Intimate with Elements)、EXERCISE(No. 6307) を取り組んでみる。
EXERCISE(No. 6307)
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
コード(Emacs)
HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="sample3.css">
</head>
<body>
<div id="d0">
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
</div>
<div id="d1">
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
</div>
<div id="d2">
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
</div>
<div id="d3">
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
</div>
</body>
</html>
CSS(Stylesheet)
#d0 {
line-height: 1.9em;
font-style: italic;
color: #444444;
font-family: Georgia;
padding: 50px;
border-color:black;
border-width: 1px;
border-style: solid;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
#d1 {
line-height: 1.9em;
font-style: italic;
color: #444444;
font-family: "Times New Roman";
padding: 50px;
border-color:black;
border-width: 1px;
border-style: solid;
border-radius: 40px;
}
#d2 {
line-height: 1.9em;
font-style: italic;
color: #444444;
font-family: Times;
padding: 50px;
border-color:black;
border-width: 1px;
border-style: solid;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
#d3 {
line-height: 1.9em;
font-style: italic;
color: #444444;
font-family: serif;
padding: 50px;
border-color:black;
border-width: 1px;
border-style: solid;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
}
0 コメント:
コメントを投稿