×

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

ホームページの作り方 >> ホームページ作成編 >> レイアウトを作ろう2

ホームページ作成編 10.ホームページの作り方(レイアウトを作ろう2)

文章や画像を載せる全体部分の設定が出来たので、
このページから各部分の作成に入っていきましょう!
まずは、「見出し部分」です。
このホームページで言えば、正にこの部分です。

それぞれの部分を完成させよう!

少しずつですが、目標のホームページに近づいてきていますね!
前ページまで読んでいただければ、CSSを使ったホームページ作りの大まかな考え方は理解できたのではないでしょうか。
後は、これをどういう風に上手く使いこなしていくかですね!
もうしばらくがんばっていきましょう!

1.top_wakuの設定

前ページまでで、CSSとHTMLの関係はご理解いただけたのではないかなと思います・・・
大丈夫ですよね!
それぞれの部分(ボックス)の設定も基本的には同じ考え方と方法で、設定していきます。
思ったより簡単かもしれませんね!
まずは、見出し部分(top_waku)を設定していきましょう!

それでは、あなたの「style.css」に次のように書き加えてください。
(CSSファイルも長くなってくるので、今後は書き加える部分のみを表示します。)

#top_waku {
 width: 730px;
 margin-bottom: 20px;
 border: 3px ridge #ffff00;
 background-color: #ffffff;
 padding: 5px 15px;
 text-align: left;
}

h1 {
 font-size: 21px; color: #771155;
 line-height: 150%;
 text-decoration: underline;
}

「text-decoration」は、文字の装飾、「underline」はアンダーラインという意味になります。
見出しの文字「Wellcome to my Homepage!!」にアンダーラインが付きましたよね!
××の部分は他に「overline」「none」等が設定できます。
そして、「top_waku」をHTMLファイルに対応させる為、「index.html」に以下のように書き足してください。
「h1」はHTMLタグにあるので、そのままで大丈夫ですね!
これで、top_waku(見出し部分)は完成です!やりました!

又、CSSファイルの赤い文字の部分を色々変えてみて、その役割を実感してみてください。

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

2.main_spc、sub_spcの設定

まずは、どうするんでしたっけ?
そうそう、CSSファイルに書き加えていくんですよね!

#main_spc {
 width: 75%;
 margin-bottom: 20px;
 padding: 0px 10px;
 text-align: left;
 float: right;
}

#sub_spc {
 width: 22%;
 margin-bottom: 20px;
 padding: 0px 0px;
 text-align: left;
 float: left;
}

.fe {
clear: both;
}

「width」の××部分、「75%」は、そのひとつ上のボックスの幅の75%いうことです。
今は、「main_spc」を設定していますよね。
「main_spc」は「field_spc」の中に、「field_spc」は「body」の中にあるので、「main_spc」の幅「75%」ということは、1つ上のボックス、すなわち「field_spc」の幅の75%という意味になります。もちろん「%」の代わりに「px」等で指定してもかまいません。

2-1.「float:right;」について

「mai_spc」△△の部分「float」についてレイアウトを組む上で、重要なのでよく覚えておいてください。
「float」は「回り込み」という意味です。

「main_spc」の部分の「回り込み」は、「右」だよ
という意味になることは、分かりますね。では、これは一体どういうことなのか・・・
(他の△△、××部分は省略しています。)

通常、<div>〜</div>で作るボックスはブロックレベル要素といって、その前後で改行されるように初期設定されています。
そうすると、たて(上下)にボックスを並べるには、支障はないのですが、今回目標とするホームページのように、メインコンテンツのボックスの左にサブコンテンツを配置したり、その逆に配置したりするように左右に並べることはできません。

field_spc
top_waku
main_spc
sub_spc

そこで左図のような配置を可能にする為に「float」を使い、ボックスを回りこませ、レイアウトを作っていきます。

「float:right;」を設定するとそのボックスは、右寄せに配置され次以降のボックスは、その左側にきます。(leftの場合はその逆)


今回は、一番大事なコンテンツを載せる「main_spc」をサブコンテンツのスペース「sub_spc」の右に配置したいので、「main_spc」で「float:right;」を設定しています。
又、IE(Internet Explorer)であれば、「main_spc」の左側に配置する「sub_spc」には「float」の設定をしなくても意図したとおりに画面に表示されますが、「Fire Fox」いうブラウザの場合は、表示が乱れるので、「sub_spc」には、「float:left;」を設定しておきます。

2-2.「.fe{clear:both;}と<br class="fe">」で回り込みを解除します。

回り込みをしたら、解除もしてやる必要があります。 あなたのホームページでは、回り込みを解除した後、<hr>(水平線)を表示させることしかしていませんが、ここに何らかの表示、例えば、著作権表示であったり、広告であったり、更に内容(コンテンツ)が続く場合であったりしたときに、回り込みを解除すると、「float」で指定したボックスの下に表示されるようになります。
「.fe{clear: both;}」が回り込み解除の設定です。
下のHTMLソースのように<br class="fe">と使います。

「.」が頭に付く「class(クラス)」が出てきました。
「id」と働き的には同じですが、クラスの話は、次のページの「豆知識」を読んでみて下さい。

さて、CSSファイルへの記入が終わったら今度は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">
話題その1
</div>
<div id="sub_spc">
目次
</div>
<br class="fe">
</div>
</div>
</body>

<body>〜</body>に「field_spc」が入りその中にまず、「top_waku」次に、「main_spc」「sub_spc」が配置されているのが分かりますね。
「main_spc」に「float:right;」と設定しているので、「sub_spc」が、「main_spc」の横に表示されます。

「main_spc」「sub_spc」ともborderを設定していないので、枠線は見えませんが、「話題その1」「目次」の表示位置を見るとしっかりレイアウトされているのが分かりますね!

<div>の開始タグは、「id="main_spc"」等が付いているので何を設定しているか分かりますが、終了タグは、全部</div>で、区別が付かないので、間違わないように気をつけましょう!

これで大まかなレイアウトは出来ました。よかったぁ〜!!
次ページからは、詳細の設定をしてホームページを完成させていきましょう!

HTMLファイルには、ホームページの内容を、CSSファイルにはブラウザに表示させる時のレイアウトや文字の大きさ等の設定を書き込んでいくことや、両者の密接な関係はご理解いただけたと思います。ここで、このページ本文の一番下の(赤い字で「話題その1」「目次」等が表示されている)HTMLソースを見ていただきたいのです。ここで、覚えておいていただきたいことは、それぞれの<div>で囲まれた「top_waku」「main_spc」「sub_spc」の順番がそのホームページの重要なコンテンツの順番であるということです。「top_waku」の部分は見出し部分なので、当然レイアウト的にも一番上に表示させたいしHTMLソースでも上の方にありますね。次に「main_spc」にはあなたのホームページのテーマの内容を書いていくわけですが、例えば「美味しいラーメンの作り方」をテーマとしたら「main_spc」に作り方やコツを書いていき、その内容があなたのホームページにとって一番重要となるわけです。次に「sub_spc」には、目次や例えば、ラーメンのお皿のことを書くとしましょう。目次やお皿の話は、(「美味しいラーメンの作り方」をテーマにしているとしたら)ラーメンの作り方の話よりは、重要度が落ちますよね。ブラウザに表示させる時は、「main_spc」と「sub_spc」は左右の位置関係ですが、HTMLソースを作る時にはどちらかを先に書いていかなくてはなりません。SEO的に言うと検索ロボットはHTMLソースの上に書いてあることほど、重要であると理解するそうです。なので、「sub_spc」の内容より、「main_spc」の内容を上に書いておいた方がいいのです。そのような関係で、今あなたが作りかかっているホームページでは、「main_spc」を右にfloatさせ、HTMLソースでは先(上)に表記しているのです。このホームページのHTMLソースも大体同じような順番で書かれています。

マグカップS ■ハッピーコイン■  ホワイト/ブラック

サイズ:約
 口径84o×高さ77o
重 量:約220g
全容量:約220t
材 質:磁器


<送料>
ゆうパック 一律500円
沖縄県1000円

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