管理人

10月 082011
 

細かい説明は抜きにして、まずは簡単なページを作ってみましょう!
うちのサイトのタイトルどおり、「コピー&ペースト」だけで作れます。

  1. エディタにHTMLを記述する
  2. 作業用フォルダに保存する
  3. ブラウザで作ったページを見てみる

エディタにHTMLを記述する

エディタ(メモ帳やTeraPad等)を起動して、以下の「背景が灰色」の部分をコピーしてテキストエディタに貼り付けましょう。

<?xml version=”1.0″ encoding=”Shift_JIS”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>
<head>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<p>
ここに書いた文字がブラウザで表示されるんですねぇ。
好きなところで改行させるには<br/>
って書けばOK。
</p>
</body>
</html>

これだけです。こんなに短くて大丈夫なのです。

作業用フォルダに保存する

次は、上で作ったファイルを保存しましょう。

ファイルを保存するには、メモ帳・TeraPadどちらを使っていても「ファイル→名前をつけて保存」を選びます。
保存場所を「C:\homepage」等、先ほど作った作業フォルダにします。
ファイル名ところにtest.htmlと入力し、ファイルの種類はすべてのファイルを選択します。
ファイル保存
最後に「保存」ボタンを押せば、ファイルの保存は完了です。

 

ブラウザで作ったページを見てみる

たった今作ったHTMLファイルをブラウザで表示してみましょう。

作業フォルダ(C:\homepage等)を開くと、test.htmlというファイル(作ったHTMLファイル)が出来ています。 それをダブルクリックすると、以下のようにページが表示されます。
ブラウザで表示

これで、ホームページが1つ完成です。 予想よりは簡単かと思います。
でも、さっきコピペしたサンプルはなにやらごちゃごちゃアルファベットが並んでたなぁと心配になる人もいるかもしれませんがご安心を。

実は、さっきのサンプルの<body>~</body>の中に表示したい文字を書けばOKなんです。

つまり、他の部分はほとんどコピペで使いまわせるということです。
簡単なページが出来たら、画像を表示させたいリンクを張りたい表を表示させたい背景色を変えたり壁紙を表示させたい文字の色や大きさを変えたい
こんな希望が出てくるかと思いますが、これも「うちのサイトに載っているサンプルをコピペして一部をちょっと書き換えるだけ」で簡単に出来ます。
その辺は、コピペ用サンプルページに具体例(サンプル)と詳しい説明がありますのでそちらをご覧ください。

10月 082011
 

ホームページを作るには、いくつかの準備が必要です。
ただし、すぐ無料で準備出来るのでご安心を。
焦らずにひとつずつ準備していきましょう。

  1. パソコンに作業用フォルダを作る
  2. 拡張子を表示出来るようにする
  3. ソフト(ツール)を用意する

パソコンに作業用フォルダを作る

これから作っていくファイルを入れるフォルダを作りましょう。
以下では、例としてCドライブ直下に「homepage」というフォルダを作る手順を紹介します。

  1. 画面左下「スタート」を押しし、「マイコンピュータ」を選択する。
  2. 「ローカル ディスク(C:)」を選択して開く。
  3. マウスを右クリックすると以下のようなメニューが出てくるので、「新規作成→フォルダ」の順に選択する。
    メニュー
    (クリックすると拡大画像が表示されます)
  4. 新しいフォルダが作成されるので、フォルダの名前をhomepageにします。
    C:\homepage
    これで、作業用フォルダ「C:\homepage」の完成です。

今後は、この「C:\homepage」の中にホームページに載せる文章や画像等を作って保存していきます。

拡張子を表示出来るようにする

パソコンで何かを作る時、拡張子というものがかなり重要です。
拡張子とは、index.htmlの.htmlやphoto001.jpgの.jpgといったピリオド(.)のあとに表示されるアルファベット文字列のことです。

なぜ拡張子が重要かというと、ホームページでは「拡張子によってそのファイルが何であるかを判別し、表示している」からです。
たとえば、.htmlならHTMLページ(普通のWebページ)、.jpgならJPEG画像、.txtならテキストファイルといった感じです。 (もう少し詳しく知りたい人は、IT用語辞典 [拡張子]へ。)

さて、拡張子の概要が分かったところで「拡張子を表示出来るように」しましょう。

  1. エクスプローラの「ツール→フォルダオプション」を選択する。
    フォルダオプション
  2. 「表示」タブの詳細設定内に「登録されている拡張子は表示しない」という項目があるので、それのチェックをはずす。
    拡張子を表示する
    これで拡張子が表示されるようになりました。

ソフト(ツール)を用意する

ホームページを作成し、きちんと出来ているかを確認する為には最低限3種類のソフトが必要です。

ブラウザ
これは、今このホームページを見ているソフトのこと。
IE(Internet Explorer)FireFox等があります。
普通はIEが最初から入っていると思いますので、とりあえずはIEを利用しましょう。
テキストエディタ
簡単に言えば「文字を書く為のソフト」。
一番身近なのは「メモ帳」ですね。 (「スタート→プログラム→アクセサリ→メモ帳」で起動)
ただ、メモ帳は少々使い勝手が悪いので、フリー(無料で利用可能)のテキストエディタを利用することをお勧めします。 自分で既に使っているソフトがある場合はそれを利用しましょう。 特に無い人は、以下のソフトをお勧めします。
TeraPad
フリーのテキストエディタ。シンプルで使いやすいです。私も使っています。ちなみに「マイクロソフトのオフィス ワード(Word)」はホームページを作るのには向いていません。ご注意を。
画像作成・編集ソフト
そのままずばり「画像を作ったり加工したりするソフト」。
これは「ペイント」があればとりあえず十分です。 (「スタート→プログラム→アクセサリ→ペイント」で起動)