HTMLとCSS。基礎の基礎見本です。
HTMLやCSSについて調べると、大抵の場合、各タグやプロパティについての説明と全体としての使い方の説明になっています。
確かにそれ以外書きようがないし、後は実際のHPのソースなど見ながら理解していくよりないのですが。
しかし、おそらく初心者の方が見ても、ブログのソースは複雑すぎて理解が難しいと思います。
独自タグはありますし、Java Scriptなど沢山混じってますし。
この場合、シンプルなページ構成になっているHPを見て、そのソースを見て、見比べるのが一番です。
それも一カ所、一度だけではなく、あっちでもこっちでも。
とはいえ、参考にしやすいソースの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への指定が反映されるわけです。
Click for your forutne! 