×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> main_spcの完成

ホームページ作成編 11.main_spcの完成!

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

それぞれの部分の詳細を決めていこう!

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

1.main_spcの詳細について

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

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

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

.ao_waku {
 width:100%;
 background-color:#0000ff;
 padding:5px;
 filter:alpha(opacity=100,finishopacity=20,style=1,startx=20,finishx=90);
}

h2 {
 font-size: 18px;
 color: #ffffff;
 display: inline;
}

そして、HTMLファイルに

<body>
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
<div id="main_spc">
<div class="ao_waku"><h2>話題その1</h2></div>
</div>
<div id="sub_spc">
目次
</div>
<br class="fe">
</div>
</div>
</body>

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

・・・そうです
中見出し文字用に「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-top: 0px;
}

strong {
 font-size: larger;
 background-color: green;
 color: white;
 padding: 3px 5px;
}

.hutomoji {
 font-weight: 700;
}

.black {
 color: #000000;
}

.red {
 color: #ff0000;
}

.blue {
 color: #0000ff;
}

.gray {
 color: #808080;
}

.green {
 color: #008000;
}

.big {
 font-size: 18px;
 font-weight: 700;
}

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

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

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

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

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

更に、HTMLに

<body>
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
<div id="main_spc">
<div class="ao_waku"><h2>話題その1</h2></div>
<p>
話題その1について、色々なことを書いて見ましょう。<br>
どのようなホームページになるのかは、結局その内容によるんですね!
</p>
<p>
どんなに配置や見た目のよさを追求しても内容がよくなければ読んでもらえません。<br>
あなた独自のすばらしいホームページを作ってください。
</p>
<p>
目立たせたい部分は、<span class="hutomoji">字を太くしたり</span>、<span class="red">色を変えたり</span>しましょう。<br>
<span class="big">字を太く大きくすることも</span>効果的ですね!
</p>
<p>
大事な言葉や文章は、&lt;strong&gt;タグで囲みましょう。<br>
視覚的効果以外に<strong>検索エンジン対策</strong>にも有効です。
</p>
<p>&nbsp;</p>
<div class="ao_waku"><h2>話題その2</h2></div>
<img src="./img/photo01.jpg" style="float:left;margin-right:10px;border:3px ridge teal;" alt="美味しそう!">
<p>
楽しい写真を貼るとホームページもにぎやかになりますね!
</p>
<p>
枠線で飾ってみてもいいかもね!
</p>
</div>
<div id="sub_spc">
目次
</div>
<br class="fe">
</div>
</div>
</body>

これで、「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」をベースに作っていきますので、比較的楽に出来ます。
何事も最初の一歩が大変なんですね!

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

トリさんトートバッグ
サイズ:約
370mm×360mm×110mm
(縦×横×底マチ)
25mm×470mm(持ち手)
内容量:約10L
材 質:綿100%


<送料>
ゆうパック 一律500円
沖縄1000円
メール便 一律160円

 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索