参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m

一日3分!スタイルシート使いこなし術

参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m

さってと



今日はスタイルシートのクラスについて解説(勉強)するつもりだったんですけど



その前にhtmlのタグにスタイルを設定する方法の

勉強が抜けていることに気づきましたので



まず、これをやってしまいます。



最初に勉強したインラインの設定と混同しがちなので・・俺だけかも(^_^;)



注意しましょうね。







htmlのタグ

例えば<B>にスタイルをせっていして見ましょう。



<B>は通常htmlでは太文字にするタグですね。



<B>こんにちは、お元気ですか?</B>

ソースをこのように書くと



こんにちは、お元気ですか?



こんな感じに表示されます。



では、この<B>というタグに枠と色を設定してっいして見ましょう。



青文字に黄色の背景

<style TYPE="text/css">

<!--

B{

color:#0000ff;background-color:#ffff10;

}

-->

</style>







<B>どうです!?変わりました?</B>





注 : ↑だいぶ省略してますから!気をつけてね

ブラウザで見るとこうなります。




数種のタグに同じスタイルをいっぺんに設定することもできます。


タグをカンマ[ , ]で区切って並べます。

上で設定したスタイルを <h1> と <span> にも適用したい場合は、




<style TYPE="text/css">

<!--

h1,span{

color:#0000ff;background-color:#ffff10;

}

-->

</style>






<h1>背景は黄色</H1>

<span>文字は青</span>







注 : ↑だいぶ省略してますから!気をつけてね


ブラウザで見るとこうなります。






タグの間にカンマ[ , ]を入れないでスペースを入れると

異なった意味になりますから注意!!

h1 span{

color:#0000ff;background-color:#ffff10;

}





この記述法にもちゃんと意味があるんですが

これは次回と言うことで!


どうですか?



お役に立ってますでしょうか?

スタイルシートはデザインの自由が利くので

HPをかっこよくするにはもってこいなんです。



ブログ内で使うのはめんどくさいと感じるかもしれませんが 良く使うスタイルをメモできるソフトに登録しておいて使えば
楽ですよ。 私は クリップNOTEというフリーソフトを使っています。

コピー履歴も残るからとっても重宝してます。



相互リンクしていただける方はご連絡くださいね。

参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m