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

htmlタグとcss 目次
TOP htmlタグとcss−すぐに使えるサンプルと小技集

htmlタグで文字装飾。

htmlテンプレート(配布＋)

html関連リファレンス辞典。

テーブルや表の作成法。

フレームページの作成法。

1日で楽々習得html言語。

1日で習得スタイルシート。

htmlタグ−小技集。

html関連の雑学。
■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま
スポンサード リンク


◆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関連リファレンス辞典。


スポンサード リンク
Mail htmlタグ,テンプレート,スタイルシート(CSS),色見本,テーブル,メール,xml ■About Site 管理人,著作権,URL情報