htmlタグとcss－すぐに使えるサンプル集

htmlリファレンス ★htmlタグとcss－すぐに使えるサンプルと小技集－TOP

◆HTML&CSS◆ スタイルシートリファレンス

スタイルシートを外部から呼び出す場合
(例:同フォルダ内に外部cssがある)

<head>
<link rel="stylesheet" type="text/css" href="◆スタイルシートのファイル名◆.css">
</head>

呼び出したいCSSファイルをヘッダ内link relで呼び出します。

外部cssの宣言

文字の大きさ
b{font-size:20px;}

<b>◆◆◆</b>のタグで囲んだ文字のサイズが20pxになります。

文字の書体
u{font-family:"Arial Black";}

<u>◆◆◆</u>のタグで囲んだ文字の書体がArial Blackになります。

色
i{color:#FF8800;}
#re{color:red;}
#bl{color:blue;}
#gr{color:green;}

<i>◆◆◆</i>のタグで囲んだ文字の色が#FF8800になります。
<span id="re">◆◆◆</span>で囲んだ色が赤に
<span id="bl">◆◆◆</span>で囲んだ色が青に
<span id="gr">◆◆◆</span>で囲んだ色が緑になります。

余白
table{padding:30px 20px 15px 25px; margin-top:0px; margin-bottom:0px;}

paddingで上下左右の余白を指定できます。上記の例では上に30px、右に20px、下に15px、左に25pxの余白が出来ます。 marginで余白を指定する事も可能。margin-topやbottomの他にleftやrightもあります。

文字＋書体＋色＋余白
h6{font-size:20px; font-family:"Arial Black"; padding:0px 0px 0px 0px; margin-top:0px; margin-bottom:0px; color:#8F0;}
#faruru{font-size:12px; font-family:"Arial Black"; color:#345;}
#faruru h6{font-size:12px; font-family:"Arial Black"; color:#08F;}

文字、書体、色、余白を設定したh6です。<h6>◆◆◆</h6>のタグで囲んだ文字に効果があります。
#faruruの方は<div id="faruru">◆◆◆</div>で囲んだ範囲に効果を及ぼします。
また、faruruで囲んだ範囲内ではh6{･･････}ではなく#faruru h6{･･････}が適用されます。

小技
a{color:blue;text-decoration:none;}
a:hover{color:red;border-bottom:1px dotted #000;}

アンカーテキストにマウスが触れるとテキストの文字色が青⇒赤に変化します。また、文字の下に点線が現れます。

外部cssサンプル

body{padding:30px 20px 15px 25px;}
b{color:#FF0000;}
i{color:#FF0000;}
a{color:blue;text-decoration:none;}
a:hover{color:red;border-bottom:1px dotted #000;}
#red{color:red;}
#white{color:white;}
#faruru{color:#345;font-size:12px;}

スポンサードリンク

htmlタグとcss－すぐに使えるサンプル集

◆HTML&CSS◆ スタイルシート リファレンス

◆HTML&CSS◆ スタイルシートリファレンス