夏休みの宿題にホームページを作ろう

自分のウェブサイトに文字を表示しよう。

4.自分のサイトに文字を表示しよう

サイトメーカー「今回は実際に簡単なホームページを作ろう。今日の目標は『文字を出す』こと!」

ホーム君「ついに僕の素晴らしきホームページの初めの一歩が踏み出されるんだね!」

サイトメーカー「ではまず、Yahoo!ジオシティーズのページを開きましょう」

サイトメーカー「すでにYahoo!にログインしている人は右側の『開設済みの人は、さっそくホームページを作ろう! ホームページの作成・更新』というボタンをクリック。前回の管理画面の様なページへ行きます」

「開設済みの人は、さっそくホームページを作ろう!」

サイトメーカー「ログインしていない人は、右側の「ホームページの作成・更新 Yahoo! JAPAN IDでのログインが必要です」という所をクリックし、前回と同じように自分のIDとパスワードを入力してログインしましょう。前回の管理画面のようなページへ行けたはずです」

ログインが必要です

ホーム君「なんか、色々なメニューがあるけどどうすればいいの?」

サイトメーカー「『簡単にホームページを作りたい!テンプレートを選んで、編集するだけでホームページが作れます。もちろん何回でも編集できます。』とか『自由にホームページを作りたい!HTMLの知識がなくても、仕上がりをチェックしながら、オリジナルのデザインで自由に、簡単にホームページを作れます。』とか『ブログ風デザインで簡単に毎日更新!ジオログ管理ページにアクセスすれば、すぐにホームページが作成できます。編集・更新も簡単!』とか項目が色々ありますね。でも、今回のボク達は手作りをします。なんせ初めて作るホームページ。デザインはダサくなってしまうでしょう。ものすごい技術とかも無理です。でも、慣れていけばブログ程度のデザインは作れるようになります(夏休み中は無理かもしれませんが)。夏休みの宿題提出時はちょっと不格好かもしれませんが『本当にゼロから作ったの?ホーム君ってすごーい。頭いいんだね!格好いい!結婚してください!』と言われること必至です」

ホーム君「よーし、女の子の為にホームページを作るぞ!」

サイトメーカー「その意気です!というわけで、項目の一番下の方『ファイルを管理 新規ファイルの作成や、HTML、画像などすべてのファイルの編集が可能。サブディレクトリの作成、コピー、名前の変更、削除もできます。』という項目の『ホームページを修正する』ボタンを押しましょう(まだ作ってもいないのに「修正する」というのも変な話ですが)」

「ホームページを修正する」ボタンを押そう

ホーム君「うひゃー!!またまた恐そうなページが!!」

サイトメーカー「『ファイルマネージャ』と書かれていて『ファイルやディレクトリの管理や修正ができます。またエディタを選んで、その場でHTMLファイルの作成や編集が可能です。エディタはファイルマネージャ画面右上のプルダウンメニューから、「ジオクリエーター」と「アドバンストHTMLエディタ」を選択できます。通常は「利用するエディタ」として「アドバンストHTMLエディタ」が選択されています。』とか、まぁ専門用語で訳の分からないことが書かれています。『大人はいつもそう。難しい言葉で私たち子供を翻弄して、馬鹿にして……。私たち子供だって必死で生きてるんだよ……!!』とか思いながら『ファイルの作成・編集をする』ボタンを押します」

ファイルの作成・編集をする

ホーム君「だ、ダメだ。難しそうなページの連続攻撃。なんだかホームページを作れる自信が無くなってきたよ……」

サイトメーカー「このページは『ファイルマネージャ』ページと言います。大丈夫です。信じてください。とりあえず、事前に言っておきますが、ここで何か操作を間違えたからといって、あなたのパソコンが壊れることは絶対にありませんサイトを作るというのは世界で一番安全なプログラミングです。あまりにも安全過ぎて、プロの方たちからはプログラミングだと認められていません。マジです」

ファイルマネージャ

サイトメーカー「その上、あなたが今操作しようとしているのは、レンタルサーバー側の操作です。あなたのパソコンとは一切関係がありません。また、このサーバーは天下のYahoo!様が管理しております。素人の操作のミス程度で壊れるようなヤワなサーバーを使っておりません。『素人どんと来い!』です。むしろ、サービスを提供しておいて『お客様である私たちのミス』で簡単に崩壊するようなサービスを提供しているなら、逆にYahoo!のサービスの質を疑うね!くらいの気持ちでいきましょう。頑張って!ホーム君。女の子の為に!」

ホーム君「ぬおー!!彼女が欲しいんじゃー!!もうどうにでもなれー!!うがー!!」

サイトメーカー「はい。ホーム君が復活(?)したところで早速操作していきます。まず、この管理画面の『新規』ボタンをクリックしてください。これは『新しくウェブサイトのページを作るためのボタン』です。おそらく、「新規」ボタンはこのページの中で3つ見付かると思います。一番上と真ん中のは同じ機能の『新規』ボタンで、一番下だけが『サブディレクトリの編集』という機能の為の『新規』ボタンです」

サイトメーカー「『サブディレクトリの編集』機能はまた次回教える予定なので、今回は一番上、もしくは真ん中の『新規』ボタンを押してください」

ホーム君「ぐひゃー!!また入力欄かー!!ぐおー!!」

サイトメーカー「ページが変わって、文字が入力できるページに来ました。まず見逃しがちなのが大きい文字入力画面の上にある「ファイル名」と書かれた入力画面です。ここに、半角英数文字でindex.htmlと入力してください」

ホーム君「英語でかー!?」

サイトメーカー「英語ででーす」

ホーム君「なんか、indexとhtmlの文字の間に黒い点『.』があるけど、これも書くんかー!?」

サイトメーカー「書くんでーす。ちなみにこの黒い点はドットと読みます。キーボードの、いつもひらがなで『。』を出しているキーを半角英数の入力状態で押せば多分『.』が出ます(環境によって異なります)」

ホーム君「っしゃー!!おらー!!」

サイトメーカー「次に、真ん中の訳の分からない宇宙人語が書かれている大きな入力画面ですが、まず、中に書かれている謎の暗号文を全て消します」

ホーム君「えぇっ!?いいの!?怒られない!?」

サイトメーカー「いいんです。僕を信じてください。僕とホーム君の仲じゃないデスか」

ホーム君「……いや!!信じられないね!!そもそも僕はまだサイトメーカーのプライバシーな情報を一つも知らない!!」

サイトメーカー「……趣味はスモウ観戦です」

ホーム君「……渋いなぁ」

サイトメーカー「はいはい!どうでもいいから入力欄の中の意味の分からない奴をさっさと消して!そして、以下の様に文字を入力してください」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
</body>
</html>

サイトメーカー「一つの文章の行の最後でEnterボタンを押せば、次の行に入力することが出来ます。『こんにちは』と『はじめまして』は全角の日本語で入力しますが、その他の英語と記号は全て半角英数で入力してください」

サイトメーカー「半角・全角の切替えは、色々方法がありますが、一例として、キーボードの左、手元側の方では無く画面側の方に「半角/全角」というボタンがあります。これを押せば、半角・全角が切替えられます。もちろん、それ以外の方法で半角、全角を切替えても構いません」

サイトメーカー「記号の出しかたも教えておきます。(それぞれ半角で)<はShiftボタンを押しながらひらがなの『ね』のボタンを押せばでます。/はひらがなの『め』のボタンを押せばでます。>はShiftボタンを押しながらひらがなの『る』のボタンを押せばでます。(パソコンによっては操作方法が異なる場合もあるかもしれません)」

現在の状態

サイトメーカー「入力が終わりましたら『プレビュー』ボタンを押してみてください(上の方と下の方にふたつボタンがありますが、どちらも同じ機能ですので、好きな方を押してください)。なんとこれを押すと、ホームページ上でどのように表示されるかが上の方に表示されるのです!今回は文字だけなので、特に面白みは無いかもしれません」

サイトメーカー「『はじめまして』と表示されているのを確認したら、『保存』ボタンを押してください(これも、上の方と下の方にふたつボタンがありますが、どちらも同じ機能なので、好きな方を押して構いません)」

ホーム君「ふぎゃー!!エラーが出たー!!怒られたー!!もう死ぬー!!」

サイトメーカー「『警告: ファイル「index.html」はすでに存在します。 上書きしてもよろしければ、もう一度「保存」を押してください。』と出てきます。が、大丈夫です。最初から上書きしたくて作りました。というわけで『大人はいつもそう。金と力にものを言わせて、非力な私たちを追い詰める……!』とか思いながら、指示通りもう一度『保存』ボタンを押してください」

ホーム君「非力な私たちを追い詰める……!!」

サイトメーカー「はい。管理画面の最初の方に戻りました。実は、これでもう既に、あなたが作った初めてのウェブページが出来ています。この管理画面の中、上の方に『ホームページURL: http://〜』と、あなたのサイトのアドレスが書かれているのが分かるでしょうか?ホーム君の場合は『ホームページURL: http://island.geocities.jp/xhtml7/』と書かれています(大人の事情でホーム君は前回とアドレスが違います)。これをクリックします」

あなたのサイトのアドレスをクリック

ホーム君「ちょ!『はじめまして』って書かれてるー!!」

サイトメーカー「と感動していただければ嬉しいです。上に広告のバナー(四角い画像)が表示されてしまっていますが、無料レンタルサーバーなのでこれは仕方がありません」

ホーム君「あれ?でも、『こんにちは』っていう文章も書いたのに、『こんにちは』は表示されて無いな……」

サイトメーカー「実は、分かりにくいですが、きちんと表示されています」

タイトルタグ

サイトメーカー「さて、無事に表示された人がほとんどだと思いますが、中には文字化けをしてしまっている人もいるでしょう。そういう方は下記の補足を参考にしてください。次回は、今日書いた文章の具体的な説明だ(html言語の基本を理解しようへ続く)!」

補足

コピー&ペースト

どうしても上手くいかないときはコピー&ペースト(通称コピペ)を使いましょう。

「コピペって何ですか?」コピペというのは、サイト上のある文字をコピーして貼り付けることが出来る技術です。上の説明に色々と文字を書きましたが、初心者のうちは「その文字をどうやって出すのか」が分からない場合があると思います。最初はコピペで済ませて、慣れてきたら、自分で書けるようにしましょう。

コピペの方法ですが、まずはコピーのやり方。

コピーしたい文字の上にカーソルを乗せ、左クリックボタンを押した状態のまま右に(または左に)ずらします(その気になれば、上にも下にもずらせます)。

すると、文字が青色になります。それが「現在どの部分をコピーしようとしているのか」を示しています。

文字の選択

左クリックから指を離してください。文字は青色のままです。

その状態で、今度は右クリックボタンを一回押します。メニューが色々出ますが、その中で「コピー」というメニューがあります。それを選択します(普通に、コピーの上にカーソルを合わせ、左クリックする)。すると、青い色の部分が普通の状態に戻ってしまいました。でも、大丈夫です。すでにあなたのパソコンが、選択された文字を記憶しています

つぎはペースト(日本語で言えば「貼り付け」)です。ペーストとは、コピーした文字を貼り付けることです。貼り付けると言っても、どこでも好きな所に文字を貼り付けられるわけではなく、「文字が書ける所」にだけ貼り付けることが出来ます。今回は「ファイルマネージャ」の「新規」ボタンを押したページに貼り付け(ペースト)してみます。

記入する所で右クリックしてみましょう。「貼り付け」というメニューがあるはずなので、それをクリックすると、先ほどコピーした文字を貼り付けることが出来ます。

貼り付けしたい部分にカーソルを持っていく

右クリックから貼り付けを選んで貼り付ける

一度コピーした文字は、新たに別の文字をコピーするまで何度でも貼り付けできます。初めのうちは、コピペでさえ難しいと思いますが、慣れてきたら便利な操作なので、ぜひ覚えてみてください。

文字化け

さて、無事に表示された人がほとんどだと思いますが、中には「変な文字が表示されている。これは……宇宙人語?」みたいな人もいると思います。これを「文字化け」と言います。また、「普通に『はじめまして』って表示されてるよー」って人も、あなたのパソコンから見たら無事に表示されているだけで、他の人のパソコンからあなたのサイトを見ると文字化けしている可能性があります。

本当は本文で文字化け対策について書くべきなんですが、ちょっと初心者には心がくじけそうな文字の入力数なので補足で書かせていただきます。

というわけで、文字化け対策だ!

ファイルマネージャのページに戻って、index.htmlの横のチェックボックス(四角いやつ)をクリックしてチェックマークを確認したら編集ボタンを押します。

ファイルマネージャで編集します。

先ほど書いた文章が出てきました。これを、以下のように書き換えます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>こんにちは</title>
</head>
<body>
はじめまして
</body>
</html>

先ほどの文章に<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">という一文を加えました。

"は、半角入力の状態でShiftボタンを押しながら「ふ」。;は半角入力の状態で「れ」。=は半角入力の状態でShiftボタンを押しながら「ほ」。で、入力できます。

「ちょっと待ってください。いきなり難しいです。早くもくじけそうです」という声が聞こえてきます。がんばれー(無責任)。難しかったら、コピペでも構いません。コピペの方法は補足を参考にしてください。

はい。入力できましたら、保存ボタンを押して、先ほどと同じように自分のアドレスをクリックしてページを確認してみましょう。

最初から普通に見れていた人は特に変わらず。文字化けしていた人はきちんと表示されている状態になったはず。

文字化けしている人は次回からもこの文字化け対策用の文字を入れるようにしてください。また、文字化けをしていない人も、できればこの文字化け対策用の文字を入れていただけることが望ましいです。

ページ内容を書き換えても、ちゃんとページが変わらないときは

ページ内容を書き換えても、ネットから確認するとページが変わっていない場合があります。詳しく説明するとキャッシュとか専門用語で説明しないといけなくて、初心者の方がついてこれず、説明しずらいので、解決方法だけ教えます。そのページを見ている状態で更新ボタンを押しまくってください。

ちなみに、キーボードの「F5」キーを押すのも、更新ボタンを押すのと同じ意味です。F5キーは、多分キーボードの画面側の方にF1キー〜F12キーくらいまでずらっと並んでいると思いますが、その中のF5キーの事です。

「F5キーなんてマニアックなキーは使ったことないよ」という方もいると思いますが、「これから使うようにすれば良いじゃない!」と思います。

更新とは「情報を新しくする」という意味です。

つまり、ページを書き換えてもネットの世界では古い情報のままだったりするから、新しい情報になるまで更新ボタンを何度も押そう!というような感じの理解でいいです(正しくは間違っていますが、今はその程度の理解で特に困りません)。

「F5キーなんて、今まで使ったことが無いから、使うの怖い」っていう初心者の人は、以下のページを参考にしてね。

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