2017年5月27日土曜日

開発環境

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 コメント:

コメントを投稿

Comments on Google+: