”親父のホームページ”の進化!!
一応完成した親父のホームページ。しかし、いざ出来上がると欲が出てくるもんです。
もっと色んな技を使いたい!!他のホームページなんかを見ていると、「どうすればこんな風になるのかな〜」とか
「親父もこんな技使ってみたいな〜」なんて思うんです。そうやって少しづつ親父のホームページは進化していくのです!!(もう一度念押ししますが、みんながメモ帳に書きこむ時は、必ず半角英数を使ってくださいね!!)
行間に区切り線を入れる
題名と本文の間に区切り線を入れてみた。結構いいな〜。こういう区切り線は結構使えるな!!
使い方は簡単。線を入れたい行間に<hr>と入れるだけ。線の太さを変えるには、<hr size=”4”>
みたいに入れればよし!!普通の線の太さは”2”らしいぞ!!長さも変えられる。<hr size=”4”width=”90%”>
と書けばOK!!”と”の間はウィンドウに対する比率らしい。90%より50%の方が短いって事だろう。これで”区切り線”完璧!!
背景に壁紙を設定する
こんどは背景に、素材集サイトで手に入れた壁紙を設定してみよう。いままで親父は、背景に色を入れただけだった。
というよりそれしか知らなかった。素材集サイトで壁紙を見て、「どうやって使うのかな〜、使ってみたいな〜。」
と親父は思っていたのです。これが以外と簡単だった!!<bodyの後にこう続けるだけ!!background=”壁紙の名前.jpgまたはgif>
jpgまたはgifの所は保存した後に確かめておけばいい。これで背景に壁紙が設定できたぞ!!
フレーム@
2つのページをくっつけて、1つのウィンドウに表示する。なんか難しそうだな〜。とりあえずやってみるぞ!!
親父のイメージとしては、たてに2つ、左が狭くて右が広くて・・・結果としては親父のホームページの、”日記のページ”と”バナー広告”のページみたくなりました。
まず、2つのページをそれぞれ別々に作っておく。左のページは結構狭くなるので考えて作っていかないとな!!
2つページが完成したら、あとはくっつけるだけ。ここで2つのページをくっつける新しいページを用意する。この時いつも入れてる<body>入れない。左のページの名前をhidari.html右をmigi.htmlとして、
<html>
<head>
<title>フレーム@</title>
</head>
<frameset cols=”25%”,”75%”>
<frame src=”hidari.html”>
<frame src=”migi.html”>
</frameset>
</html>
という事だ!!”○○%”は、左と右の比率ってことだな。以外と簡単だったぞ!!これでまたまたホームページのレベルアップ!!ちなみに上と下に分割したい場合、colsをrows
に変えればいいみたいだ。
フレームを違うページに移動させない
なななんと、フレーム@のページから他のページに移動する時フレームがくっついてくるぞ〜。
親父はあせった。でも、ちゃんと解決方法があったんです。それには、フレームを解除してリンク先のページを表示させればいいらしい。
<a href=”リンク先のページ.html”target=”_top”>リンクを設定した文字</a>
でOKだ!!
ページにフレーム領域を作る
次は、ページにフレーム領域を作ってみよう。今みんなが見ているまさにこれ!!
親父はこれがだいのお気に入り。TOPページにも作っちゃいました。まず、フレームの中のページはもちろん別のページ。
別に作っておく。名前をbetuno.htmlとしておこう。メインのページにこうだ!!
<iframe src=”betuno.html”width=”60%”height=”200”align=”right”>
</iframe>
width=”60%”の60は、ページの横幅の比率。height=”200”の200はフレーム領域の高さです。align=”right”というのは、フレームの位置。今回は
右ぞろえということだ。これで出来たぞ!!かなりの高等技術??
フレーム領域へリンクを設定
せっかくフレームを作ったんだから、リンクを設定してみよう。今あなたが、”フレーム領域へのリンク設定”の右のリンクをクリックしたら、
フレームの中が”フレーム領域へリンクを設定”に飛んだはず。これですこれ!!
これも親父はそうとう気に入ってます。まず、リンクの設定をするページが別々だとする。1つ目のぺーじがhitotume.html2つ目がhutatume.htmlにするとします。
フレームを作った時のあとにまずこう続けます。
<iframe src=”betuno.html”・・・・・align=”right”name=”inline_f”>
と入れます。そしてリンクする文字を設定する時に、
<a href=”hitotume.html”target=”inline_f”>リンクに設定する文字</a>
でOK!!二つ目のページに設定するときはhitotume.htmlをhutatume.htmlに変えればいい。これで完了だ!!
ページ内にリンク設定
次はページ内の特定の部分にリンクを設定する方法。例えばページがすごく長くなた場合、最後まで読んだ後ページのTOPに戻るのは大変だ。
そこでリンクを設定してページの1番上に戻れるようにする。それにはまず戻りたい文字、例えば”親父”という文字に戻るリンクを設定する場合、”親父”の前後に
<a name=”kokoni”>親父</a>
と入れる。kokoniというのは、リンクさせる文字とリンク場所をむすぶ暗号みたいなもの。解りやすければなんでもいい。そしてリンクさせる文字に、
<a href=”#kokoni”>リンクさせる文字</a>
でOKだ!!このタグを使えば前に説明した”フレーム領域へリンクを設定”の時、同じページの特定部分を表示できる。
親父もそうしてるけど、フレーム内にリンク先を表示する時、ちょっとした説明だったりそれほど長くないものだと、
それぞれ違うページを作っていられない。その場合、1つのページに項目を作っておいて特定部分にリンクさせる方がいい。
<a href=”hitotume.html#angou”target=”inline_f>リンクに設定する文字</a>とする。
リンク先は<a name=”angou”></a>でOK!!
表を作成する
表を作成してみよう。これは、サイトのデザインを考える時に非常に大事になるかも。まず説明すると、<table></table>で表を作る事を宣言する。
間に、<tr></tr>で行を作る。さらにその間に<td></td>でセルを定義、この間に文字なんかを入れていく。こうゆうことです。例えば、
<table border>
<tr>
<td>みのもんた</td><td>おもいっきり生テレビ、クイズミリオネア等レギュラー多数</td><td>金持ち</td>
</tr>
<tr>
<td>親父</td><td>「初心者親父のホームページ&パソコン生活」サイト経営</td><td>貧乏</td>
</tr>
</table>
と入れると、
| みのもんた | おもいっきり生テレビ、クイズミリオネア等レギュラー多数 | 金持ち |
| 親父 | 「初心者親父のホームページ&パソコン生活」サイト経営 | 貧乏 |
こうなる。borderは罫線の表示です。罫線を表示したくない場合は、border=”0”と入れます。
ちなみに、見出しをつけたい場合<td>のかわりに<th>を入れます。
<tr>
<th>名前</th><th>活躍の場</th><th>生活</th>
</tr>
と最初に入れると、
| 名前 | 活躍の場 | 生活 |
| みのもんた | おもいっきり生テレビ、クイズミリオネア等レギュラー多数 | 金持ち |
| 親父 | 「初心者親父のホームページ&パソコン生活」サイト経営 | 貧乏 |
と見出しが入る。ん〜、見出しが入ると表を作ったって感じがする。この表をページの中央の持っていきたい場合は、
<table border align=”center”>
と入れれば、表を中央に表示できる。あと、<tableの後にwidth=””を入れることで表の横幅を指定できる。
例えばwidth=”200”と入れたら、
| 名前 | 活躍の場 | 生活 |
| みのもんた | おもいっきり生テレビ、クイズミリオネア等レギュラー多数 | 金持ち |
| 親父 | 「初心者親父のホームページ&パソコン生活」サイト経営 | 貧乏 |
これで横幅を指定できました。それぞれのセルの横幅を指定したければ、<td width=”○○”>と入れれば各セルの横幅を指定できます。
また、それぞれのセルを横幅に対する比率(%)で指定してもいいです。15%、60%、25%みたいに1つの行のセルの横幅を割り振るような感じです。
また、セルの中の文字を中央に寄せたい場合も<td align=”center”>で寄せることもできます。
セルの高さを指定したい場合は、<td height=”○○”>でOKです。背景を入れたい場合は、前に説明した背景色を変えたり、壁紙を使う時と基本は同じです。
表全体に背景色や壁紙を入れたければ、<trの後に、それぞれのセルに入れたければ<tdの後に入れればOK!!
このタグは、色んな形で活躍してくれると思います。例えば、親父のトップページにも結構使ってます。どこに使ってるかわかりますか?
単純に表を作成するだけじゃなく、デザイン的にもきっと活躍してくれるはず。ちゃんと基本だけは守って、色々試してみよう!!
文字を流して表示する
次は文字を流して表示してみよう。少ないスペースでちょっとしたコメントを使いたいときなんかに活躍してくれそうだ!!
このタグを知った親父は、早速トップのページで活用。ただ使いたかっただけなので、ちゃんと使えてるかどうかは微妙・・・。かみさんに見せた所、「なんかうざい」と一言。
でも使いたかったんです。ちゃんと使えばかなり活用できるタグのはず。簡単です。
<marquee>
流したい文字
</marquee>
これだけ!!これでどうなるかというと、
となります。すごいぞ!!もちろん色々手を加える事もできます。文字を左から流したり、背景を変えたり、文字の大きさや色を変えたり、いっぺんに行ってみよう!!
<marquee direction=right bgcolor=”99ffff”>
<font size=”2”color=”#ff0099”>
流したい文字
</font>
</marquee>
といれると、
となります!!direction=rightで文字が左から右に流れます。親父は見習わず、上手に使ってみてね!!
テーブルを横に並べて表示する
次はテーブルを横に並べて表示する!これはデザイン的にかなり使えます。簡単です。要はテーブルの中にテーブルを作ればいいんです!
<table>
<tr>
<td>
</td>
</tr>
</table>
という基本のテーブルタグの中にさらにテーブルを作っていきます。横にテーブルを並べていくのですから<td>と</td>の中にテーブルタグを入れていきます。
<table>
<tr>
<td>
<table width=”100”height=”200”border>
<tr>
<td bgcolor=”#ffffcc”>
メニュー
</td>
</tr>
<tr>
<td>
とんかつ
ラーメン
ハンバーグ
カツ丼
焼肉定食
</td>
</tr>
</table>
</td>
<td>
<table width=”200”height=”200”>
<tr>
<td>
ようこそ!親父食堂へ!当店は安心安全な食材を使い心を込めて調理をしております。
どうぞごゆっくりとおくつろぎ下さいませ。従業員一同
</td>
</tr>
</table>
</td>
<td>
<table width=”100”height=”200”border>
<tr>
<td width=”30”>
豚肉
</td>
<td width=”70”>
鹿児島産の黒豚
</td>
</tr>
<tr>
<td width=”30”>
たまねぎ
</td>
<td width=”70”>
北海道産を使用
</td>
</tr>
<tr>
<td width=”30”>
麺
</td>
<td width=”70”>
自家製麺を使用
</td>
</tr>
</table>
</td>
</tr>
</table>
と入れると
|
メニュー
|
とんかつ
ラーメン
ハンバーグ
カツ丼
焼肉定食
|
|
|
ようこそ!親父食堂へ!当店は安心安全な食材を使い心を込めて調理をしております。
どうぞごゆっくりとおくつろぎ下さいませ。従業員一同
|
|
|
豚肉
|
鹿児島産の黒豚
|
|
たまねぎ
|
北海道産を使用
|
|
麺
|
自家製麺を使用
|
|
となります。ずいぶんと長々説明しました。「なんかややこしいな〜」と思ったかもしれませんがそんなに
難しくはありません。1つの大きいテーブルを用意して、そのテーブルをさらにテーブルで分けていく!といった感じです。
丁寧にタグを入れていけば案外簡単に出来るはずです!使いこなせればデザインにも幅が出るはず!頑張ろう!
メールアドレスへのリンク設定
よくみかける「メールはこちらから」というやつ!あのリンクを設定してみよう!!
メールは<a href=”mailto:メールアドレス”>こちら</a>から
でOK!!件名と本文にあらかじめ何かを書きこんでおきたいなら、
<a href=”mailto:メールアドレス?subject=相互リンクについて&body=サイトURLを忘れずに”>こちら<a>
でOKです!!?subject=が件名で&body=が本文に記載されます。
・・