-

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

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

-

文字の大きさを変えたり色をつけたりしてみましょう

ブラウザに表示される文字の大きさを変えたり、斜めにしたり、文字に色をつけたり、その文字の背景に色を付けたり・・・
それら文字に特殊な効果を与えることを
『テキストのデコレーション』と呼びます。
このテキストのデコレーションにはたくさんの種類がありますが、
ここではその中でも特によく使うものについて扱っていきたいと思います。
旧来の文法だとhtmlソースの中の<タグ>の中に直接打ち込むことが正しいとされてきましたが、
現在ではスタイルシートを使って表記する方が
正しい文法であるという流れになりつつあるようです。

レベル7:はじめてのテンプレート

まず、ヘッダーに書かれているページのタイトルが他の文章と同じ大きさでは
なんだか味気ないので、
文字を大きくしてみましょう。

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;}
h1{ font-size 20px; padding:5px; margin:2px; }
h2{ font-size:14px; padding:0px 5px; margin:0px 2px; }
h3{ font-size:19px; background-color:#55f87c; padding:1px; margin:1px; }

↑今回新しく書き足した書式には
#(シャープ)も.(ドット)も頭についていません・・・。
・・・ってことは今までの流れから勘の良い人はピンとくるでしょう・・・。
「新しい<タグ>を使用するのかな・・・?」・・・と。
正解です!!
新しい<タグ>である『見出し』を今回使います。
『見出し』とは主にそのホームページで特に伝えたい重要な文字をいれるのに使ったりします。
<h1>〜</h1>から<h6>〜</h6>まで6種類あり、
数字が少なくなるほど重要な文字列であると認識されます。
通常<h1>〜</h1>にはそのホームページのタイトルを入れるのに使います。
ではさっそく同じような要領で、htmlソースの方もいじってみることにしましょう。

index.htmlの中身
<div id="base">
<div id="head">
<h1>
このホームページの題名
</h1>
<h2>
このホームページのサブタイトル
</h2>
</div>
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の2行目を入れる。やっぱり文章はなんでもいい。<br />
本文の3行目を入れる。やっぱり文章はなんでもいい。
</p>
<a href="lev2.html">レベル2のページへ行く。</a>
<div id="bottom">
<div style="padding-bottom:20px;">
当サイトはリンクフリーです。<br />
当サイトの内容を無断で複製・転載することはご遠慮願います。
</div>
copyright (c) 作った人の名前 All right reserved.
</div>
</div>

↑このように打ち込んで、上手くいけば概ね
この様な表示のされ方をするハズです。

ここまでできればトップページだけで構成されるサイトであれば

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

↑・・・と書かれているこの一行を消してしまえばテンプレートの完成です。
あとはお好みで色を変えてみたり、
文字を書き換えていくだけで立派なサイトが完成します。

高麗人参の効能と効果

↑ここのようなトップページだけで構成されているような単純な構造のサイトでよければ
ここまでやってきた事柄だけでも十分作れるハズです。

はじめてのテンプレートが完成した!!!でもっ・・・。

ヘッダーとフッターの間の本文を入れる部分に
<h3>〜</h3>で見出しを入れ、
普通の文章を入力していき、改行する時には行の右端に<br />タグを入力し、
またまた、<h3>〜</h3>で見出しを入れ、
普通の文章を入力していき、改行する時には行の右端に<br />タグを入力し、
・・・
・・・・・・これを延々と繰り返すだけで、テキストだけではあるものの
ちゃんとホームページとしての構造を形成するテンプレートが完成しました。

コメント

でもっ・・・。
コメント

もっと見栄えの良いホームページを作りたいっ!!
・・・と、ここまでやってきた方なら誰もがそう思うはずです。
ここで基本の形ができあがったので、
もっといろいろな事をやっていきましょう。

>>レベル8:複数のカラムを作ろうへ続く

スポンサードリンク



当サイトはリンクフリーです。
当サイトの内容を無断で複製・転載することはご遠慮願います。
copyright (c) azu2_ All right reserved.