CSS HTML

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

2016年12月22日

htmlにcssを使おうと思ったとき、普通であればコードの見易さや肥大化を防ぐために、

htmlファイルとcssファイルを切り分けて使います

でも、ちょっとした装飾や、別途何かしらの理由で

htmファイルの中に直接cssを書き込みたいと思うことがあります

今回は、二つの方法を試し、html内に直接cssを埋め込む方法を紹介します

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>

 

Pocket
LinkedIn にシェア

-CSS, HTML
-, ,

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.