×

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

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

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

body部の基本的な設定が出来たので、
次にページのレイアウトを考えて行きましょう。
せっかくCSSを使うんだから、ただだらだらと文章や写真を
並べるのではなく、
見やすくて綺麗なホームページにしていきましょうね!!

ページのレイアウトを考えよう!

料理を作る時でも、まず献立を考えてそれぞれの料理をどのお皿にどんな風に盛り付けをしていくか考えますよね。
献立(内容-コンテンツ)は一生懸命考えましょう!そしてホームページ作りの世界では、献立に合うお皿も自分で作れるし、テーブルにそのお皿を配置するのも自分でできます!

1.全体の構想を考えよう

基本となるbody部の設定が無事出来ましたので、次に具体的にページのレイアウトを設定していくとしましょう。

ここでも、とりあえず サンプル009-01 を見ていただいたほうが話が早そうですね!
ちょっと見づらいかもしれませんが、我慢してくださいね!

今回目標としているホームページのレイアウトを赤線で囲ってみました。
ご覧になってみても分かるとおりこのホームページのレイアウトは大きく

  1. body部
  2. field_spc部
  3. top_waku部
  4. main_spc部
  5. sub_spc部

の各部に分けています。

1.body部
(body部の設定は、前ページで行ったので大丈夫だと思いますが、一応まとめておきます。)

  • 下の画像を壁紙として設定しました。
  • あまり画面のスミの方に文字や画像を置くと見にくい場合があるので四方向にmarginを設定しました。
  • その他基本となる、字体、字の大きさ、色、行間等を設定しました。

2.field_spc部

  • このスペースは、いわば台紙のような役割としています。
    壁紙には下の画像(縮小しています.)を使いborderで深緑のような色(#003311)を設定することにより紙を何枚か重ねたような感じにしています。
  • このスペースには、下部の著作権表示以外は直接、文字や画像をおかないで、「top_waku」「main_spc」「sub_spc」をおいて、その中に文字や文章(コンテンツ)を表示させています。

3.top_waku部

  • このスペースから実際に文字や画像を置いています。
    「top_waku」部には、見出しとしての役割を割り当てています。
    場所は「field_spc」の中央上部です。
    borderを設定し枠を表示させています。
  • ここにはホームページの題名と要約した一言を載せています。

4.main_spc部

  • このスペースにメインのコンテンツを書いていきます。
    CSSの話ではないですが、ここの内容のよしあしでそのホームページの出来が決まってきますね!
  • 場所は、「top_waku」の下、右側です。
    メインコンテンツを置くので、広さも一番大きく取ります。

5.sub_spc部

  • このスペースには、目次やメインコンテンツから波及した話題、広告等を載せます。
    画面では、左側に位置していますが、HTMLソースでは、「main_spc」の下になります。

今回はこのようなレイアウトでホームページを作成していくことになりますが、いつでもこの形にしなくてはならないなんてことは全然ないので、色々素敵なレイアウトを考えて、自在にそれを組んでいけるようになっていきましょう!

2.ボックスを作っていこう!

先ほどの サンプルページ009-01 を見ていただいても分かるように、ホームページのレイアウトをくむ時は、通常(今回の例で言えば、@〜Dのような)四角のスペースを画面に割り当てていく作業をすることになります。
この四角のスペースは「ボックス」と呼ばれています。
この「ボックス」の大きさや位置にによって、ホームページのレイアウトは決まってきます。

それでは、実際に各ボックスの設定をしてホームページに反映させていきましょう。
だんだん目標のホームページに近づいていきますね!

2-1.field_spcの設定をしよう!

それでは、「style.css」に次のように書き加えていきましょう。

body {
 background-image: url(img/kabe03.gif);
 margin-top: 20px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;
 padding: 0px;
 text-align: center;
 line-height: 150%;
 font-family: MS ゴシック,sans-serif; color: #333333;
 font-size: 14px;
}

#field_spc{
 width: 780px;
 background-image: url(img/kabe01.jpg);
 border: 10px solid #003311;
 padding: 20px 10px;
}

これは、サンプルページのA「field_spc」についての設定です。
「width」は「幅」という意味です。

「border」(境界線)の××部分、「10px solid #003311」は「太さ、線のタイプ、色」ということは前ページでも書きましたね。
太さや色は大丈夫だと思いますので、線のタイプについてちょっと書いておきます。
タイプには、「solid」「double」「groove」「ridge」「inset」「outset」「dashed」「dotted」等があります。お好みに合わせてご自分で太さやタイプ、色等を色々入れ替えてみて見るのも楽しいですよ!

「padding」(border内側の余白)の××部分、「20px 10px」については、

  • ××を一個設定した時(例)padding:10px;
    四辺全てについて10px
  • ××を二個設定した時(例)padding:20px 10px;
    上下については20px、左右については10px
  • ××を三個設定した時(例)padding:30px 20px 10px;
    上については30px、左右については20px、下については10px
  • ××を四個設定した時(例)padding:40px 30px 20px 10px;
    上については40px、右については30px、下については20px、左については10px
という意味になります。

次に○○の部分「#field_spc」についてですが、「field_spc」という名前は私が勝手に付けた名前ですので、「zentai」でも「sitawaku」でもかまいません。
これは、「top_waku」「main_spc」「sub_spc」についても同じです。
それぞれ、いろんな設定をしてそれに名前を付けてやっているのです。

その点、最初に作った「body{〜}」はhtmlタグの「body」に対応しているので、○○の部分は必然的に「body」となります。

HTMLタグに対応させることなく独自に作った名前の頭には、「#」又は「.」をつけます。
頭に「#」を付けると「id(アイディ)」、「.」を付けると「class(クラス)」と呼びます。
これらの違いについては後ほど・・・

「id(アイディ)field_spcの

  • widthは780pxだよ
  • background-imageはurl(img/kabe01.jpg)だよ
  • borderは10px solid #003311だよ
  • paddingは20px 10pxだよ

以上。」
ということになりますね!
又、ここでは字の大きさ、種類等の設定は行いませんでした。1つ上のボックス(この場合は「body{〜}」で設定しているので、それがそのまま生きてくるのです。
もし、「field_spc」で他とは違う色や大きさ、種類等の文字を表示したければ、ここでそれぞれ設定していくことになります。

2-2.HTMLファイルに対応させよう!

ところで、「body{〜}」の場合は<body>タグがあるので<body>〜</body>が対象範囲でしたが、idやclassは名前を独自に付けているので、HTMLファイルの対象範囲を決めてあげなくてはなりませんね。

ここで、久しぶりに「index.html」を見てみましょう。そして、以下のように書き足してください。
<body>〜</body>のみ表示していますが、当然あなたの「index.html」には、head部分も書き込まれていますよね!

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

<div>は複数行の文章をグループ化するタグでこの場合は、「id="field_spc"」とつけることにより、CSSファイルの「#field_spc{〜}」に対応させています。
あなたのホームページにも サンプルページ009-02 のように先ほど設定した、「field_spc部」が現れましたね!よかったよかった!

マグカップM ■トリさん■  ホワイト/ブラウン

サイズ:約
 口径78o×高さ90o
重 量:約260g
全容量:約300t
材 質:陶器


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

HTMLファイルで表を作る時の為に<table>というタグがあります。
そしてホームページの画面を1つの大きな表に見立てて、ページのレイアウトを<table>タグで行なっているホームページが良く見られます。私も前は、そのようにしてホームページを作っていましたが、HTMLソースがどうにもこうにも複雑になってしまいます。
今、あなたが目標としているホームページのレイアウトは比較的シンプルな構造ですが、それでもbodyの中にfield_spcをおいてその中に見出しのスペースやメインコンテンツのスペース、サブコンテンツのスペース等を配置しています。そしてその中に本来<table>タグを使って作る表を置くとしたら・・・<table>タグの中に<table>タグ、そしてその中に又<table>タグ・・・ソースを作っているうちにわけが分からなくなってしまいますね。
やはり<table>タグは表を作る時に使って、ページのレイアウトには使うべきではないと思います。CSSファイルでしっかりページのレイアウトを設定してHTMLファイルはホームページの内容(コンテンツ)を充実する為に作っていきましょう!


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