ホームページの作り方(main_spcの完成！)

ホームページの大まかなレイアウトの設定が終わったので、
各部の詳細を設定していきましょう!
ホームページの完成もあと少し（？）
がんばってホームページを作っていきましょう！

いよいよ各部の詳細の設定です。どんな料理をどんな配置で出すか決まってきたので、料理そのものの詳細を作っていきましょう！
目標のホームページ完成までもう少しです！

1.main_spcの詳細について

今、あなたが作っているホームページは サンプル011-01 のようになっていますね。
ここからは、詳細を設定して、ページの完成までがんばりましょう！
まずは、ホームページの内容（メインコンテンツ）を書き込んでいく「main_spc」を完成させましょう！

とりあえず、今目標としている ホームページ を見てみましょう。
「main_spc」の構造は、まず青地に白の文字で「話題その１」とありますね。
これが「中見出し」ということになります。ここは<h2>タグで囲っています。
そして、青地の部分が横に伸びて、だんだん透明になっていってます。
（ブラウザによっては、透明になってない場合もあります。）
次に、実際の内容が書かれていますね
更にその下に同じ構造で、「話題２」が書かれていますね・・・

ということで、例によってCSSファイルで設定をしましょう。
ここでは、特に「中見出し」の部分をわかりやすくするために「中見出し」部分を先に設定していきますね！
まずCSSファイルに

そして、HTMLファイルに

中見出しの部分が現れましたか？
さてここでは、どのようなことをしたのでしょうか？

・・・そうです
中見出し文字用に「ao_waku」というボックスを設定して「main_spc」の中に入れてるんですね。（htmlで言うと、<div id="main_spc">と</div>（「main_spc」用の終了タグ）の間におくということですね。）

更に、「ao_waku」で、「background-color:#0000ff;」で青地にして、「h2」で「color: #ffffff;」白文字にしています。
ちなみに、「ao_waku」で、「color: #ffffff;」の設定をして「h2」では、colorの設定をしなくても同じ結果になりますよね！

「filter:alpha(opacity=100,finishopacity=20,style=1,startx=20,finishx=90);」は、だんだん透明にしていく設定です。
数字の部分を色々変えて研究してみましょう！

ここでは、「class(クラス)」がでてきました。「id」と働き的には同じですが、これについては、このページの「豆知識」を読んでみてください。

次に色文字や大文字の設定をしていきましょう。
これもCSSファイルで行いますよね！

ちょっと量が多いですけど中身を良く見たらもうあなたなら何てこと無いですよね！

<p>タグは上下にスペースを開けるように「margin」が初期設定されていてこれが意外と使いにくいんです。
なので「margin-top:0px;」とすることによって、そのスペースを「０」にしているんです。

<strong>は論理強調タグといって、巡回ロボットに「ホームページの中でもこの部分は重要だよ！」と教えているタグです。CSSで何も設定しないと太文字になります。
勿論それでもかまわないのですが、見た目にもうちょっと目立たせようということで設定してみました。
font-size: larger;の「larger」は、「今設定されているよりもう少し大きく」という意味です。

font-weight: 700;は「文字の太さの部分は700だよ」という意味で、××の部分は100〜900まで100刻みで設定できます。
標準は400です。

色の指定は、今作っているホームページの「index.html」では、赤い文字しか出てきませんが、次のページで、いろんな色が出てくるので先に設定しておきましょう。

更に、HTMLに

これで、「main_spc」はでき上がりですね。
内容（コンテンツ）はHTML、スタイルはCSSということが良くわかりますね。
それでは、HTMLの詳細を少し見ていきましょう。

ボックスを作っていく<div>に対して、文章の一部分をCSSのクラスに対応させたい場合に<span>を使います。

<img src="./img/photo01.jpg" style="float:left;margin-right:10px;border:3px ridge teal;" alt="美味しそう！">
「img src」は、画像を表示させるタグです。
「"./img/photo01.jpg"」の部分は、パスの話 の時に出てきましたね。
「 alt="美味しそう！"」は、画像にカーソル（矢印）を持っていくと「美味しそう！」と表示されますね。
なんらかの理由で画像が表示されない時にも「美味しそう！」は表示されます。画像を表示させる時には、「art=""」に画像の説明を書いておきましょう。
巡回ロボットもどんな画像なのかをこの部分で判断します。

「style="float:left;margin-right:10px;border:3px ridge teal;" 」
スタイルシートはこのように「style="△△:××;"」というように△△、××の部分を使ってHTMLタグの中に書き込むことも出来ます。
この場合、そのタグにだけ有効なスタイルシートということになります。

画像に上のような方法で、枠線（border）をつけて装飾をすることも出来ますよ！
「float:left;margin-right:10px;」と設定することで、画像を左に回りこませ、字を右に表示しています。更に画像と字の間を少し（10px分）あけています。

「&lt;」「&gt;」「&nbsp;」は特殊文字です。
それぞれブラウザには、「<」「>」「（空白）」が表示されます。
直接HTMLに<strong>と書くと「strong」という言葉自体が強調されてしまいブラウザには、strongと表示されてしまいます。このようなことを防ぐ為に特殊な文字は、「&lt;」のような書き方をします。

もう少しで「index.html」の完成ですね！「index.html」が出来れば、他のページは、「index.html」をベースに作っていきますので、比較的楽に出来ます。
何事も最初の一歩が大変なんですね！

豆知識

009ページで、「id」「class」の話が出てきました。両者ともその働きは、同じなので区別が付けにくいのですが、今作っているホームページを例に取ると、頭に「#」をつける「id」は「field_spc」「main_spc」「sub_spc」「top_waku」に使用しています。それに対して「.」をつける「class」は「hutomoji」「big」「black」「red」「blue」等に使用しています。「id」をつけた「field_spc」等には、「field_spc」その１、「field_spc」その２というような種類がありません。それに対して「class」に定めた「hutomoji」「big」「black」等は「文字の種類の１つ」と考えることが出来ます。ちょっと言い方は変ですが、○○学校１年１組、１年２組のような感じで、「文字の種類学校」「太文字組（クラス）」「大きい文字組（クラス）」「黒い文字組（クラス）」・・・というような発想がなりたつ場合に「class」を使用します。これは、別に文字の種類についてだけクラス分けするのではなく、色々な場合に「class」は使用されます。
「id」はその性格上、ページに１回しか使うことは出来ません。 又、今回のホームページの場合も「field_spc」「main_spc」「sub_spc」「top_waku」をそれぞれ「ボックスの種類の１つ」と考えるのなら「class」で設定してもいいのかもしれません。