ホームページは、簡単に作れるようになりました。
私は、1998年にホームページを立ち上げました。ホームページに使用する文書は、HTML文書というものですが、山形括弧を使ったタグ（例：<h1>、<p> など)を打ち込んで作成します。このタグの打ち込みに時間がかかり大変でした。そのため、タグを打ち込まなくてもよいように、Word感覚で作成できるいろいろなソフトが開発され販売されました。MicrosoftのFront PageやIBMの「ホームページビルダー」、DBソフト社のHOTALLなどがありました。現在、デファクトスタンダードと言われているものに、Adobe社のDreamweaverがありますが、これは高価なため、アマチュアには手が出せません。
私は、最初は、Text editorにタグを打ち込んで作成していましたが、約１年半後にHOTALLを購入して使い始めました。このソフトは、使いやすかったので、長い間使ってきました。メーカのDBソフト社は、2003年頃消滅し、HOTALLは、現在販売されていません。
HOTALLは、2001年製なので、先端技術から大幅に遅れていることを承知していましたが、そのまま使っていました。ところが、あるホームページの大幅改編に際し、この辺で先端技術を取り入れるべきと考えました。そこで、新たに登場したHTML5規格（2014/10に勧告）で作成することにしました。HTML5規格は、文章の要素にだけタグを使い、要素の修飾には、スタイルシートというものを使うようになっています。
スタイルシートは、今までは、部分的に使っていましたが、全面的に使ってみると、非常に合理的で使い易いことがわかりました。
例えば、ホームページビルダーを使ってホームページを作ろうとすると、まずは、ホームページビルダーの使い方を覚えなければなりません。これが大変です。
Text editorにタグとスタイルシートを打ち込む方法だと少数のタグとスタイルシートを覚えるだです。文章は、見出し、段落、画像、表などの要素によって構成されています。この要素にタグを使います。実際の文章の中で使うタグを表１に示しました。通常、使用するものは、わずか13種です。この程度なら簡単に覚えることができます。次に要素をどのようなスタイルにするかは、スタイルシートで指定します。スタイルシートは、セレクター、プロパティ、バリューというもので構成されています。覚えるものは、プロパティとバリューですが、それを表2に示します。英語ですが、皆さんがよく知っている単語です。初めて見る単語は、collapse ぐらいでしょう。通常のホームページ作成には、この表2だけで十分です。
ホームページビルダーの使い方を覚えるより、表1、表2の使い方を覚える方がはるかに簡単です。筆者は、ホームページビルダーでは、簡単なものは、作れますが、少し複雑なものは、とても作れません。
市場には、HTML5規格に準拠した解説本が沢山出版されていますが、普通の人がこれを勉強してもホームページが作れるようになるとは思えません。なぜかというと、読んで行くと自然にホームページが作れるようになる説明になっていないからです。
そこで、私は、書いてあるとおりにText editorに打ち込んで行けば、ホームページの作り方が自然に身に着くような解説ページを膨大な時間を掛けて作成しました。このページを下に示します。
第2章9節まで行けが、簡単なホームページが作成できるようになります。皆さん、是非、挑戦してみてください。ゴルフの記録、旅行の紹介、お孫さんの成長の様子などをホームページに掲載して楽しんでください。そして、数年後には、この「日立シニアゴルフ会」のホームページ管理を継承していただけると期待しております。
なお、説明会などをやってほしいというご要望があれば、喜んでパソコンとプロジェクターを持って馳せ参じます。2016/9/21、2023/4/1 三澤 通宏
| No. | 要 素 | タグ |
|---|---|---|
| 1 | 見出し | <h1></h1>、<h2></h2>、・・・・・、<h6></h6> |
| 2 | 段落 | <p></p> |
| 3 | リスト | <ul><li></li></ul>、<ol><li></li></ol>、 <dl><dt></dt><dd></dd></dl> |
| 4 | 画像 | <img> |
| 5 | 表 | <table><tr><th></th><td></td></tr></table> |
| 6 | 枠 | <div></div> |
| 7 | 強調、太字 | <strong></strong>、<b></b> |
| 8 | 音楽 | <audio></audio> |
| 9 | 動画 | <video></video> |
| 10 | 区切り | <hr> |
| 11 | 部分修飾 | <span></span> |
| 12 | リンク | <a></a> |
| 13 | インライン フレーム | <iframe></iframe> |
| 14 | HTML5から | <header>、<nav>、<section>、<artcle>、<aside>、<footer> |
| No. | プロパティ(属性) | バリュー(値） |
|---|---|---|
| 1 | width | 例：640px |
| 2 | height | 例：32px |
| 3 | margin、margin-top、margin-right、margin-bottom、margin-left | 例：8px |
| 4 | padding、padding-top、padding-right、 padding-bottom、padding-left | 例：5px |
| 5 | border-collapse | collapse |
| 6 | border、border-top、border-right、border-bottom、border-left | 例：solid 1px #00f |
| 7 | border-radius | 例：10px |
| 8 | font-family | 例："ＭＳ ゴシック" |
| 9 | font-size | 例：16px |
| 10 | font-weight | bold、normal |
| 11 | line-height | 例：1.5 |
| 12 | color | 例：#ff0000 |
| 13 | text-align | left、center、right |
| 14 | text-indent | 例：16px |
| 15 | text-shadow | 例：1px 1px 2px #00f |
| 16 | text-decoration | underline、none |
| 17 | box-shadow | 例：2px 2px 3px #ccc |
| 18 | background | 例：#fafafa |
| 19 | float | left、right |
| 20 | clear | left、right、both |
| 21 | vertical-align | top、middle など |
| 22 | display | inline、inline-block、block |
| 23 | list-style | none など |
最上部のタブの×をクリックして戻ってください