0．Webサイトつくり
1．エディタとは
2．メモ帳を使う
余談1 ＡＩの脅威
余談2 クラウドでファイルの出し入れ
余談3 サイト使用容量を最小化
余談4 使用ファイルの最小化
3．セキュリティー向上のために
4．強制改行のために
5．フォントの｢大きさ｣、文字寄せ、イデント
6．リンク先へ
7．ソースを見る
8．ソースを実行する
■0．Webサイトつくり
（Htmlファイルは）
ワードや一太郎、それにエクセルなどは、入力したように表示します。これとは違い、Html文章ファイルは多くのタグ（＜ ＞）が付き、編集中は全体像が見えにくいです。全体像を捉えるには、このファイルを実行する（[8.ソースを実行]）ことでブラウザーに表示されます。従って、Html文章の作成はエディタとブラウザーでやってます。印刷はブラウザー上でマウスの右クリックで可能になります。
ブラウザーはどれをお使いですか。Microsoft EdgeやグーグルChrome、さらにはSahari などがあります。いずれでも、編集中の内容は、ファイラー（Windows ならエクスプローラー）を起動させ、そのファイル（拡張子が「html」のファイル）をクリックします。お使いのブラウザーが起動し、そのHtmlファイルの内容が表示されます。これとリンクされたファイルも表示可能となります。
Htmlファイルの第一画面は普通 index.htmlと名付け、これを先頭に文章や画像のHtmlファイルがリンクされいて、その他のファイルは紐づるのように現れます。インターネットで表示されているものは基本このHtmlファイルでできています。以上、ここまでは自分のパソコンの中での話です。
それでは、自作したものをネットに繋がった外の世界（ネットカフェなど）から見るにはどうすればよろしいか。それは、契約されているプロバイダーのFTBサーバー（Webサーバー）に、ご自分のWebサイト一式（下記、wagayaフォルダの内容）をupすることです。これを、回線に繋がったパソコン・スマホから wagayaフォルダの index.html にアクセスすることになります。ただし、プロバイダーでもHome Pageをサポートしていないところは駄目です。
（Webサイトつくり）
当方のWebサイト（Home Page）つくりは、パソコン用の『WZ EDITOR』で文章を編集し、『FFFTP』(フリ－ウェア)にてFTBサーバーにupしています、これをパソコン・スマホで表示・確認をしています。
最終目的としては、スマホで「どこでもちら見(チラミ)」を考えています。度々の「スマホの覗き」は、『不道徳だ』『不謹慎だ』のそしりを免れないようでね。私にとって、スマホは情報端末であり、活動の指針となるものです。なかなかその欲求には勝てません。でも、スマホの表示ではスマホでは文字が小さく見にくくなってきました。パソコンやタブレットを推奨します。
Webサイト編集は日を要する作業です。USBの抜き差しは苦痛でたまりません。それでクラウドを引き出し代わりに使用しています。「引き出し」が同じなら別のパソコンでも作業はできます。この方法だと、編集中のファイルがパソコンに残っていたりして、古いファイルをクラウドにUPすることもあり『百歩進んで一歩後退』することだってあります。
また、サイト内を奔放に「あっちこっち」編集して「歩く」ものですから、その日の気合いの入れ具合で誤字脱字があったり文章の脈絡がおかしくなったりします。結果、迷惑をかけています。
■1．エディタとは「エディタ」はテキストエディタともいい至極便利なツールです。本来はプログラミング用のものです。これを初めから文章作成に使っておられる方もあるようです。
エディタは軽くて・安くて・早いが売りです。安いといっても10,000円程します。特に、エディタの検索機能については定評があり、保存したファイルが100や1000の数であろうが、検索語を探しだし、どのファイルのどの位置にあるか特定してくれます。これがコンピュータ・エディタの「なせる技」です。勿論、単語の置き換えなどお得意です。
※ エディタの他には、MIFES(マイフェス)、秀丸エディタなどが有ります。
さて、右図はWZ EDITOR 10で作ったHtmlファイルです。Htmlファイルの大きさは小さく、タグ（ < と > で囲まれたもの）がなければテキスト文に近いものです。Htmlのタグ付きならブラウザーの文章として見えます。
Webに表示するくらいなら、比較的簡単な学習でHtmlファイルをつくれます。一太郎をお使いなら、すでにある文章をHtmlファイルに変換することが可能です。この変換ではタグの使い方に無駄が多いようですが、参考になります。
■2．メモ帳を使う
初期のHtml学習には専用の「エディタ」は必要ありません。これをはじめから使用するのは、途中で断念ということもあり得ることなので、展望が見えてから購入しましょう。Windows10までは付属のメモ帳、Windows11ではそれに相当するWindows Notepadを使用します。Windows Notepad は標準でWindows11になく、ブラウザで「Windows Notepad」を検索し、マイクロソフトからダウンロードします。以下これもメモ帳とします。
次にHtml学習の一端を示します。２枚の図がありますが、左はメモ帳のHtml記述で『こんにちは、ようこそ』を表示させようとするものです。右はファイルとして保存するところです。
|
 |
これで第2講は終わりです。
（◆新たな神社サイトを作るなら、生成AIを学習しこれで作ったらいかがでしょうか）
『余談1』（ＡＩの脅威）
我々は探しものでWebサイト（＝Home Page）を検索します。この「従来のWebサイト」の検索頻度は一般的に下がってきているとのことです。検索で現れる第一画面がこれまでと違い、ブラウザーのＡＩが情報を横断的に収集し、その学習機能にて検索結果を表示するようです。同様なWebサイトが乱立している現状では、「ＡＩによつて整理され、まとめられる」と考えると、よい事かもしれません。探しものの発掘にスクロールを繰り返す、Webサイト探しも面倒ともいえます。
スマホにおいてはこの傾向がさらに進んでいるように思えます。検索し現れる第一画面がＡＩ表示になっていて一応満足した結果が得られ、検索を途中で切り上げてしまうことにもなるでしょう。また、情報を受け取る側も横断的な方法が習慣化し、見えていない部分があることも考えないで終わることもあるでしょう。結果、既存のWebサイトにたどり着かず検索は終了。パソコンであろうがスマホであろうが、これは深刻な事態だと考えます。
ＡＩの脅威にさらされ「従来のWebサイト」がどのような形にすれば生き残れるか、考えさせられます。Webサイトの目的は、広く皆さんに「お知らせ」する広報の部分と、関係者間の双方向の連絡・連携をはかる部分とがあると思います。仮に、私のWebサイトの広報の部分がＡＩのものに見劣りしたとしても、まだ「そこには」人と人を繋ぐ、連絡・連携（サポート）の部分があると考えます。そうでも考えなければ、私の今の努力（これから進める努力）も報われません。
『余談2』（クラウドでファイルの出し入れ）
私はクラウド（雲の上のHDDと考えてください）をファイルの引き出し変わりに利用します。それで、ファイルの更新日付は極めて重要なもになります。
このクラウドのファイルと当方のパソコンのものの日付で、ファイルの新旧を判断しクラウドへupします。upする先が同じであれば、別のパソコンからクラウドのファイルを引き出し、続き編集が可能です。パソコンは持ち歩く必要がなく非常に便利です。でも、クラウドの新しいファイルの上へ、古いファイルを書き込む事態がたまにあります。まさに『百歩進んで一歩後退』となり、日付の狂いが「私の発狂」の事態となって現れます。
ファイルの新旧の判断ミスだけでなく、まれに更新保存したファイルが日付が更新されずおこるミスもあります。古いパソコンを使っていないのでその理由が不明です。画像ファイルに多いようです。
『余談3』（サイト使用容量を最小化）
Webサイトの運営に際し、プロバイダー（回線業者）からいくらの容量が与えられているかは重要です。当方の場合の無料枠は20ＭＢで、これに有料5ＭＢを追加し運営しています。これはプロバイダーのFTBサーバーに25ＭＢまでのファイルを置けるという意味です。今のところ、神社関係だけで5ＭＢ以内です。普通に、1つの写真や図のファイルでも500ＫＢを、動画ファイルではすぐ1ＭＢ(1024KB)を超えてしまいます。それで、涙ぐましい努力で一つ一つのファイルを小さくしています。
使用容量を最小限に抑えるには、HtmlファイルだけでWebサイトを作るのが一番です。しかしこれでは文章と表だけということになり、Webサイトとしては「つまらなく退屈なもの」になります。
「つまらなく退屈なもの」は文章の長さにも関係し、文章が延々と続くようでは最後まで読んでもらえません。今の流行というものは、文章の簡潔さや映像にあるようで、「Ｘ」（ツイッター）が栄えるのもそこにあるようです。
プロバイダーとは異なるブログ・コミュニテーサービスの Ameba、ライブドアのブログなどにWebサイトを置く方法もあるようですが、使い勝手が違うようです。
『余談4』（使用ファイルの最小化）
Webサイトの使用容量を抑える努力は常に必要です。画像ファイルでは、画像の表示面積を小さくし、画質を下げています。拡大表示する必要ないものは、極力画質を下げて「ぼやけ」が最小限になるように50KＢ以下、最大でも40KＢ近くに抑えます。使用ファイルは、当初GIFファイルでしたがJPGファイルが改善されて、これを使用しています。
画像とテキスト(文字)があるPDFファイルでは、画像の部分の画質を落とすことでファイル全体を小さくすることが可能です。PDFファイルはワードやエクセルの [印刷] 処理でMicrosoft print to PDFを選択し作れます。これは一太郎や Word でも可能ですから、Windows OSの一つの機能のようです。このままでははっきり言ってファイルが大きすぎで使用できません。これをより小さなファイルにするために専用のPDF編集ソフトが必要です。文字ばかりのPDFファイルではファイルの縮小化は期待できないと考えてください。当方では
・画像ファイルの縮小：Ashampoo Photo Commander
画像ファイルを呼び出し、[メニュー]→[ファイル]→[名前を付けて保存]→[保存先フォーマット]→サイズ調整
・PDFファイルのさらなる縮小：PDF-Xchange Editor
画像ファイルを呼び出し、[ファイル]→[最適化して保存]
を使用しています。
動画ファイルはファイルの中で一番大きく、本来なら使用したくないのです。これについては、動画時間を短縮したり、1秒あたりのコマ数を少なくしたり、表示面積を小さくしたりしています。因みに、神輿の動画ファイル(MP4ファイル)1つ600～800KＢです（有料ソフトの良いものを使えばもっと小さくできます）。
■3．セキュリティー向上のために。
まだ、Htmlのプログラミングにまで行っていないのに、高度な話をします。ウ～。実は、私自身が日々学習なのです。忘れてはいけないので、記しておくのです。ご勘弁を。
Htmlでリンクを作るときに使う属性で、a href="" の後に、rel="noopener(no opener)を使うと、
①内容を書き換えられる
②フィッシングサイトに誘導される
③個人情報を盗まれる
などで、ページを操作できなくするようです。また、リンクで「新しいタグでページ開く」とき、target=”_blank”と一緒に rel=”noreferrer(no referrer)を付けるといいようです。これは、リンクの前がどこからやってきたか知られたくないとき付けます。以上、併せて rel=”noopener noreferrer”とします。
しかしながら、自分のサイト内のページへリンクする場合（内部リンク）は、rel=”noopener noreferrer”を付けないほうがSEO(検索エンジンの最適化)に良いといいます。（以上『ロコ ログ』より）
以上、第３講は終わりです。(2026.1.23)
■4．強制改行のために
文や文章の文末には強制改行の「br」を用います。「」を< >に読み替えてください。以下、タグは全て< >です。
この文章もHtmlでして、< >を用いると、Html文章のタグ・コマンドと読み違えてしまいます。
次はHtmlの例文
「エディタ」というのは至極便利なツールです。「br」「br」本来はプログラミング用のものです。これを初めから文章作成用に使っておられる方もあるようです。「br」エディタは軽くて・安くて・早いが売りです。特に、エディタの検索機能については定評があり、保存したファイルが100や1000の数であろうが、検索語を探しだし、どのファイルのどの位置にあるか特定してくれます。「br」
以上、強制改行「br」「br」で、二つ目で一行の空白行を作っています。
▼青文字部分を実行
「エディタ」というのは至極便利なツールです。
＜ 二つ目の「br」による空白行 ＞
本来はプログラミング用のものです。これを初めから文章作成用に使っておられる方もあるようです。
エディタは軽くて・安くて・早いが売りです。特に、エディタの検索機能については定評があり、保存したファイルが100や1000の数であろうが、検索語を探しだし、どのファイルのどの位置にあるか特定してくれます。
（普通、タグは< >で始まり「/」付きの< >で終わりますが、「/br」はいりません）
これを次のように「div」と「/div」で挟み込んでもいいです。
「div」「エディタ」というのは至極便利なツールです。「/div」「div」「/div」「div」本来はプログラミング用のものです。「/div」「div」これを初めから文章作成用に使っておられる方もあるようです。「/div」「div」 エディタは軽くて・安くて・早いが売りです。特に、エディタの検索機能については定評があり、保存したファイルが100や1000の数であろうが、検索語を探しだし、どのファイルのどの位置にあるか特定してくれます。「/div」
（「div」「/div」で空白行を作っています）
普通、プログラミン上見やすくするために「div」を先頭に持ってきます。
「font color="blue"」
「div」「エディタ」というのは至極便利なツールです。「/div」
「div」本来はプログラミング用のものです。これを初めから文章作成用に使っておられる方もあるようです。「/div」
「/font」（始めの「font color="blue"」と最後の「/font」で挟まれた文字を青色にしています）
以上、第４講は終わりです。(2026.1)
■5．フォントの｢大きさ｣、文字寄せ変更
[フォントの大きさ]
「div」「/div」は便利なタグで、文字（フォント）の大きさを変えられます。
通常、文字は15～16pxに（別のところで）設定していますが、
「div style="font-size:2.0em"」本来はプログラミング用のものです「/div」
▼青文字部分を実行
本来はプログラミング用のものです
以上で、文字の大きさは15pxの2倍(2.0em)になりました。[イデント、文字寄せ]
「div」「/div」は便利なタグで、文字寄せの変更もできます。
「div style="text-indent: 1.2em ; font-size:1.5em"」本来はプログラミング用のものです「/div」
▼青文字部分を実行
本来はプログラミング用のものです
以上で、イデント15pxの1.2倍(1.2em)、文字1.5倍(1.5em)になりました。「div style="text-indent: 1.2em ;line-height:1.5em; font-size:1.5em"」本来はプログラミング用のものです「/div」
▼青文字部分を実行
本来はプログラミング用のものです
以上で、イデント15pxの7.0倍(7.0em)、行間1.5倍(1.5em)、文字1.5倍(1.5em)になりました。★イデントとは字下げのことで「本来は」の位置を確認のこと。
▼次は、右寄せ(right)、文字1.5倍(1.5em)を実行
本来はプログラミング用に、、
▼次は、中央寄せ(middle)、文字1.5倍(1.5em)を実行
本来はプログラミング用に、、
▼次は、左寄せ(left)、文字1.3倍(1.3em)を実行
本来はプログラミング用に、、
以上、第５講は終わりです。(2026.1)
■6．リンク先へ（視点を紐付けた所へ飛ばします）
ジャンプ先に「a name="○△"｣｢/a」(○△はどういう名称でもよい）を記し、文中の文字列「□□」をマウスでクリックするとジャンプ先に飛びます（これをリンクを張るという）。本に付箋を貼り見開きやすくすると同じ。
▼例文
(ここに付箋！)「Webサイトの運営に際し、プロバイダー（回線業者）からいくらの容量が与えられているかは重要です。当方の場合の無料枠は20ＭＢで、これに有料5ＭＢを追加し運営しています」
上記の「 」文章の前にジャンプ先の始めに「a name="?????"｣｢/a」を設け（付箋を貼り）ます。
次に、例えば「私のプロバイダーから与えられている「a href="#?????"」容量は小さい「/a」ので常にファイルの大きさを小さくする工夫をしています。」の文章の『容量は小さい』にリンク（紐付け）させます。（”?????”には共通の文字：例えばabcd)
□次、赤文字をクリック実行してみてください 「私のプロバイダーから与えられている容量は小さいので常にファイルの大きさを小さくする工夫をしています」
【まとめ】(先)「a name="?????"｣｢/a」と (元)「a href="#?????"」単語を入れる「/a」を用います。
別のファイルabcd.htmlの「a name="?????"｣｢/a」へ飛ばす場合は、「a href="abcd.html#?????"」～「/a」となります。
「 」は全て< >です。
以上、第６講は終わりです。(2026.1)
■7．ソースを見る
|
|
|
 |
■8．ソースを実行する
・私のWebページ（ホームページ）のhtmlファイルは、例えば C:ドライブのwagayaフォルダにあるとします。このhtmlファイルから呼び出される画像ファイルや動画ファイルは、wagayaフォルダの下のimgフォルダの中に置いています。
C:\wagaya----- htmlファイル群（この中に最初に起動するindex.htmlがあります）
｜
-img：このフォルダの中に画像ファイル(拡張子jpg)
：このフォルダの中にPDFファイル(拡張子pdf)
それでは、Webページ（サイト）を表示してみましょう。Webページを表示するには、エクスプローラーを起動し、wagayaフォルダを表示します。次に、その中のindex.htmlを探し出し、そのファイルをマウスでクリックします。
すると、お使いのブラウザーが起動し私のWebページの第一画面が現れます。（実際にはwagayaのフォルダをプロバイダーのFTPサーバー置きます）
※ wagaya以下のhtmlファイルや画像ファイルを作り、公表できるWebサイトを作ってください。これに卒業できるようになるとFTPサーバーへのUPです。
以上、第８講は終わりです。(2026.3)