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

やっぱり、素材を入手してＨＰを作るのが近道！＝＝＝＞

ホームページ作成ＮＡＶＩ
評価ポイント：素材集サイト中心のリンクです。かなり、勉強になりそうなサイトが多いです。

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

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

前回（第7回）の予告では、COOLなサイト紹介をテーマに考えていたが、その基礎となるスタイルシートを勉強しておこう。

スタイルシートで、すっきり・きっちりとおしゃれなＨＰを作ろう！
MASHは、ヒマな方なので、スタイルシートを使わない。HPを作るたびに、そのときの気分でデザインしちゃうわけ。だけど、賢明なあなたは、たぶん、ページが増えてくると、いちいち、他のページとのデザインのバランスをとるのは面倒なので、できれば、それなりのひな形を用意しておきたいと思われるだろう。確かに、世間のおしゃれなサイトでは、ほとんどが、スタイル・シートを使っているようだ。そこで、普段、使わないMASHが、ポリシーとは裏腹に、スタイル・シートのタグをご紹介する。まあ、深く考えずに見ていって下さい。 ただし・・・あくまで、カッコいいHPにできるかどうかは、あなたの努力とセンスで決まるので、その点はお忘れなく。出来上がりは、このようになります。
注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。


<html>

<head>

<title>Style Sheet 1</title>

<!--
ごく一般的なスタイルシート定義として、<head>〜</head>間で、フォント色、サイズや背景色などを
予め　決めておく方法がある。

-->

<style type="text/css">

<!--

a {text-decoration: none; font-size: 24pt; color:red}

h1,h2 {color:green; font-size:28pt}

-->

</style>

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

</head>

<body>

<!--
さっき、上で、a(アンカー)が付く文字について、下線なし、フォント・サイズ＝24pt、文字色＝赤
に、 更に、<h1>が付く文字は、フォントサイズ＝28pt、文字色＝緑　になるように定義しました。
もうお分かりですね。スタイル指定したいタグの後ろへ{ }で囲んで、スタイル定義します。
その際、複数のスタイル指定の区切りは;(セミコロン)、異なるタグに同じスタイルを適用したい場合は、
,(カンマ)でタグを区切って下さい。
-->

<a href="http://www3.plala.or.jp/mash/">MASHのHP</a><=ここからリンクできるよ！

<h1>さて、いかがでしょうか？定義した通りになってますか？ </h1>

<h2>さて、いかがでしょうか？定義した通りになってますか？ </h2>

<h3>さて、いかがでしょうか？こいつだけ定義されてませんね。 </h3>

</body>

</html>

次回は、もっと凝ったスタイルシート＝＞COOLなサイトの実例を検証！
有名・強力壁紙関連サイトへのリンク MASH厳選 素材リンク集

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

MASHのHPへ