基本的なCSS
よく使う基本的なCSSをまとめてみた。
【width height】
これは要素の高さと幅を指定することができる。
<div class="box">
</div>
.box {
background-color: black;
width: 100px;
heoght: 300px;
}
【margin】
これは要素間の余白の調整の際に使用する。
<div class="box1">
</div>
<div class="box2">
</div>
.box1 {
background-color: silver;
width: 300px;
height: 300px;
margin-bottom: 30px;
}
.box2 {
background-color: red;
width: 300px;
height: 300px;
}
【padding】
これは要素内の余白の調整の際に使用する。
<button>
hello
</button>
button {
background-color: bule;
padding: 100px 300px;
}
【border】
これは上で書いたmarginとpaddingの間にある境界線のこと。要素の外枠みたいな。
<button>
hello
</button>
button {
background-color: blue;
padding: 100px 300px;
border: 2px solid red;
}
【border-redius】
これは上で書いたborderの形状を変更できる。
button {
background-color: blue:
padding: 100px 300px;
border: 2px solid red;
border-radius: 30px;
}
【font-size】
これはそのままで文字の大きさを指定する。
<p>
hello
</p>
p {
font-size: 200px;
}
【font-weight】
これは文字の太さを指定する。
p {
font-size: 200px;
font-weiht: bold;
}
【font-style】
これは文字の種類を指定する。
p {
font-size: 200px;
font-weight: bold;
font-style: italic;
}
【background】
これは上で何回か出てきているが、要素の背景の色を指定できる。
<button>
hello
</button>
button {
background-color: blue;
padding: 100px 300px;
}
【display】
これはdisplay: block;とdisplay: inkine-block;があり前者は要素を縦並びに、後者は要素を横並びにする際に使用する。
<span>
hello
</span>
<span>
hello
</span>
<span>
hello
</span>
span {
display: block;
font-size: 30px;
}
（spanは元々はインライン要素）
