はーい、みなさん、お元気でしたか？ え？あんただれ？って・・・・・そ、そうですね、なにしろ久しぶりの登用ですから。・・・「葛葉の野」も今や「クレセンティア　リーフ」なんぞというしゃれた？名前に変えて７年目を迎えてるんですねー。 はじめて、ほんとぉ〜に、初めてホームページに挑戦したあのころ・・・そう、htmlタグ辞典片手に、ぼくと五味葛太教授とで、学習しながら講義を開くというむちゃくちゃなことをしたんですよ。 ご存じない方の方が大勢いらっしゃるかと思いますが・・・って、大勢も読みにきていただいてるのかどうか・・・は、さておき、ともかく、再び、あの五味葛太教授を迎えての、初心者の初心者による初心者のためのＣＳＳ入門講座の始まり、始まりで〜〜す！
	うほん、久しぶりじゃのぉ〜〜・・・まーだ、管理人は生きておったのか。そうかそうか。で、今回はスタイルシートぢゃと？ できるんかいの？・・・っとっと・・わしが講義するんぢゃったわい・・わはははは。 では、第１回からスタートするぞい。 やっぱりこういう講義は、わしでないと読む気がおきんという感想があって、再び年寄りの登場となったのぢゃ。うれしいのぉ、
	違うでしょぉ、教授？ダメですよ、勝手に自分のいいようにリメイクしては！ ギャグチックでないと読む気がおきないから、hotmilkのようにしてといういう、ありがた〜〜いご意見があったんでしょ？
	じゃから、結局は、わしの登場を待ってくれとるんじゃ。 （・・ったく、相変わらず気のきかん助手ぢゃわい。ぢゃから出世しないんぢゃぞ！違うと思ってもお世辞の一言くらい言わんかい？！） ということで、2005/12/4ついにスタートぢゃっ！（管理人CSS学習開始！）

【第１回】	ページの背景色を指定
【第２回】	「見出し＆ページ全体」の文字色を指定
【第３回】	「見出し＆ページ全体」の文字のサイズを指定／前編
【第４回】	「見出し＆ページ全体」の文字のサイズを指定／後編
【第５回】	「見出し＆ページ全体」の文字の書体の指定、斜体にする。
【第６回】	見出しを装飾する
【第７回】	ページの背景に画像を使ってみる
【第８回】	ちょっと？ページらしきものを作成？(1)・行間を空ける
【第９回】	ちょっと？ページらしきものを？(2)・画像の回り込み＆ページの周りの余白
【第10回】	リンク文字色を変える、装飾する
【第11回】	小見出しごとに違うデザインにする
【第12回】	スクロールバーに色をつける
【第13回】	表（テーブル）のデザイン、線、背景色
【第14回】	表（テーブル）のクラス分け＆セル内の文字の表示位置を変える
【第15回】	ページの中身をブロック分け／ブログ風３カラムのページ作成？
【第16回】	ブロックの中のデザインを変更
【第17回】	箇条書きの行頭表示（マーク）を変える
【第18回】	本文の先頭を装飾
【第19回】	メールフォームの装飾
【第20回】	ブロックの表示高さを指定してスクロールバーをつける
【実践特別】 　2007/02/24	テキストリンクの背景を画像で指定し、リンクテキストにカーソルを当てると背景画像が変化する＋ちょっと実際に作成・・というか、『魔法陣グルグル』サイトのトップページをスタイルシートを使ってリニューアルしてみました。 でも、上半分だけで、あとは面倒になってやめました。（おい！
まとめ	スタイルシート（CSS）簡易辞典　※この講座でのプロパティリスト、指定方法　 ※まとめのページは、スタイルシートで構成させてみました。/^^;
おまけぢゃ（笑	【cssファイルを見やすくする為の注釈の付け方】 ※タグ（html）では、<!--　と　-->で囲んだ部分はページ上に読み込まれないから、注釈をそこに書くことができたように、CSSファイルでもそれができるんぢゃ。 その記号というのが、これぢゃ→　/*　と　*/ 単なる一例ぢゃが、例えば下のように記述しておくと、作った後忘れた頃見てもどこの設定なのか良く分かるんぢゃないかのぉ？ （下のはページ全体のスタイル指定だけぢゃが、後も同じように書いていけばいいんだぞい。） /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ /* 全体のスタイル */ /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ body { 　　　　color: #ffffff; 　　　　　　　　　　　/* 文字色 */ 　　　　font-size: 13pt; 　　　　　　　　　/* 文字サイズ */ 　　　　line-height: 16pt; 　　　　　　　　/* 行間 */ 　　　　padding: 0px 0px 0px 0px; 　　　/* 内側余白*/ 　　　　margin: 0px; 　　　　　　　　　　　/* 外側余白 */ 　　　　scrollbar-base-color: #660000; 　　/* スクロールバーの全体の色 */ 　　　　scrollbar-arrow-color: #999900; 　　/* スクロールバーの矢印の色 */ } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ /* TOPページ、テーブルのスタイル */ /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
参考資料１	線種リスト
参考資料２	サイズ指定単位リスト　※文字サイズ、線の太さ、余白などの指定で必要
参考資料３	カラーリスト（ブラウザ対応色名）　※カラーチェッカー、カラーピッカーの紹介も
参考講座	HTML入門基礎講座 （このHPを作った1998年、ちょうど今回と同じように本をみながら、管理人がまとめたものです。 あの時はWebページ作成ソフトも持っておらず、タグ辞典片手にメモ帳で必死になってページを作成してました。 ホントに初めてわけわかめのホームページをタグ辞典でhtmlを調べながら作成にチャレンジしつつ、同時に講座としてまとめたものなのでしょぼしょぼページです。間違ってるところもあるかも？/^^;） HTML３分間クッキング♪ 画像を使い、上の講座よりいくぶん見やすくまとめた講座です。
	え〜、以上で入門講座は終わります。（2005/12/22） 学習してきたスタイルシートをどのように活用したらいいか・・それが今後の課題ですね。 でも、ここまでやってきていただけば、あとは、市販などのスタイルシートリファレンス（辞典）を見ても意味が分かるんじゃないかと思いますので、まだまだたくさんあるスタイルシートですが、がんばって調べて素敵なページ作りにチャレンジしてください。私もがんばります！ 質問、こういう場合はどうやったら、など、よろしければ、気軽にBBSなどで声をかけてください。 分からないことは一緒に悩んで、調べて、大きくなりましょう（え？ スタイルシート初挑戦の私のつたない入門講座を読んでくださりありがとうございました。m(__)m 今回、急いで進めたので、html基礎講座の時程ギャグチックにできずにすみませんでした。
	「こういう風にまとめて！」とか「こういうページを作りたいんだけど、どうやったら？」というご要望でもあれば、開く・・・・んじゃないかと思うが・・・・。/^^; 　　 （2007/02/24：実践特別講座を開講）
2011/11/24 管理人の呟き	こんにちは、管理人です。 この講座を見てくださってる方から嬉しいメールをいただき、お礼をブログの方へあげてみました。 基礎の基礎のこの講座ですが、活用してもらえ、分かりやすいとのメールをいただき、飛び上がらんばかりに喜んでます。ありがとうございました。　ｍ（＿＿）ｍ

※このページはデザインもなにも考えて作ってませんので、あしからず。
ひたすらスタイルシートの勉強用ということで、シンプルです。デザイン無視してます。（汗っ

参考図書：インプレス社・できるホームページスタイルシート入門、（株）アンク著スタイルシート辞典


お断り/^^;：管理人はhtmlはなんとか簡単なものならわかりますが、スタイルシートはまるっきりなので、
本を見つつまとめているわけですが、質問などありましたら、BBSへどうぞ♪
一生懸命調べて考えます/^^;

それから、結構おっちょこちょいなので、勘違いや間違い、タイプミスなどあるかもしれません。
もしも、発見されましたら、ご指摘くださると嬉しいです。



▲TOPページ