独自ドメイン?サーバ?今さら聞けないホームページ開設の基礎知識

ホームページ制作
この記事は約7分で読めます。

Webサイトやブログを自分だけのURL(独自ドメイン)で開設するときに知っておきたい用語についてまとめます。

スポンサーリンク

今さら聞けないホームページ開設の基礎知識

ホームページとWebページ、Webサイトに違いがあるの?

ホームページとWebページは同じと思われていますが、「ホームページ」とはブラウザを起動したとき初めに表示されるWebページのことを言い、Webページがいくつも集まっている状態をWebサイトと呼んでいます。

ただ、Webページが登場したころからずっと「ホームページ」と呼ばれているし、それのほうが周知されているので使い分けがあいまいになっているところもあると思います。

Webページはどんなもの?何で作る?

Webページ自体は凝った作りでなければ、Windowsに標準インストールされている「メモ帳」でも作成できます。

では、実際にWindowsのメモ帳を使ってWebページ(もどき)を作ってみましょうか。

Windowsのメモ帳でWebページを作ってみる

まず、Webページを構成するファイルはすべて同じフォルダ内に保存するのでデスクトップに適当な名前を付けたフォルダをひとつ作っておきます。

次に、Windowsのメモ帳を起動し、次の文字をコピーして貼り付け、先ほど保存したフォルダに「index.html」という名前を付けて保存してみましょう。

<html>
<head><title>テスト</title></head>
<body>
<p>テストページ</p>
</body>
</html>

先ほど作成したフォルダを開き、メモ帳で作成した「index.html」を開いてみましょう。

ブラウザが起動し、下の図のように開いてくることを確認してください。

解説すると、<>で囲んだ部分はHTML言語と呼ばれている「タグ」です。タグには決まりがあって開始タグと終了タグがあり、終了タグにはタグの先頭に「/」を入れます。

上のコードは略式中の略式ですが、それぞれのタグはよく使うタグで

  • html…Webページだよ、という宣言
  • head…Webページの本文には表示されないけれど大事なことを入力しておく
  • title…タイトルバーに表示される文字
  • body…ブラウザ本体に表示される部分
  • p…段落

となります。他にもたくさんのタグが存在していて、それらを目的に合わせて組み上げていくことを「Webコーディング」と呼び、コーディング作業を行う人を「コーダー」と呼んだりします。

上のコードに、写真を読み込むタグを追加してみます。

その前に、先ほどデスクトップに作ったフォルダに写真ファイルをひとつ保存しておいてから。

<html>
<head><title>テスト</title></head>
<body>
<p>テストページ</p>
<img src="akisora.jpg">
</body>
</html>
akisora.jpgのところはフォルダに保存した写真ファイルのファイル名に置き換えてください

写真のサイズが大き過ぎると下の図のようになってしまいます…。これはサイズ指定をしていないためですのでご安心くださいね。

Webページに使う写真やイラストはどこから手に入れる?

自分で写真を撮影するにこしたことはないのですが、そうそううまく写真撮影することはできないかもしれません。

また、イラストひとつ描くにも不得意な人からすれば大きく時間を要してしまい、Webページの完成を遅らせてしまう原因にもなりかねません。

いまの時代、Googleなどの検索エンジンでは画像検索ができるようになったことから探したい画像がすぐに見つかるようになりましたが、なんでもかんでも使っていいというわけではありません。

ホームページ作成といえば素材の準備。画像はどこで手に入れる?にも書きましたが、無料で商用利用が可能な画像を配布しているサイトも増えてきているので、そういうところからダウンロードするのもいいと思いますし、有料になりますが写真素材【PIXTA】を利用するのもいいかと思います。

Webページを作成するソフトは?

このように、Webページは「タグ」と呼ばれる言語が分かればメモ帳などのテキストエディタで作成することはできます。が、これはなかなか骨の折れる作業です。

そんなときに使うのがWebページを作成できるソフトになるわけですが、有名どころでいえば「ホームページビルダー」でしょうか。

このソフト自体、操作方法はさほど難しいところはないかと思いますが、ソフト独自のタグが入るのが少し気になるところではありますが、操作自体は難しいところはないので初めてホームページを作る人にはいいソフトかもしれません。

もうひとつ、お勧めしたいのが「Adobe DreamWeaver」、なのですが、Adobe製品はいま、すべてのアプリケーションがサブスクリプション型で提供されているので、毎月または毎年、使い続ける限り料金が発生するようになりました。

ちなみにAdobe DreamWeaver単体の場合は

となります。

アプリケーション単体でも月々4,000円弱(一年使うよという契約にすれば3,000円弱)かかるので2つ以上のアプリケーションを使いたいなら、Adobeのアプリケーションすべてが使用できる「コンプリートプラン」のほうがいいかも、と思いますが、それだけのために契約するのも…とも思うかもしれませんね。

レンタルサーバを借りるのに月額1000円程度かかるとして年12,000円、独自ドメインを取得するとして年2,000円、これにソフト購入費用がかかってきます。

サーバとは?ドメインとは?

Webページにはそれぞれ「URL」が付いていますね。これがインターネット上の住所、あなたのWebページが置いてある場所を示しています。

Webページはどこに置いていても見られるものではなく、インターネット上にあるWebサーバに置いておかないと他の人に見てもらうことはできません。

Webサーバを自力で構築することもできなくはないのかもしれませんが、セキュリティや管理に使う労力や費用を考えると、ロリポップ!などのレンタルサーバを契約するのが一般的です。

レンタルサーバを借りればWebページのファイルをアップロードできるようになり、他の人に見てもらえる状態になります。が、URLはレンタルサーバと契約したときに付与されるアドレスになりますので、サーバのドメインに自分の契約したものが付く「サブドメイン」という形になることが多いです。

アメブロも「ameblo.jp」というドメインの下にあなたのブログエリア(アメブロはアカウント名)が付いていると思いますが、それに似た状態になります。

このサイトは「w-seed.com」という独自ドメインを取得し、レンタルサーバにドメインを設置して公開しています。

独自ドメインを取得するメリットはいくつもありますが、レンタルサーバを変更してもそのドメインを引き続き使用できることが一番大きいかな、と。

独自ドメインはムームードメインお名前.comなどで取得することができます。

Webページを公開するまでの流れ

独自ドメインを取得し、レンタルサーバに設定してWebページのファイルをレンタルサーバに置く手順としては

  1. レンタルサーバと契約
  2. 独自ドメインを取得
  3. レンタルサーバに独自ドメインを設定
  4. Webページを作成する
  5. レンタルサーバにWebページのファイルをアップロード

となります。

なぜ、レンタルサーバと独自ドメインを設定してからWebページを作成するかというと、レンタルサーバによっては使えるプログラムが異なるからです。特に、お問い合わせフォームなどを設置したい場合は気を付けましょう。

独自ドメイン?サーバ?今さら聞けないホームページ開設の基礎知識、のまとめ

いろいろ書いてきましたが、ホームページ開設をかんがえたときに知っておくと話が早く進むだろうという言葉を開設してみました。

この辺りの説明をまた別の形でまとめて配布できるようにしたいなと思ってはいるのですが、なかなか…。

ホームページを自力で作りたい人向けに書きましたが、ホームページを作成してくれている人を探しているなら、スキル販売で有名なホームページ制作の依頼・相談|ココナラや、フリーランスで仕事をしている人に仕事を発注できるクラウドソーシングのCrowdWorksなどを使ってみるのもありかと思います。

ホームページの専門知識がなくても、ブラウザ上で作成できるサービスもありますので、一度見てもらってもいいかもしれません。

スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
ホームページ制作
スポンサーリンク
キヨミをフォローする
この記事を書いた人
アバター

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

キヨミをフォローする
だぶるしーど