MASHの「ホームページのススメ (Windows版)」

・ここだけで、ほとんど　必要なネタは手に入りそう！＝＝＝＞

ヨッシーのホームページ作成リンク集 　
評価ポイント：いろいろなジャンルのHP作成支援サイトを管理人様が上手にチョイスしており好感大！

ホームページを今すぐ作ってみよう！「テキスト・エディター編（その7）」

どうしても、お金を掛けずに自分でホームページ(以降 HPと呼ぶ）を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。（フリーウエアも一杯ある）例としては、Windowsにオマケで付いている「メモ帳」などである。

前回（第6回）の予告通り、表組みを使って、軽く遊んでみましょう。

１）表組みを使ったレイアウト
何となく、「表」という言葉から、仕事用のノウハウっぽい印象だが、これを上手に使うことで、
表面的には、「表」であることを感じさせずに、HPのレイアウトを引き締まったものにできる。
また、枠線太さ＝０にすることで、見る人に割付を意識させない利点もある。 さて、下の<html>〜</html>をメモ帳へコピー＆ペーストして、
とりあえず、table.htmlという名前で保存してみよう。このファイルを開くと、こんな風に見えるはず。

注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。


<html>

<head>

<title>Table training</title>

<meta http-equiv="content-type" content="text/html; charset=shift_jis">

</head>

<body>

<!--
まずは、<td>〜</td>：表の列数（縦割数）だけの繰り返し、<tr>〜</tr>：表の行数（横割数）だけの繰り返しを
利用して、簡単な表組みのスクリプトを作ると次の通り。最初に、tableタグでの宣言は必須なので、
忘れないように！ 尚、 borderは、枠線の太さ、alignは、表全体の位置を 定義する。
出来上がった表のひとうひとつのセル（格子）内の文字を自分の好きな言葉や数字に置き換えたり、
<tr>〜</tr>の部分を増やしていけば、表の行列数も増えていくので、お試しあれ。

-->

<table border="2" align="center">

<tr><td>1行目の1列目</td> <td>1行目の2列目</td></tr>

<tr><td>2行目の1列目</td> <td>2行目の2列目</td></tr>

</table>

<!--
次に、各々のセル内の文字の位置を、横方向、縦方向で定義してみた。前述のスクリプトでは、
この位置定義をしていないので、通常は、文字の開始は、セルの左上になる。
<td align="center"> 〜</td>で、文字は、横方向のセンターになる。代わりに、left ,right などにすると、
左、右指定と変更できる。同様に、縦方向は、<td valign="middle">〜</td>でセンターになる。
上、下付きに変更したい場合、 top, bottomとすればOK。ついでに、表内の背景色を bgcolorで定義。
それと、言い忘れたが、表のお題を入れるタグとして、<caption>〜</caption>を使用。お題を
表の下へつけたいときは、align="bottom" を<table　の後へ付け足すだけでOK。表の上で良いときは、
特に指定は要らないが、align="top"としても構わない。

-->

<p> </p>

<table border="2" align="center" bgcolor="#00FFFF">

<caption>ここは、表の題名</caption>

<tr><td align="center" valign="middle">ど真ん中揃え</td> <td align="left" valign="top">左上揃え</td></tr>

<tr><td align="right" valign="top">右上揃え</td> <td align="right" valign="bottom">右下揃え</td></tr>

</table>

<!--
更に、表のサイズを調整して、セル内の文字とのバランスをとろう。width, heightが、表の幅と高さを示す。
数字の単位は、ピクセル。まずは、ここの数字 250,130を調整してみて欲しい。
しかも、border="0"で、枠線を消すと・・・・文字がちらばった感じで、おもしろい。
これを、うまく使えば、おしゃれなHPに生まれ変わることも簡単！もちろん、セル内に、画像ファイルを
入れることで、奥行きのあるHPに変身可能。以前の講座で、画像の挿入方法をおさらいしてみて欲しい。

-->

<p> </p>

<table border="0" align="center" width="300" height="100">

<caption>表のサイズ調整と枠線なしで、文字が・・・・</caption>

<tr><td align="center" valign="middle">ど真ん中揃え</td> <td align="left" valign="top">左上揃え</td></tr>

<tr><td align="right" valign="top">右上揃え</td> <td align="right" valign="bottom">右下揃え</td></tr>

</table>

　

</body>

</html>

次回は、表組みの発展形＝＞COOLなサイトの実例を検証！
有名・強力壁紙関連サイトへのリンク MASH厳選 素材リンク集

次回 「テキスト・エディター編（その8）」 をお楽しみに！

MASHのHPへ