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

・超メジャーなHP作りの王道を知れ！＝＝＝＞

とほほのWWW入門 　
評価ポイント：あまりにメジャーです。

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

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

前回（第5回）の予告通り、ボタンを使って、軽く遊んでみましょう。

１）ボタンの作成
ボタンのタイプ
画像(gif,jpgなど） を利用したものが、一般的になってしまいましたが、例えば、セルを利用したものも簡単に・軽く作れます。そうは言っても、オリジナリティーに
優れた画像利用のボタンをやった方が面白そうですね。
さて、まずは、ボタンの調達は、
①Wins標準の「ペイント」 やフリーのペイント・ソフトなどを用いて描く。
②WEB上のフリー素材を持ってくる。
③セル塗りつぶし
のいずれかだと思いますが、MASHとしては、軽めのHP向きということで、上記③で進めたいと思います。MASH自身は、オリジナル素材で勝負してます。
見栄っ張りだから（笑）
下のテキストをコピー＆ペーストして、いつものように、適当なファイル名＋拡張子html(又はhtm)で保存してからブラウズして下さい。
こんな感じになります。

2）ボタンの上手(だと思う)使い方
・ボタン色は、なるべく「長時間見てても疲れない、且つ　ちょっとオシャレなパステルカラー 」でね。

・ボタン内に機能名を表示するだろうけど・・・次のことを守るといいかも(特に、WEBデザイナーで活躍している人には必須だそうです。)
①やさしい言葉(日本人に対して、あまりに専門的な用語を英語で書かない！)
②短い言葉(長い言葉だと、「判ってるよ！」って怒られそう。)
③見て一発で理解してもらえる言葉（例：私の普段着の写真・・・とか　ちょっと意味深？）
④似たような言葉を使い分けない！（NEWS, お知らせ, What's New? を混在させない）

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


<html>

<head>

<title>button training</title>

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

</head>

<body>

<!--
まずは、"table"タグを使って、いわゆる表作成の1単位となる"セル"を塗りつぶして"ボタン"として利用する例。
ボタンのサイズは、widthが幅、heightが高さを意味します。単位はピクセル。適当な数字に変えてみると変化するよ 。
その際、以前、習った"リンク"情報を"a href"で埋め込む。これで、リンク・ボタンの出来上がり！
これだけじゃ、あまりにつまらないので・・・・ボタン表示名に関するノウハウみたいなものも書いておこう。

-->

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

<tr bgcolor="#CC99FF">

<td>

<div align="center"><font size="2" color="#FFFFFF"><a href="poem2001d.html" target="_self">私の詩</a></font></div>

</td>

</tr>

</table>

<div align="center"><p>短い言葉にできるといいね。</p></div>

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

<tr bgcolor="#99FF33">

<td>

<div align="center"><font size="2" color="#FFFFFF"><a href="aquatrain.html" target="_self">海水魚の飼い方 </a></font></div>

</td>

</tr>

</table>

<div align="center"><p>相手にやさしい言葉だと喜ばれるかも。</p></div>

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

<tr bgcolor="#FF9999">

<td>

<div align="center"><font size="2" color="#FFFFFF"><a href="index.html" target="_self">HPの表紙</a></font></div>

</td>

</tr>

</table>

<div align="center"><p>一発で意味が判るといいよね。</p></div>

</body>

</html>

次回は、表組みを使ったHPレイアウトにトライしてみましょう。それでは！
有名・強力壁紙関連サイトへのリンク MASH厳選 素材リンク集

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

MASHのHPへ