文字の色を変えるには、「color」プロパティを使います。「color: #ff77ff;」のように、16進数のカラーコードで色を指定します。また、主要な色であれば、redなどのように色を指定することができます。
🔸 HTML
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
🔹 CSS
h1{
color: red;
}
h2{
color: #00FF00;
}
⭐ 表示結果
文字の大きさを指定するには、font-sizeプロパティを用います。font-sizeは「○○px」のように、ピクセルという単位で文字サイズを指定します。
🔸 HTML
<h1>牛タンとは</h1>
<p>牛の舌部が食用に供される場合に用いられる名称</p>
🔹 CSS
h1{
font-size: 20px;
}
p{
font-size: 30px;
}
⭐ 表示結果
背景色を指定するには、background-colorプロパティを用います。色の指定の方法はcolorプロパティを同様です。
🔸 HTML
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
🔹 CSS
h1{
background-color: #ffff00;
}
h2{
background-color: #ff00ff;
}
⭐ 表示結果
要素に余白を作りたい場合は、paddingを用います。「padding:○○px」とすることで、上下左右すべての方向にその大きさの余白が追加されます。
※ ある方向のみ余白を指定したい場合
上に余白を作る場合：「padding-top: ○○px」
下に余白を作る場合：「padding-bottom: ○○px」
左に余白を作る場合：「padding-left: ○○px」
右に余白を作る場合：「padding-right: ○○px」
※ まとめて指定する方法
paddingの値を４つ、スペース区切りで指定すると、「上」「右」「下」「左」の順番で指定されます。
例：padding: 20px 20px 0px 30px;
🔸 HTML
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
🔹 CSS
h1{
background-color: #ffff00;
padding: 40px;
}
h2{
background-color: #ff00ff;
padding-left: 30px;
}
⭐ 表示結果
要素に枠線をつけるには、borderプロパティを使用します。下のように、枠線の「太さ」「種類」「色」を指定します。ある方向のみ余白を指定したい場合は、paddingと同様に、border-top、border-bottomのように指定します。
🔸 HTML
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
🔹 CSS
h1{
border:3px solid red;
}
h2{
border-bottom:5px solid #FF00FF;
}
⭐ 表示結果
paddingはborderの内側に余白を作りますが、marginはborderの外側に余白を作ります。
🔸 HTML
<h1>paddingは枠線の中に余白を作る</h1>
<h2>marginは枠線の外に余白を作る</h2>
🔹 CSS
h1{
border:3px solid red;
padding: 70px;
}
h2{
border:3px solid #FF00FF;
margin: 70px;
}
⭐ 表示結果
要素を中央揃えにしたり、左端揃えにするには、tect-alignプロパティを使用します。
中央揃えの場合 「text-align: center;」
左揃えの場合 「text-align: left;」
右揃えの場合 「text-align: right;」
🔸 HTML
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
<h3>これはh2です。</h3>
🔹 CSS
h1{
text-align: center;
}
h2{
text-align: left;
}
h3{
text-align: right;
}
⭐ 表示結果