スタイルシート講座Vol.4～ブログ内で使うスタイル♪

こんにちは♪
火曜日の午後いかがお過ごしでしょうか？

我が家ではついにインフルエンザの魔の手が嫁にまで・・・
息子→娘→嫁と見事に伝染していっています。

残るのはみぃちゃんだけ・・・
私もやばいか(^^;

という事で、会社を密かに早退して帰ってきましたが
ぐっすりと二人とも寝てるので暇です(^^;

さて本題です。
今回は第4回となりますがいまいちまとまりがないですね(^^;

ブログ内で使える色とかフォントとか大きさとか太さとか
それを簡単に定義できるスタイルシートの書き方です。

基本的なものにclassっていうものがあります。
スタイルの定義はタグ単位、クラス単位で定義します。
クラス単位ではタグに依存しないスタイルが定義できますので
これを覚えましょう。

超簡単です。
自分が好きなクラスを定義できます。もちろん定義済みクラスにも
スタイルの適用ができます。

ではさっそく例を・・・

例えばブログ内で色を付けたいときがありますよね。
<font color="yellow">黄色<font>
と記述すれば黄色になります。

結局は同じことなのですが、スタイルシート内に
.y
{
color:yellow;
}
.b
{
color:blue;
}
.r
{
color:red;
}
.g
{
color:green;
}
という感じで記述しておくとブログ内で

<span class="yellow">黄色<span>
と記述すれば黄色になります。
<span class="yellow"><span>
の部分を辞書にたとえば"ｓ"で登録しておきましょう。

yの部分を変えるだけで色が替えられます。

もうひとつ便利な応用例として文字を強調させる太という
ボタンがありますよね！
これを押すと<b></b>が付きますよね。

これを利用しない手はありません。

B
{
color:Lime ;
font-size:20px;
line-height:130%;
}

って書いておくと太ボタンを押すだけで
太字＆サイズ大＆黄緑色になります。

斜というボタンを押すと<em></em>が付きますよね。

EM
{
color:yellow;
font-size:20px;
line-height:130%;
}
と書いておくと斜ボタンを押すだけで
斜字＆サイズ小＆紫色になります。

色や文字はご自分で好きなように替えてみてください。

ではまた続きは後日♪




でもカレンダーのところに<b></b>が使ってあるから
気をつけろ～～～

またな！


▼記事に満足したらここをクリック▼
ブログランキングランキングオンライン


ブログランキング