2006年10月07日

CSS講座第2号 スタイルシートの書式

こんにちは、
船橋みずきです(* ̄0 ̄)ノ

いつもご訪問、応援、ありがとうございます♪

今回で5つ目の記事になりました。

☆ランキングに参加しています☆
あなたの応援があれば、僕は24時間マラソンの出演依頼がくる気がします。
 ↓ ↓ ↓ ↓ ↓
【ブログの殿堂】


さて、

前回の【 スタイルシートって? 】に引き続きCSS講座の第2回目です!


今回は、

【 スタイルシートの書式 】

というテーマでお伝えします♪

スタイルシートは基本的に以下のような書式で記述します。

セレクタ{ プロパティ : 値 }

以上です。

わかりましたか?







・・・・・。

って

わかるわけないですね(笑)


ひとつ例をだしてみましょう。


h1{ font-size : 20px }

これはどういう意味かといいますと、
h1というタグの、font-size(文字のサイズ)を20pxにする。

という意味です。

ちょっと難しいですか?


これをみずき流にいうなら、
なにの{ なにを : なににする }

ってことです!
これなら分かりやすいですよね♪

・・・分かりやすいですよね!?(笑)


CSSを記述する際の注意点は、
font-sizeと20pxを{ }で囲むこと。
font-sizeと20pxの間に“:”をつけることです。

ちなみにプロパティと値の前後には自由にスペースを入れることができます。


ではでは、
先ほどのh1に、さらに色をつけたい場合はどうすればいいのでしょうか。
(色はcolorを使って指定します。)

すこし考えてみてください♪






どうですか?

はい、そこのあなた!

h1{ font-size : 20px }
h1{ color : 色 }

ですか?

おしい!!
まぁそうやって記述しても表示されることはされるんですが。。


同じセレクタに複数指定したい場合は、
なにの{ なにを : なににする ; なにを : なににする }
h1{ font-size : 20px ; color : red }
(h1の文字のサイズを20px、文字の色を赤にしたい場合)

のように“;”で区切ることでいくつでも指定することができます♪


◇本日のまとめ

h1{ font-size : 20px } は、
h1というタグの、font-size(文字のサイズ)を20pxにする。
という意味。

なにの{ なにを : なににする }
と考えると理解しやすい♪


書く際の注意点は、
font-sizeと20pxを{ }で囲むこと。
font-sizeと20pxの間に“:”をつけること。


同じセレクタに複数指定したい場合は、
なにの{ なにを : なににする ; なにを : なににする }
h1{ font-size : 20px ; color : red }
(h1の文字のサイズを20px、文字の色を赤にしたい場合)

のように“;”で区切ることでいくつでも指定することができる。


それでは、次回もお楽しみに〜♪(* ̄0 ̄)



*編集後記*

僕が住んでいるのは栃木なんですが
昨日は雨と風がものすごかったです( ̄▽ ̄;

どれくらいすごかったかというと、、、。


傘が風で壊れました(泣)


よくある台風の映像みたいな感じで。

傘が裏返しにバアッ!!って Σ(; ̄□ ̄A

生まれて初めての体験だったので、いい思い出(?)になりました(笑)


*裏編集後記*

人になにかを伝えることって、予想以上に難しいんですね。

自分の未熟さを思い知らされました....。


わからないことがあれば遠慮なく質問してくださいね!!
ささいなことでも結構ですよ!質問大歓迎です♪♪♪



「どこかかゆいところありますか?」
「ちょっと下のところを押してもらえると嬉しいです」

ブログランキング【ブログの殿堂】
お小遣い部門、SOHO・在宅部門、栃木県部門で1位を獲得しました!!
いつも応援ありがとうございます♪♪あなたの応援に感謝!!
この記事へのコメント
みずきさん、おはようございます

スタイルシートのゴチャゴチャした細かいの
見てると頭が痛くなります^^;
また、勉強しに来ますね〜〜〜

応援ぽち☆
Posted by 情報起業で家族を養うぞ!【おいちゃん☆】 at 2006年10月08日 09:11
こんにちわKです。

勉強になります!

これだけ丁寧に説明していただけるとわかりやすいですね!

応援ポチ!
Posted by 金儲け大学ネット学部アフィリエイト科K at 2006年10月08日 11:51
こんにちは、涼クールです!

この説明はめちゃくちゃ分かりやすいです!

みずきさん、ご職業、先生とかじゃないですか?

次回も楽しみに待っています!

おうえんポチコーン!
Posted by 稼ぐコツ!〜5億稼ぐ道〜 at 2006年10月08日 15:28
みずきさん♪

こんにちは♪いつも、コメントありがとう(^^♪

CSS第2回凄く参考になりました。

これで、少しづつだけど、CSSがわかるように
なりそうだな。

それと、昨日まで、凄い雨ばかりだったね。
うちもかなり降ったけど。。

今年の天候はいろいろですね!

また、おじゃまします。

応援ポチッとな(^^♪
Posted by marimama◆誰でもできる超簡単アフィリエイト2倍法則の方法◆ at 2006年10月08日 15:35
船橋みずきさん〜♪
まいど〜土建屋ムサシっす。
いつも、応援、感謝感謝でする。
それなのに〜中々伺えずすみませぬ。
さて〜
本日も、お勉強させていただきました。
こうやって噛み砕いていただくと
とてもわかりやすいでする。
シッカリメモりました。
ありがとうございました。

では〜百万トン級!応援ポチドン!!
Posted by 時間が無い方限定ブログ!土建屋ムサシ! at 2006年10月08日 16:39
みずきさん、こんにちは。

沖縄のサトです。

スタイルシートのこと、ここで学ばせていただきます^^
「真ブログ解体新書」でも学んでいるところですが、
みずきさんの説明は、より具体的で
わかりやすいです。

ありがとう!

またきますね〜

応援します。ぽち^^
Posted by ブログアフィリエイトで愛でいっぱいのお金持ち at 2006年10月08日 16:40
こんばんは!
笑うアフィリエイターことスマイリーです。

スタイルシートと言えばみずきさんですよね。

あ、相互リンクのお誘いありがとうございました。

コチラもリンク完了しました。

今後ともよろしくお願いします。

応援ぽち!
Posted by スマイリー@情報商材ブログdeレビュー at 2006年10月08日 21:33
こんばんは♪

いつもコメントありがとうございます。

みずきさん、めちゃわかりやすいです^^
これ独学されたんですか??
第3回目も期待してます!

昨日は雨、風ひどかったですね〜
北陸地方もひどかったですよ!

また遊びにきます(´・ω・`)/~~
応援フレーヾ(゚ー゚ゞ)( 尸ー゚)尸_フレー
Posted by coco★初心者必見!ぐうたら主婦のドンドン稼ぐ!!アフィリエイトマル得テクニック at 2006年10月08日 21:38
こんばんは。紅です♪

わかりやすいですね〜(^^)
先生みたいです★

雨は大丈夫ですか?こちらは晴れているのですが、
関東の方はすごかったようですね。

気を付けてくださいね。

応援クリック注射!(σ´□`)σ・・・・…━━━━☆ズキューン!!
Posted by 紅「白衣の天使のブログアフィリエイト教室」 at 2006年10月08日 21:53
こんばんはtokimamaです
訪問コメントありがとうございます。
とても解りやすくて助かります
次回も楽しみにしています。
応援ポチッ♪
Posted by 無料アフィリエイトで稼げるブログ=tokimama at 2006年10月08日 21:55
船橋みずきさん

スージーです。

pxだとまだいいんですが、%になるとなんかわからなくなるんですよね。

なにに対しての%かがわからなくていつも手間がかかってしまいます。

今度教えてください。

またきますね! 応援、ぽち!
Posted by ★情報起業で稼ぐ!元宣伝マンの超ユニーク戦略暴露ブログ★スージー at 2006年10月08日 22:01
みずきさん
こんばんは、ponです。
いつもコメント、応援を有難うございます。

スタイルシートは分からない事が結構ありますね。
先がたのしみです。

Posted by 情報商材@夢叶うブログ のpon  at 2006年10月08日 22:03
みずきさん、こんばんは♪

日付が変わったので再び訪問させて
いただきました♪

また遊びにきます(´・ω・`)/~~
応援フレーヾ(゚ー゚ゞ)( 尸ー゚)尸_フレー
Posted by coco★初心者必見!ぐうたら主婦のドンドン稼ぐ!!アフィリエイトマル得テクニック at 2006年10月09日 00:34
みずきさん、こんにちは

沖縄のサトです、

今日の記事でこちらのブログの紹介をしました、
よろしかったら、ご確認ください。

それから、相互リンクもお願いしていいですか?
こちらは、すでにリンク集にリンクしています。

↓です。
http://chikyu3.livedoor.biz/archives/50269240.html

もしよろしければ

こちらは、
ブログ名:ブログアフィリエイトで愛でいっぱいのお金持ちになる方法
URL:http://chikyu3.livedoor.biz/archives/50269240.html
以上で、リンクしていただくと
とってもうれしいです。

よろしくご検討くださいね〜

応援していきます。ぽち^^

TBもさせてくださいね。
Posted by ブログアフィリエイトで愛でいっぱいのお金持ち at 2006年10月09日 11:41
こんにちは!takumiです。

昨日はこれなくてごめんなさい!
スタイルシートはやっと
いたずらするようになりました(笑)
このような記事助かります!
またお願いします!

応援ポチ!
Posted by アフィリエイトで100万円稼ぐコツ アフィリエイターtakumiの野望 at 2006年10月09日 13:07
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/25054458
※半角英数字のみのトラックバックは受信されません。

この記事へのトラックバック

「真ブログ解体新書」で学ぶスタイルシートの活用法
Excerpt: 「真ブログ解体新書」で、 簡単なスタイルシートの変え方を学び中・・・ 人気blogランキングへ ランキング広告ドットコムへ いろいろして、タイトルを大きくしたり、 この文の大きさ..
Weblog: ブログアフィリエイトで愛でいっぱいのお金持ちになる方法
Tracked: 2006-10-09 11:43
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。