【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−

 

用意する物 ・パソコン(windows推奨)
・ブラウザ(IE推奨)
・メモ帳(スタートボタン→アクセサリ→メモ帳)
下準備 試作用フォルダを、場所の分かるところに作りましょう
例:デスクトップ
  1)デスクトップでマウス右クリック→新規作成→フォルダ
  2)フォルダ名:CSS講座(わかりやすい名前ならなんでもOK)

 

にこにこ顔の助手 はーい、みなさん、お元気でしたか?
え?あんただれ?って・・・・・そ、そうですね、なにしろ久しぶりの登用ですから。・・・「葛葉の野」も今や「クレセンティア リーフ」なんぞというしゃれた?名前に変えて7年目を迎えてるんですねー。

はじめて、ほんとぉ〜に、初めてホームページに挑戦したあのころ・・・そう、htmlタグ辞典片手に、ぼくと五味葛太教授とで、学習しながら講義を開くというむちゃくちゃなことをしたんですよ。

ご存じない方の方が大勢いらっしゃるかと思いますが・・・って、大勢も読みにきていただいてるのかどうか・・・は、さておき、ともかく、再び、あの五味葛太教授を迎えての、初心者の初心者による初心者のためのCSS入門講座の始まり、始まりで〜〜す!
  
寝ぼけ眼の教授 うほん、久しぶりじゃのぉ〜〜・・・まーだ、管理人は生きておったのか。そうかそうか。で、今回はスタイルシートぢゃと?
できるんかいの?・・・っとっと・・わしが講義するんぢゃったわい・・わはははは。
では、第1回からスタートするぞい。
やっぱりこういう講義は、わしでないと読む気がおきんという感想があって、再び年寄りの登場となったのぢゃ。うれしいのぉ、
困った顔の助手 違うでしょぉ、教授?ダメですよ、勝手に自分のいいようにリメイクしては!
ギャグチックでないと読む気がおきないから、hotmilkのようにしてといういう、ありがた〜〜いご意見があったんでしょ?
寝ぼけ眼の教授 じゃから、結局は、わしの登場を待ってくれとるんじゃ。
(・・ったく、相変わらず気のきかん助手ぢゃわい。ぢゃから出世しないんぢゃぞ!違うと思ってもお世辞の一言くらい言わんかい?!)
ということで、2005/12/4
ついにスタートぢゃっ!(管理人CSS学習開始!)
  
【第1回】 ページの背景色を指定 
【第2回】 「見出し&ページ全体」の文字色を指定 
【第3回】 「見出し&ページ全体」の文字のサイズを指定/前編 
【第4回】 「見出し&ページ全体」の文字のサイズを指定/後編 
【第5回】 「見出し&ページ全体」の文字の書体の指定、斜体にする。 
【第6回】 見出しを装飾する 
【第7回】 ページの背景に画像を使ってみる 
【第8回】 ちょっと?ページらしきものを作成?(1)・行間を空ける 
【第9回】 ちょっと?ページらしきものを?(2)・画像の回り込み&ページの周りの余白 
【第10回】 リンク文字色を変える、装飾する 
【第11回】 小見出しごとに違うデザインにする 
【第12回】 スクロールバーに色をつける 
【第13回】 表(テーブル)のデザイン、線、背景色 
【第14回】 表(テーブル)のクラス分け&セル内の文字の表示位置を変える 
【第15回】 ページの中身をブロック分け/ブログ風3カラムのページ作成? 
【第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ページ、テーブルのスタイル */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
参考資料1 線種リスト 
参考資料2 サイズ指定単位リスト ※文字サイズ、線の太さ、余白などの指定で必要
参考資料3 カラーリスト(ブラウザ対応色名) ※カラーチェッカー、カラーピッカーの紹介も 
参考講座 HTML入門基礎講座
(このHPを作った1998年、ちょうど今回と同じように本をみながら、管理人がまとめたものです。
あの時はWebページ作成ソフトも持っておらず、タグ辞典片手にメモ帳で必死になってページを作成してました。
ホントに初めてわけわかめのホームページをタグ辞典でhtmlを調べながら作成にチャレンジしつつ、同時に講座としてまとめたものなのでしょぼしょぼページです。間違ってるところもあるかも?/^^;)
HTML3分間クッキング♪
画像を使い、上の講座よりいくぶん見やすくまとめた講座です。
にこにこ顔の助手 え〜、以上で入門講座は終わります。(2005/12/22)
学習してきたスタイルシートをどのように活用したらいいか・・それが今後の課題ですね。

でも、ここまでやってきていただけば、あとは、市販などのスタイルシートリファレンス(辞典)を見ても意味が分かるんじゃないかと思いますので、まだまだたくさんあるスタイルシートですが、がんばって調べて素敵なページ作りにチャレンジしてください。私もがんばります!

質問、こういう場合はどうやったら、など、よろしければ、気軽にBBSなどで声をかけてください。
分からないことは一緒に悩んで、調べて、大きくなりましょう(え?

スタイルシート初挑戦の私のつたない入門講座を読んでくださりありがとうございました。m(__)m
今回、急いで進めたので、html基礎講座の時程ギャグチックにできずにすみませんでした。
寝ぼけ眼の教授 「こういう風にまとめて!」とか「こういうページを作りたいんだけど、どうやったら?」というご要望でもあれば、開く・・・・んじゃないかと思うが・・・・。/^^;
  
(2007/02/24:実践特別講座を開講)
2011/11/24
管理人の呟き
こんにちは、管理人です。
この講座を見てくださってる方から嬉しいメールをいただき、お礼をブログの方へあげてみました。
基礎の基礎のこの講座ですが、活用してもらえ、分かりやすいとのメールをいただき、飛び上がらんばかりに喜んでます。ありがとうございました。 m(__)m


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

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


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

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



▲TOPページ

CSS