とはいえ、参考にしやすいソースのHPといってもなかなか上手く見つからないでしょうから、HTMLとCSSの関係性がかんったんにわかるシンプルソースを書いて説明してみます。
なお、これはブログ用ではなく、説明のためだけのソースですから、移しても何の役にも立ちません。
まず、HTMLやCSS説明サイトで基本はおわかりと思いますので、CSSの指定が外部ファイルにリンクしたり、HTMLタグ中で指定したりもできるけれど、簡単なのはheadの中に入れる事だとご存じだと思います。
なので、説明もそれでやります。 FC2は外部ファイルタイプですが、各指定の方法は一緒です。置き場がheadの中じゃなく、cssファイルとして別になっているだけです。
では以下のソースにコメントとしてつける形で説明します。なお、これは基本中の基本だけわかるようにという見本ですから、本来必要なmetaタグや複雑な指定などは外しています。
CSSのコメントは/* */
HTMLのコメントは<!-- -->となります。
<html>
<head>
<title>ここがタイトルです。ウィンドウ上部に表示されます。</title>
<style type="text/css">
<!-- これがCSS指定スタート位置です。 --><!--body {
/* ページ全体へ効果を与えるbodyへの指定です。背景に関する指定などを入れます。 */ background-color:#ffffff;
/* 背景色 */ background-image:url("");
/* 背景画像 */ margin:0px;
/* マージン一括指定 */}
body,td,div,p,li{
/*フォントに関する指定などはbodyだけではなく、divなど他のタグに対しても有効にしたいですから、カンマで併記して指定します。 */ color:#444444;
/* 文字色 */ font-size:10pt;
/* フォントサイズ */ text-align:left;
/* 文字揃え */}
/* ここからがページ全体のリンクに関する指定です */a:link{color:#0000ff; text-decoration:underline;}
/* 未訪問リンク *//* クラスの指定です。クラスの名前の前に . をつけて指定します。HTML中のクラス名に対応します。 */.red{font-size:12pt; color:#ff0000;
border:1px red dashed;
/* ボーダー一括指定 */}
/* 同じくIDの指定です。IDの名前の前に#をつけて指定します。HTML中のID名に対応します。 */#green{ font-size:16pt; color:#00ff00;
border:1px green dotted;}
/* 入れ子の見本です。あるタグの中に別のタグが入っていた場合の指定の仕方です。これはブログのデザインでは非常に便利です*/.red a:link{color:#ffff00; text-decoration:none;}
/* これはクラス名redの中にリンクがあった時限定の色指定です。 */div #green{ font-size:9pt;}
/*これはdivタグの中にID名greenがあった時の文字サイズ指定です。*/--></style>
</head>
<body>
指定はbodyに対するものが有効になります。<BR>
<a href="">リンク見本</a><BR>
<BR>
<div class=red>
<!--クラスredです。この部分には上記CSSのredへの指定が有効になります -->クラスredへの指定が有効になる部分です。<BR>
<a href="">redの中のリンク見本</a><BR>
<!--クラスred中のリンク色指定が有効になります。 --></div>
<BR>
<BR>
<p id=green>
<!--ID greenです。この部分には上記CSSのgreenへの指定が有効になります -->これはgreenの見本です。文字のサイズに注目して下さい。<BR>
</p>
<div class=red>
<!--再びクラスredです -->まずはもう一度クラスredだけをdivに対して指定した部分です。<BR>
<p id=green>
<!--再びID greenです -->今度はdivの中に、greenが入っています。入れ子で指定した部分になります。redの指定とも、greenの指定とも文字のサイズが変わり、入れ子指定したサイズになっていますが、文字色やボーダーは入れ子の時の指定がないので、greenの指定がそのまま効いています。
</p>
</div>
</body>
</html>
このようなソースだと実際の表示は以下のように見えます。
指定はbodyに対するものが有効になります。
リンク見本これはgreenの見本です。文字のサイズに注目して下さい。
まずはもう一度クラスredだけをdivに対して指定した部分です。
今度はdivの中に、greenが入っています。入れ子で指定した部分になります。redの指定とも、greenの指定とも文字のサイズが変わり、入れ子指定したサイズになっていますが、文字色やボーダーは入れ子の時の指定がないので、greenの指定がそのまま効いています。
上記のソースと実際の表示のクラスやIDの指定の相関を見て下さい。
HTMLタグ中でclassやIDの名前を指定すると、CSS内で指定したそれぞれのclassやIDへの指定が反映されるわけです。
Close
Click for your forutne! 