2
ボックスの視覚整形
★relative 相対配置
h1 {
color: red;
font-size: 70px;
text-align: center;
} h2 {
position: relative;
top: -125px;
padding: 10px;
color: white;
background-color: black;
text-align: center;
}
<h1>About<br />CSS</h1>
<h2>CSS に関する詳細説明 </h2>
<h3> はじめに </h3>
<p>CSS（スタイルシート）は、web ページの
「表現を」をコントロールするための言語です。</p>
About
CSS
CSS に関する詳細説明
CSS に関する詳細説明
はじめに
CSS（スタイルシート）は、web ページの
「表現を」をコントロールするための言語です。
★position 絶対配置
40px
包含ブロックボックス
h1 {
color: red;
font-size: 50px;
} 200px
h2 {
CSS に関する
position: absolute;
詳細説明
top: 40px;
left: 200px;
width: 180px;
padding: 10px;
color: white;
はじめに
CSS に関する
background-color: black;
詳細説明
CSS（スタイルシート）は、web
ページの
text-align: center;
「表現を」をコントロールするための言語です。
}
About
CSS
<h1>About<br />CSS</h1>
<h2>CSS に関する詳細説明 </h2>
<h3> はじめに </h3>
<p>CSS（スタイルシート）は、web ページの
「表現を」をコントロールするための言語です。</p>