ホームページを作ってみよう

ホームページを作ってみよう

 自分の得意とすること、興味を持っていること、主張したいことがあり、それを世界中の人にアピールしたいと思うときに、SNSやブログなどとともに、ウェブサイトを作ることが考えられます。一時的に見て終わりのSNSやブログと比べると、道のりは長いですが。ウェブサイトの名前、URLをたくさんの人に覚えてもらえれば、世界に対して大きな影響力を与えることも可能かも知れません。
 ウェブサイトを作るとき、市販されているホームページ作成ツールを使ってウェブサイトを作ることもできますが、自分の思い通りのホームページを作るためには、以下の手順を踏むことになります。

(1) コンテンツの整理

 ウェブサイトに掲載する文章、図、写真を準備し、それらを画面上にどう並べるかを検討します。

(2) HTML

 画面上の配置をHTMLで記述し、xxx.htmlというファイル名(xxxは自分の希望する文字列でOK)にして、疑似サーバーとするフォルダーに格納し、マウスでダブルクリックしてブラウザに表示させて見栄えを確認します。複数ファイルからなるウェブサイトの場合には、目次ページindex.htmlを作成します。

(3) サーバーの登録

 レンタルサーバー会社を選択登録し、ホームページを設置するサーバーにドメイン名などを登録し、FTP先の情報、FTPする際のパスワードを入手します。

(4) FTP

 制作されたxxx.htmlファイル、目次ファイルindex.html、画像ファイル、
Google検索エンジンにサイト構成を伝えるsitemap.xmlなどのFTP作業を行い、サーバーに転送します。

(5) 確認作業

 ブラウザにURLを記入してウェブサイトにアクセスし、表示、リンクするかどうかを確認します。

以下、各項目について注意点を述べます。

(1) コンテンツの整理

 図、写真、それらを説明する文章を用意できたら、それらのレイアウト作業に移ります。ウェブサイトを作る際のコンテンツのレイアウト作業は、雑誌や新聞の編集作業と似ています。大きな紙に、文章を書いた紙、図、写真を配置していきます。HTMLでは、CSSの活用により、ほぼどんなレイアウトも可能ですが、初心者のうちは、段組みしたり重ね合わせたりして凝ったりせずに、上から下にズラズラと並べていくとよいと思います。苦学楽学塾の数学・物理のページでは、上から下に向って説明の文章を書き連ね、右側に図を入れていく、というスタイルで制作されています。

(2) HTML

 HTMLは、Hyper Text Markup Languageの先頭文字を取ったもので、ウェブサイトの内容を記述する言語です。Microsoft-EdgeGoogle Chromeのようなブラウザは、HTMLの記述を解釈して画面にホームページを表示しています。ホームぺージの記述は、基本的にヘッダ部分と本体部分に分かれます。ヘッダ部分は、<head></head>の間に記述し、本体部分は、<body></body>の間に記述します。さらに、全体を<html></html>ではさみます。つまり、ホームページの記述は、基本的に、

<html>
<head>
・・・・・・・
</head>
<body>
・・・・・・・
</body>
</html>

という形をしています。ここに出てくる<html>のように、基本単語を<>ではさんだものを、HTMLではタグと言います。20年くらい前のHTMLの解説書では、タグは全て大文字で書かれていましたが、今では、タグを小文字で書くことが普通で、ソフトウェア業界では、小文字が推奨されている、とのことです。現状では、大文字でも小文字でも、ブラウザは正しく認識してくれます。

 画面上に、「こんにちは」と表示するだけのページですが、エディタ、または、Windowsのメモ帳、WORD (保存するとき、「書式なし(*.txt)」を選びます)でもよいです。以下のような内容を、hello.htmlというファイル名で作成してください。

<html>
<head>
<title>
こんにちは</title>
</head>
<body>

こんにちは
</body>
</html>

 上記の<title>は、このファイルのタイトル(ブラウザのタブに表示されます)を指定するタグです。</title>は、タイトルの終わりをしてするタグです。ファイルの保存先はどこでも構いません。例えば、「ドキュメント」というフォルダに格納したとします。エクスプローラを起動して、「ドキュメント」フォルダを開くと、hello.htmlというファイルができていると思いますが、これをダブルクリックすると、ブラウザが開いて、画面に「こんにちは」と表示されます。上記は、HTMLの正規の書き方になっていますが、実は、

こんにちは

とだけ書かれたhello.htmlでも、ダブルクリックすると、ブラウザは、画面に「こんにちは」と表示します。ブラウザは、どうしようもない誤ったHTMLでもない限り、多少の文法的誤りがあろうと、どんな・・・・・・.htmlファイルでも、可能な限り何とか解釈して表示しようとしてくれます。以後、Google Chrome (検索してダウンロードしてください)というブラウザで表示することを前提に話を進めます。ブラウザによって、誤ったHTMLに対する対応が大きく異なります。上記の

<body>
こんにちは
</body>

のところを、

<body>
こんにちは!
世界の皆さん!

</body>

としてみます。このhello.htmlをダブルクリックすると、

こんにちは!世界の皆さん!
となって、「こんにちは!」の後ろで改行しません。改行させたい場合には、「こんにちは!」の後ろに‘<br>’という文字列を挿入します。このときは、改行させて書く必要もありません。

<body>
こんにちは!<br>世界の皆さん!
</body>

とすると、

こんにちは!
世界の皆さん!

と改行を入れて表示されます。<br>は、改行せよ、ということをブラウザに伝えるタグです。htmlファイルの中で改行してもブラウザは改行しません。<br>があって改行するのです。また、色や文字の太さを変えてみたい場合があると思います。20年前頃は、タグに属性をつけて、色や文字の太さを指定していたのですが、今では、CSS (Cascading Style Sheets)という技術を使います。
 以下のように、上記の
<head></head>の間に、<style type=”text/css”></style>で挟んで、表示方法を指定するstyle sheetの記述を入れます。

<head>
<title>
こんにちは</title>
<style type=”text/css”>
.s1{color:black}
.s2{color:red}
.s3{font-weight:bold}
</style>
</head>

 .s1{color:red}の最初のピリオドはs1style名であることを意味します。style記述は‘{‘‘}’で挟んで記述します。文字色はcolorで指定し、‘:’をつけて文字色黒ならblackとします。文字の太さは、font-wieghtで指定し、太字にするときには、font-weight:boldとします。こうして、黒文字にするs1,赤文字にするs2,太文字にするs33種のstyleを記述しました。
 「こんにちは!」の部分を赤文字の太文字、「世界の皆さん!」の部分を黒文字で表示する場合には、以下のように、表示に影響のない
spanというタグを用いて、class=に続けてスタイル名を指定します。

<body><<span class=”s2″><span class=”s3″>こんにちは!</span></span><br><span class=”s1″>世界の皆さん!</span>
</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が以下のようになります。

<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欄に記入するだけで自動的に表示されます。

URL欄に入力すると、表示されるのは、https://kgkrkgk.com/index.htmlというファイルです。index.htmlの内容が以下のようになっていたとします。

<html>
<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>

タイトルの「目次」がブラウザのタブのところに表示されます。s1style sheet記述では、文字色青と文字の太さの設定が両方入っています。1つのスタイルで複数の設定を行う場合は、設定の間を‘;’で区切ります。d1style sheet記述では、文字列の左側に3文字分(em1文字分を示します)の余白を作ることを指定しています。その後ろのa:linka: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) サーバーの登録

 HTML化されたhello.htmlファイルも、自宅のPCに入っているだけでは、自分以外の人が閲覧することはありません。全世界の人に見てもらうためには、インターネットに接続されているサーバーに入れる必要があります。サーバーをレンタル供給している企業は日本にも多数あります。「レンタルサーバー」で検索してみてください。レンタル費用、サーバー機能などは種々あります。
 ただ、現状では、
WordPressというブログ生成機能を前提とするサーバーが多く、苦学楽学塾を運営する「りるらる」も活動報告ブログでWordPressを使っていますが、非常にハイレベルで素人に扱えるようなものではありません。ソフト会社と直接やり取りして、その動作を制御しようとしたこともありますが結局分からずじまいで、私にはほぼお手上げ状態です。WordPressを利用している企業・お店は多数ありますが、恐らくプロに管理運営を任せている(ただではやってくれません。月何万という高額のサービス料がかかります)のではないかと思います。
 そこで、
WordPressが前提となっていないサーバーを探すことになりますが、例えば、米国カリフォルニアのFC2というサーバーが、無料サーバーもあり、有料サーバーも廉価です。マニュアルも整備されていて導入も容易です。FC2URLは以下です。
FC2では(どこのサーバーでも案内がついていると思います)、案内に従って、必要事項を記入し、承認が得られれば、ドメイン名、FTPアドレス、パスワードを決め、サーバーにhtmlファイルを送信できるようになります。ドメイン名、というのは、https://kgkrkgk.com/kgkrkgkの部分のことです。
 
FTPについては、例えば、ベクター社のサイトなどで、「ファイル転送ソフト」を検索してみてください。フリー・ソフトもあります。安全性を考えると有料ソフト(せいぜい数千円です)の方が安心です。
 ただし、高校生の皆さんの場合、将棋を極めたい、とか、個人的にどうしてもやりたいことがある、というのでなければ、高校がサーバーを自分で持っていたり、レンタル・サーバーを契約したりしていると思うので、学校の情報担当の先生に相談してみてください。

(4) FTP

 制作されたhello.htmlファイル、目次ファイルindex.html、画像ファイル、また、Google検索エンジンにサイト構成を伝えるsitemap.xml (作り方は簡単ですが、ネットで調べてください)などをFTPソフトを利用して、サーバーに転送します。
 ただし、
FC2というサーバーは日本とは地球の反対側のカリフォルニアにあるので、FTPの転送が非常に遅く、無料モードでは、転送中にエラーを起こして止まってしまうことがしばしば起こります。こうした点からは国内のサーバーを選ぶべきだと思います。FC2がデータセンターを日本国内に作ってくれれば話は変わりますが。
 ところで、
Googleは検索のほぼ75%を独占していて、独占禁止法に触れる、と言われています。仮に検索サイトが複数になると、検索用の指定を何重にも行う必要が出てきて大混乱を招きます。Googleは、Googleで検索したからと言って、何かを強要するわけではありません。他の検索サイトで検索すると、フィッシング・サイトが上位に並んでいたりするので、検索は信頼性の高いGoogleに限るべきだというのが私の考えです。独占禁止法に問われるべきは、更新のたびに、ブラウザをEdgeに代えろ、OneDriveというクラウドを使え、カナ漢字変換はIMEを使え、と強要してくるMicrosoft Windowsだと私は思います。そもそも毎月の更新を強要する、ということに世界中の人は問題を感じないのでしょうか?

(5) 確認作業

 ドメイン名の指定が正しいか、ブラウザにURLを記入してウェブサイトにアクセスできるか、きちんと表示してくれるか、リンク先に正常に飛んでくれるか、画像が表示されるか(ちょっとでもアドレスが間違っていると表示されません)を確認します。必要なら、前述した[F12]キーによりデバグ・モードに移行して、HTMLコードの内容、CSSの内容を確認します。

上記で使用したHTMLファイルは、以下のリンク先に接続し、Google Chrome[F12]キーでHTMLを読んでください。画像ファイルは以下のURLからダウンロードできます。
HTMLファイル hello.htmlhttps://www.riruraru.com/cfv21/info/hello.html
HTMLファイル index.htmlhttps://www.riruraru.com/cfv21/info/index.html
画像ファイル prism.gifhttps://www.riruraru.com/cfv21/info/prism.gif

なお、元のままでは、UTF-8shift-JISの間で文字化けを起こすので、文字コード指定のタグが入っています。


  ブログTOP  TOPページに戻る


各問題の著作権は
出題大学に属します。

©2005-2024
(有)りるらる
苦学楽学塾 随時入会受付中!
理系大学受験ネット塾苦学楽学塾
(ご案内はこちら)ご入会は、
まず、こちらまでメール
お送りください。


【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする