開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 11.(Layout and Positioning: Arranging Elements)、EXERCISE: LOOK MA, NO CSS!(No. 7868) を取り組んでみる。
EXERCISE: LOOK MA, NO CSS!(No. 7868)
-
CSS適用
比較用 -
CSS 非適用
sidebar比較用
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample4.css">
</head>
<body>
<ul>
<li>
<p>CSS適用</p>
<div id="div1">
<div id="sidebar0">
sidebar
</div>
</div>
<div id="div0">
比較用
</div>
</li>
<li>
<p>CSS 非適用</p>
<div>
<div>
sidebar
</div>
</div>
<div>
比較用
</div>
</li>
</ul>
</body>
</html>
CSS(Stylesheet)
#sidebar0 {
background: #efe5d0;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
/* float: right */
}
#div0 {
width: 330px;
background-color: red;
text-align: center;
}
0 コメント:
コメントを投稿