CSS基礎構文-第5章-ビデオ1
CSS基礎構文-第5章-ビデオ2
CSS基礎構文-第5章-ビデオ3
CSS基礎構文-第5章-ビデオ4
CSS基礎構文-第5章-ビデオ5
CSS基礎構文-第5章-ビデオ6
ボックスモデルとは？
■CSS基礎構文-第5章-ビデオ2
borderプロパティを使ってみましょう！
■CSS基礎構文-第5章-ビデオ3
width,heightプロパティを使ってみましょう！
■CSS基礎構文-第5章-ビデオ4
inline-blockを指定しましょう！
■CSS基礎構文-第5章-ビデオ5
marginを使っていましょう！
■CSS基礎構文-第5章-ビデオ6
パーセントで値を指定しましょう！
■MDN CSSリファレンス
https://developer.mozilla.org/ja/docs/Web/CSS
「ブラウザ」と「エディタ」は下記のWebページからダウンロードできます。
■Google Chrome （ウェブブラウザ）
https://www.google.com/intl/ja_ALL/chrome/
■Atom （テキストエディタ）
https://atom.io/
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title></title>
<style>
/* .text {
border: 1px solid #333;
display: inline-block;
padding: 20px;
width: 300px;
height: 200px;
} */
/* .text {
display: inline-block;
border: 1px solid #333;
padding: 20px;
margin: 20px;
} */
.box1 {
background: red;
width: 300px;
height: 200px;
}
.box2 {
background: blue;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<!– <div class=”text”>
サタデーズ
</div> –>
<!– <div class=”text”>
サタデーズ
</div>
<div class=”text”>
サタデーズ
</div>
<div class=”text”>
サタデーズ
</div> –>
<div class=”box1″>box1
<div class=”box2″>box2</div>
</div>
</body>
</html>
