htmlの中にstyleを作る方法

一つ目の方法は、htmlの中にstyleを作り

bodyから呼び出すという方法です。

styleの中にcssをあらかじめ実装しておき、

後ほどでcssを指定すればcssを実装できます。

このように書き方は、cssの再利用性が上げることが出来るので

おすすめです

<!DOCTYPE html>
<html lang="ja">
<head>
<title>配色一覧</title>
<style>
p.sample1 {color:black; background:#0055A1;}
p.sample2 {color:black; background:#6D6D6D;}

p.sample3 {color:black; background:#944538;}
p.sample4 {color:black; background:#60A234;}

p.sample5 {color:black; background:#8F5B98;}
p.sample6 {color:black; background:#D8738E;}

p.sample7 {color:black; background:#F35C19;}
p.sample8 {color:black; background:#CC0000;}

p.sample9 {color:black; background:#6D6D6D;}
p.sample10 {color:black; background:#4CADC2;}

</style>
</head>

<body>
<h6>配色一覧</h6>

<p class="sample1">
この色は#0055A1の配色です
</p>

<p class="sample2">
この色は#6D6D6Dの配色です
</p>

<p class="sample3">
この色は#6D6D6Dの配色です
</p>

<p class="sample4">
この色は#6D6D6Dの配色です
</p>

<p class="sample5">
この色は#0055A1の配色です
</p>

<p class="sample6">
この色は#D8738Eの配色です
</p>

<p class="sample7">
この色は#6D6D6Dの配色です
</p>

<p class="sample8">
この色は#6D6D6Dの配色です
</p>

<p class="sample9">
この色は#6D6D6Dの配色です
</p>

<p class="sample10">
この色は#6D6D6Dの配色です
</p>

<section>
<style scoped>
h6 {color:#6D6D6D;}
</style>
</section>
</body>
</html>

divの中に直接書き込む方法

続いて、Divの中に直接書いてしまう方法です

この方法は、例えばほんの少ししか装飾しない場合や

再利用性が皆無なcssを実装したい場合に向いています

簡易的なcssですね。実装もDivに埋め込むだけですので

簡単です

<!DOCTYPE html>
<html lang="ja">
<head>
<title>配色一覧</title>
</head>

<body>

<h6>配色一覧</h6>

<div style="background:#0055A1;">この色は#0055A1の配色です</div>

</br>

<div style="background:#6D6D6D;">この色は#6D6D6Dの配色です</div>

</br>

<div style="background:#944538;">この色は#944538の配色です</div>

</br>

<div style="background:#60A234;">この色は#60A234の配色です</div>

</br>

<div style="background:#8F5B98;">この色は#8F5B98の配色です</div>

</br>

<div style="background:#D8738E;">この色は#D8738Eの配色です</div>

</br>

<div style="background:#F35C19;">この色は#F35C19の配色です</div>

</br>

<div style="background:#CC0000;">この色は#CC0000の配色です</div>

</br>

<div style="background:#6D6D6D;">この色は#6D6D6Dの配色です</div>

</br>

<div style="background:#4CADC2;">この色は#4CADC2の配色です</div>

</body>
</html>

off.tokyo｜スキルキャリアもっと輝け

htmlに直接cssを埋め込む方法

htmlの中にstyleを作る方法

divの中に直接書き込む方法