超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

はじめに

最近、ホームページ(以下HPとします)を作るソフトがいろいろ出てきて、簡単にHPが作れるようになりましたが、 ソフトだけでは、細かな微調整ができないことがあります。
タグ(HPを作るための言語)を知っていると、ソフトでは出来ない微調整もできるようになります。

今大変流行になっている「アフィリエイト」「ウェブログ」のサイトを作るときにも、やはりタグを知っている方が有利です。

そこで、当サイトでは超初心者でも、理解できるように簡単にわかりやすく、タグを使ってのHPの作り方を説明しています。

初心者でも理解しやすくしているために、W3Cで勧告されている構文の解釈とは違う表現もありますがご了承ください。

HPを作るのに必要なもの

まず、HPを作るのに何が必要でしょうか?

HPを作るのに必要なものは何もありません。
何もいらないといっても、パソコンはいりますよ。(笑)
パソコン以外、特に何もなくても作れます。

最近では、HPを作るためのソフトがいろいろ販売されてますが、試しに「HPを作ってみたいな〜」って思って、 それだけでわざわざ高いソフトを買うのももったいないですよね。

「じゃぁ、どうやって作るの?」

答えは!

Windowsに標準でついている「メモ帳」と「ペイント」があれば、HPが作れます!
(MacやLinuxの方ごめんなさい。でも、PCに標準で付いているテキストエディタとペイントのソフトがあればHPは作れます。)
これならパソコンを持っていれば、誰でも作れますよね。

じゃぁ、何のソフトをどういう風に使えばいいの?

ペイントでは、写真やイラストなどイメージ画像を作るのに使います。
メモ帳は、HTMLという言語を使ってテキスト部分(ソース)を作ります。
(ソースについては以下で詳しく説明します)

HPが完成したらみんなから自分で作ったHPを見てもらえるように「サーバ」にアップします。
これを「Webを公開する」と言います。
(Webを公開してない場合は、他の人からは見れませんからね)

あとWebを公開するには、公開するための「サーバ」とサーバにファイルをアップロード(ファイルを転送)するための FEPソフトが必要です。
これも無料のものがいくつかあります。

無料のサーバは広告が表示されることが多いので、広告がイヤな方は有料のサーバを使ってください。

「サーバ」については「サーバについて」で詳しく説明します。

HTMLについて(タグ)

HTMLとは、HPを作るための言語です。

言語と言うとプログラムを思い出しますが、プログラムを作る言語みたいなものです。
わかりやすく言えば「文章を整えるための約束を指定するもの」と言った感じでしょうか。

しかし、プログラムを作るような難しいものではなく、中学生程度の英語が理解できるようなら、 比較的簡単に覚えることができます。

文字の色を変えたり、大きさを変えたりする時に指定する言語それが「タグ」と言われるものです。

「タグ」というものは <  と > ではさんで、その < と > の中に指定する言葉を書いていくのです。

タグというのは、一部をのぞいて開始タグ  < > から始まって、 終了する部分に
 </ > で閉じて終了します。
終了タグで閉じ忘れると、その後の表示がおかしくなることがあるので注意しましょう。

ひとつ例題をあげてみます。

文字の色を変更するタグを使って文字の色を赤に変えて見ましょう。

「これは赤い文字です。」
これを文字を赤くするタグで囲むと
「これは赤い文字です。」
となります。
どうなっているかって?
では、ソースを見てみましょう。

ソースとは、簡単に言うと、このHPを作っているページを言語で表示したものです。

ソースの見方は、ブラウザのIE5.5やIE6なら、 メニューバーの表示−ソースをクリックすると今見ているHPのソースを見ることができます。
(IEであれば、4.0、5.0でも同じ方法で見ることができると思います)

どうですか?なにやら  < > でかこまれた文字がいっぱいでてきたでしょう?(笑)
これがソースと言われるものです。

では、先ほどの文字色の変更にもどりますね。

まず「これは赤い文字です。」と普通に文字を入力します。
次にこの「赤い文字」だけ赤くするタグで囲みます。

これは<font color="#FF0000">赤い文字</font>です。
これをブラウザで表示させると、
これは赤い文字です。
となるのです。

このような感じで変化させたい部分をタグで囲んでやれば、色を変えたり、文字の大きさを変えたりすることができるのです。

では、これから実際にHPを一緒に作成していきましょう!

▲このページのトップに戻るTop