初心者でも無料でできるホームページの作り方

ホームページを作ったことがない初心者がメモ帳だけで見栄えの良いサイトを作れるようになるまで

スタイルシートを使ってテンプレートを作成してみましょう

スタイルシートを使って、ホームページらしく枠を組んでみましょう。
枠を組めば、この枠には背景色をこの色に指定して、
この枠にはこの画像を入れて、
そしてこの枠には文章を入れて・・・
・・・というような事ができるようになります。

レベル６：枠組み

通常、ホームページというものには
『ヘッダー』と呼ばれる場所と、『フッター』と呼ばれる場所があり、
その間に本体が存在しています。
ヘッダーとはこのホームページでいうところの
一番上の部分、『初心者でも無料でできるホームページの作り方』と大きく文字が書かれていて、
緑色っぽいグラデーションがかかっている部分の事を言います。
同様にフッターは一番下の部分、
緑色の単一色で描かれている部分で、
「当サイトはリンクフリーです。・・・」という文章が書かれている部分のことを指します。

まず、ヘッダーとフッター、そして本体に相当する枠を
スタイルシートを使ってサクッと作ってしまいましょう。
例によって赤く記した部分を新しく書き込んで上書き保存します

style.cssの中身

*{padding:0px;margin:0px;}
body{background-color:#bcf9b1;}
#base{background-color:#ffffff;width:800px;margin:5px auto;}

#head{width:800px;background-color:#55f87c;}
#bottom{ width:800px; background-color:#55f87c; font-size:12px; padding:10px 0px; text-align:center;}

↑#head{　}で指定した場所は「横の広さを800ピクセルにとり、背景色をコードで指定した（緑色っぽい）色にしろ」という意味になり、
同様に#bottom{　}で指定した場所は
「横の広さを800ピクセルにとり、背景色をコードで指定した（緑色っぽい）色にしろ」という意味に加えて
「テキスト（文字）の大きさは（ブラウザからの変更がない限り）12ピクセルで表示し、
枠の内側に余白を上下10ピクセル取り、その枠の中で書かれるテキストは中央よりに表示しろ」
・・・という意味になります。
ちなみに前にも出てきましたが、４方向に対して指示を出す命令文は、
後に続く数字が　padding:0px　のように１つだけの場合は４方向全部に対してその数字が適応され、
上記のようにpadding:10px 0pxのように２つ数字をつけた場合は、左から順に　上下→左右にその数字が適応され、
padding:1px 2px 3px 4pxのように４つの数字をつけた場合は、左から順に　上→右→下→左にその数字が適応されます。

次に、index.htmlの中身をいじります。
尚、

ここからは、基本的に<div id="base">～</base>以外の場所は変更をかけません。

ゆえに、index.htmlで変更かける箇所を説明する際もその部分は省略します。
（<head>～</head>の中にあるページの名前やキーワードについては各自の判断でお好みで書き換えていってください）

index.htmlの中身

<div id="head">このホームページの題名</div>

<a href="lev2.html">レベル２のページへ行く。</a>

<div id="bottom">
<div style="padding-bottom:20px;">
当サイトはリンクフリーです。<br />
当サイトの内容を無断で複製・転載することはご遠慮願います。
</div>
copyright (c) 作った人の名前 All right reserved.
</div>

</div>

↑<div style="padding-bottom:20px;">とは
実質<div style="padding:0px 0px 20px 0px;">と同じで、
「下の部分に余白を20pxとれ」という意味になります。
余白を取りたいなら、改行を表す<br />タグを連打してはダメなの？
という人もいるかもしれません・・・。
でも、<br />タグは本来「文字列などに対して改行を行う目的で存在しているタグ」なのであり、
決して「余白を作るために存在しているタグ」ではないのです。
見た目は同じに映るかも知れませんが、このような誤った文法はブラウザに誤解を与えかねないので

好ましい文法とは言えません。

＜タグ＞は本来の目的に沿った使い方を考慮したうえで、
見栄えの美しいホームページを目指すと同時に
正しい文法を用いた美しいソースを作っていくことも念頭においてホームページを作成していくようにしましょう。

index.txtを・・・

↑赤枠で囲っている部分が実際に目で見える場所なのでここに変更をかける・・・。
それ以外の場所は変にいじると
おかしな事になるかも知れないので書き換え箇所以外の場所には触れないでおこう・・・。

スタイルシートの変更を忘れた・・・

↑スタイルシートに変更をかけ忘れるとこのように表示される・・・。
（説明とか演出の為ではなく、実際に撮影の際、本当にかけ忘れた（爆））

スタイルシートを・・・

↑今回、赤枠の部分を新しく書き加えてみる。
ちなみに見ての通り、見やすくするために改行をしても文法が正しければ結果は正しく反映される。

今度は成功！バッチリ表示された

↑今度はスタイルシートが上手く反映されてバッチリ上手く表示された。
最初の一行しか書かれていない文章に比べればだいぶホームページらしくなってきた。

＞＞レベル７：はじめてのテンプレートへ続く

スポンサードリンク

当サイトはリンクフリーです。
当サイトの内容を無断で複製・転載することはご遠慮願います。