CSS(要素一覧)

① 文字の色を変える color

 文字の色を変えるには、「color」プロパティを使います。「color: #ff77ff;」のように、16進数のカラーコードで色を指定します。また、主要な色であれば、redなどのように色を指定することができます。

🔸 HTML

<h1>これはh1です。</h1>

<h2>これはh2です。</h2>

🔹 CSS

h1{

color: red;

}

h2{

color: #00FF00;

}

表示結果

② 文字の大きさを変える font-size

 文字の大きさを指定するには、font-sizeプロパティを用います。font-sizeは「○○px」のように、ピクセルという単位で文字サイズを指定します。

🔸 HTML

<h1>牛タンとは</h1>

<p>牛の舌部が食用に供される場合に用いられる名称</p>

🔹 CSS

h1{

font-size: 20px;

}

p{

font-size: 30px;

}


表示結果

③ 背景色を変える background-color

 背景色を指定するには、background-colorプロパティを用います。色の指定の方法はcolorプロパティを同様です。

🔸 HTML

<h1>これはh1です。</h1>

<h2>これはh2です。</h2>

🔹 CSS

h1{

background-color: #ffff00;

}

h2{

background-color: #ff00ff;

}


表示結果

④ 余白を入れる padding

 要素に余白を作りたい場合は、paddingを用います。「padding:○○px」とすることで、上下左右すべての方向にその大きさの余白が追加されます。

※ ある方向のみ余白を指定したい場合

上に余白を作る場合:「padding-top: ○○px

下に余白を作る場合:「padding-bottom: ○○px

左に余白を作る場合:「padding-left: ○○px

右に余白を作る場合:「padding-right: ○○px

※ まとめて指定する方法

paddingの値を4つ、スペース区切りで指定すると、「上」「右」「下」「左」の順番で指定されます。

例: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

 要素に枠線をつけるには、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;

}


表示結果

⑥ 余白を入れる margin

 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;

}


表示結果

⑦ 水平方向を揃える text-align

 要素を中央揃えにしたり、左端揃えにするには、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;

}


表示結果