■ WSJ21[GHP] - スタイルシート講座で覚えよう

■Section 3-2■良いホームページ作成講座■

▼GHP講座3.2　−　CSSスタイルシートを覚える


◎ よいデザインのホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。

★講義の進め方：はじめに


　講座３「CSSスタイルシートを覚える」の進め方を説明します。
　講座２「XHTMLタグを覚える」と同様に打ち込んでいってもらいます。
　今回は「css.html」などの名前を付けてファイルを制作しておきましょう。
　※前回制作した「template.html」をそのままコピーして名前を変更して下さい。
.
→　再確認：雛形ファイルは残っていますか？

　講座２「XHTMLタグを覚える」で一度制作しましたが残っているでしょうか？ もし「残っていない」「見ていない」のであればもう一度「講座2.1」を見ながら作ってみて下さい。


→　再確認：雛形の使い方

　雛形の使い方は覚えていますか？ コメント「<!-- ======================== -->」部分で囲まれた部分にタグと同様に書いていきます。


→　再確認：タグは覚えていますか？

　覚えていない方は見直して下さい。 初めは見たらなんとなく分かる程度で十分です。 書いている間に覚えていくので、今無理して覚えて必要性はありません。 見ながらでも、使っていればいつの間にか覚えているという感じになってきます。 参考までに、実際に私も全てを覚えているわけではありませんしね☆


★講義の進め方：解説の仕方


基本的に直接記述式

　タグに直接記述していく使い方で解説していきます。 この方法ですと、コピペで流用が効くという利点があり、 「ヘッダ内」や「別ファイル」に書く場合も同じCSSですので、効率良く学んでいけます。 ただ単に書き方が若干異なるだけで、大差はありません。


▼フォントの大きさを「12px」にする記述方法別の例▼
直接記述式の例

　<body style="font-size:12px;">


ヘッダ記述式の例

　<head>
　<style type="text/css">
　　body{font-size:12px;}
　</style>
　</head>


別途ファイル記述式の例

　「適用ファイル」
　<head>
　<link rel="stylesheet" type="text/css" href="./css.css" />
　</head>
　
　「別ファイル：css.css」
　　body{font-size:12px;}


　※詳しくは解説中で行っていきます。

★講義の進め方：CSS記述場所


タグの「style属性」に記述する

　<body>

　　↓　　↓　　↓　　１つの場合

　<body style="font-size:12px;">

　　↓　　↓　　↓　　複数の場合

　<body style="font-size:12px;color:#ff8800;">

　　↓　　↓　　↓　　つまりは

　<body style="属性:属性値;">

　　↓　　↓　　↓　　言葉で説明すると

属性と属性値を「:(コロン)」で区切り、属性値の後に「;(セミコロン)」を書き、 複数ある場合はこれらを続けて書きます。 それを「style="〜〜"」という様に「"(ダブルクォーテーション)」で囲みます。

←講座3-1　 ●もどる●　 講座3-3→