ホームページを作ってみよう
自分の得意とすること、興味を持っていること、主張したいことがあり、それを世界中の人にアピールしたいと思うときに、SNSやブログなどとともに、ウェブサイトを作ることが考えられます。一時的に見て終わりのSNSやブログと比べると、道のりは長いですが。ウェブサイトの名前、URLをたくさんの人に覚えてもらえれば、世界に対して大きな影響力を与えることも可能かも知れません。
ウェブサイトを作るとき、市販されているホームページ作成ツールを使ってウェブサイトを作ることもできますが、自分の思い通りのホームページを作るためには、以下の手順を踏むことになります。
(1) コンテンツの整理
(2) HTML化
(3) サーバーの登録
(4) FTP
Google検索エンジンにサイト構成を伝えるsitemap.xmlなどのFTP作業を行い、サーバーに転送します。
(5) 確認作業
以下、各項目について注意点を述べます。
(1) コンテンツの整理
(2) HTML化
<head>
<body>
</html>
という形をしています。ここに出てくる<html>のように、基本単語を<と>ではさんだものを、HTMLではタグと言います。20年くらい前のHTMLの解説書では、タグは全て大文字で書かれていましたが、今では、タグを小文字で書くことが普通で、ソフトウェア業界では、小文字が推奨されている、とのことです。現状では、大文字でも小文字でも、ブラウザは正しく認識してくれます。
画面上に、「こんにちは」と表示するだけのページですが、エディタ、または、Windowsのメモ帳、WORD (保存するとき、「書式なし(*.txt)」を選びます)でもよいです。以下のような内容を、hello.htmlというファイル名で作成してください。
<head>
<title>こんにちは</title>
</head>
<body>
こんにちは
</body>
</html>
上記の<title>は、このファイルのタイトル(ブラウザのタブに表示されます)を指定するタグです。</title>は、タイトルの終わりをしてするタグです。ファイルの保存先はどこでも構いません。例えば、「ドキュメント」というフォルダに格納したとします。エクスプローラを起動して、「ドキュメント」フォルダを開くと、hello.htmlというファイルができていると思いますが、これをダブルクリックすると、ブラウザが開いて、画面に「こんにちは」と表示されます。上記は、HTMLの正規の書き方になっていますが、実は、
とだけ書かれたhello.htmlでも、ダブルクリックすると、ブラウザは、画面に「こんにちは」と表示します。ブラウザは、どうしようもない誤ったHTMLでもない限り、多少の文法的誤りがあろうと、どんな・・・・・・.htmlファイルでも、可能な限り何とか解釈して表示しようとしてくれます。以後、Google Chrome (検索してダウンロードしてください)というブラウザで表示することを前提に話を進めます。ブラウザによって、誤ったHTMLに対する対応が大きく異なります。上記の
こんにちは
</body>
のところを、
こんにちは!
世界の皆さん!
</body>
としてみます。このhello.htmlをダブルクリックすると、
こんにちは!<br>世界の皆さん!
</body>
とすると、
世界の皆さん!
と改行を入れて表示されます。<br>は、改行せよ、ということをブラウザに伝えるタグです。htmlファイルの中で改行してもブラウザは改行しません。<br>があって改行するのです。また、色や文字の太さを変えてみたい場合があると思います。20年前頃は、タグに属性をつけて、色や文字の太さを指定していたのですが、今では、CSS (Cascading Style Sheets)という技術を使います。
以下のように、上記の<head>と</head>の間に、<style type=”text/css”>と</style>で挟んで、表示方法を指定するstyle sheetの記述を入れます。
<title>こんにちは</title>
<style type=”text/css”>
.s1{color:black}
.s2{color:red}
.s3{font-weight:bold}
</style>
</head>
.s1{color:red}の最初のピリオドはs1がstyle名であることを意味します。style記述は‘{‘と‘}’で挟んで記述します。文字色はcolorで指定し、‘:’をつけて文字色黒ならblackとします。文字の太さは、font-wieghtで指定し、太字にするときには、font-weight:boldとします。こうして、黒文字にするs1,赤文字にするs2,太文字にするs3の3種のstyleを記述しました。
「こんにちは!」の部分を赤文字の太文字、「世界の皆さん!」の部分を黒文字で表示する場合には、以下のように、表示に影響のないspanというタグを用いて、class=に続けてスタイル名を指定します。
</body>
ここで、<span>というタグに対して、その有効性が終わる位置に</span>を入れることに注意してください。タグの大部分は、有効性が始まる位置と有効性が終わる位置にタグを置きます。さて、こうしてできたhello.htmlをダブルクリックすると、画面に
世界の皆さん!
と表示されます。Google Chromeの場合、ページを表示しているときに、[F12]キーを押すと、デバグ・モードに移行し、画面右側に、表示しているサイトのHTMLコードや、style sheetの内容を表示してくれます。省略表示で(・・・)となっているところもマウスでクリックすると展開して表示してくれます。この機能を使って、サイトの問題点を調べて修正する作業を行います。この機能については、「Google Chrome デベロッパー・ツール」で検索してみてください。
style sheetは、<body>以降にタグに直接記述することも可能で、ここでもし、上記の<body>が、<body style=”background-color:black”>になっていたとします。すると、画面が真っ黒になり、黒字の部分が見えなくなります。なので、文字色は背景色がどうなっているかということに注意が必要です。見やすくするためには、<body style=”background-color:paleturquoise”>くらいにしておきましょう。さらに、画像を表示する場合には、<img>タグを使って、<img src=”prism.gif”>という具合に、src=に続けて画像ファイル名を指定します。<img>タグには閉じるタグ</img>はありません。こうして、hello.htmlが以下のようになります。
<head>
<title>こんにちは</title>
<style type=”text/css”>
.s1{color:black}
.s2{color:red}
.s3{font-weight:bold}
.body{background-color:red}
</style>
</head>
<body style=”background-color:paleturquoise”>
<span class=”s2″><span class=”s3″>こんにちは!</span></span><br><span class=”s1″>世界の皆さん!</span>
<span class=s1>下の図は、光の分散の説明で使った図です。ピンク・フロイドというバンドの「狂気」(dark side of the moon)というアルバムのジャケットの絵と似ています。このアルバムは世界で最も売れたアルバムと言われています。</span>
<img src=”prism.gif”>
<body>
</html>
ウェブサイトの場合、表示させたいhello.htmlファイルの他に、ウェブサイトの初期画面で、各htmlファイルへのリンクを張っている目次ページindex.htmlを用意する必要があります。作り方は、表示させたいページと同じです。index.htmlは、(3)でドメインを確保すると、そのドメインのURLをブラウザのURL欄に記入するだけで自動的に表示されます。
<head>
<title>目次</title>
<style type=”text/css”>
.s1{color:blue;font-weight:bold}
.d1{margin-left:3em}
a:link{color:navy}a:visited{color:purple}a:hover{color:orangered}a:active{color:blue}
</style>
</head>
<body>
<p class=d1><span class=”s1″>コンテンツ</span></p><br><a href=”hello.html”>皆様にご挨拶します</a>
</body>
</html>
タイトルの「目次」がブラウザのタブのところに表示されます。s1のstyle sheet記述では、文字色青と文字の太さの設定が両方入っています。1つのスタイルで複数の設定を行う場合は、設定の間を‘;’で区切ります。d1のstyle sheet記述では、文字列の左側に3文字分(emは1文字分を示します)の余白を作ることを指定しています。その後ろのa:link,a:visitedなどはリンクの文字色に関する指定で、a:linkは文字色が濃い青色、a:visitedは一度リンク先にジャンプした場合は文字色が紫色、a:hoverはマウスでリンクの上に来たときには文字色が橙色、a:activeはリンクの上でマウスのボタンを押したときに青色になることを指定しています。
<body>以降では、タグ<p>~タグ</p>で一つの段落であることを示します。<p>タグにd1を指定しているので、コンテンツという文字列は左側に3文字分あけて表示されます。この文字列には、s1というスタイル指定がついていて、青色の太字で表示されます。なお、</p>タグで改行がおきるので、<br>と合わせて2行改行します。次の<a href=”hello.html>は、hello.htmlへのリンクを表します。リンク位置には<a>~</a>に書かれている文字列が表示されます。index.htmlをダブルクリックすると、
と表示されますが、「皆様にご挨拶します」の上にマウスを持ってくると、文字列の色が橙色に変わります。マウスのボタンを押すと押している間青色に変わり、ボタンを放すタイミングでリンク先のhello.htmlにジャンプします。一度ジャンプすると、次にindex.htmlを表示したときリンクの文字色は紫色になります。
タグ、CSSについて、詳細を網羅的に説明すると分厚い本になってしまいます。HTMLで可能なタグ、また各タグの詳細な機能は、「HTMLタグのレファレンス」で検索してみてください。また、style sheetについては「CSS」で検索してみてください。
(3) サーバーの登録
ただ、現状では、WordPressというブログ生成機能を前提とするサーバーが多く、苦学楽学塾を運営する「りるらる」も活動報告ブログでWordPressを使っていますが、非常にハイレベルで素人に扱えるようなものではありません。ソフト会社と直接やり取りして、その動作を制御しようとしたこともありますが結局分からずじまいで、私にはほぼお手上げ状態です。WordPressを利用している企業・お店は多数ありますが、恐らくプロに管理運営を任せている(ただではやってくれません。月何万という高額のサービス料がかかります)のではないかと思います。
そこで、WordPressが前提となっていないサーバーを探すことになりますが、例えば、米国カリフォルニアのFC2というサーバーが、無料サーバーもあり、有料サーバーも廉価です。マニュアルも整備されていて導入も容易です。FC2のURLは以下です。
FTPについては、例えば、ベクター社のサイトなどで、「ファイル転送ソフト」を検索してみてください。フリー・ソフトもあります。安全性を考えると有料ソフト(せいぜい数千円です)の方が安心です。
ただし、高校生の皆さんの場合、将棋を極めたい、とか、個人的にどうしてもやりたいことがある、というのでなければ、高校がサーバーを自分で持っていたり、レンタル・サーバーを契約したりしていると思うので、学校の情報担当の先生に相談してみてください。
(4) FTP
ただし、FC2というサーバーは日本とは地球の反対側のカリフォルニアにあるので、FTPの転送が非常に遅く、無料モードでは、転送中にエラーを起こして止まってしまうことがしばしば起こります。こうした点からは国内のサーバーを選ぶべきだと思います。FC2がデータセンターを日本国内に作ってくれれば話は変わりますが。
ところで、Googleは検索のほぼ75%を独占していて、独占禁止法に触れる、と言われています。仮に検索サイトが複数になると、検索用の指定を何重にも行う必要が出てきて大混乱を招きます。Googleは、Googleで検索したからと言って、何かを強要するわけではありません。他の検索サイトで検索すると、フィッシング・サイトが上位に並んでいたりするので、検索は信頼性の高いGoogleに限るべきだというのが私の考えです。独占禁止法に問われるべきは、更新のたびに、ブラウザをEdgeに代えろ、OneDriveというクラウドを使え、カナ漢字変換はIMEを使え、と強要してくるMicrosoft Windowsだと私は思います。そもそも毎月の更新を強要する、ということに世界中の人は問題を感じないのでしょうか?
(5) 確認作業
上記で使用したHTMLファイルは、以下のリンク先に接続し、Google Chromeの[F12]キーでHTMLを読んでください。画像ファイルは以下のURLからダウンロードできます。
HTMLファイル hello.html:https://www.riruraru.com/cfv21/info/hello.html
HTMLファイル index.html:https://www.riruraru.com/cfv21/info/index.html
画像ファイル prism.gif:https://www.riruraru.com/cfv21/info/prism.gif
なお、元のままでは、UTF-8とshift-JISの間で文字化けを起こすので、文字コード指定のタグが入っています。