スキル

ホームページ作成に使われるHTMLとは?便利なサービス・ツールも紹介

ホームページを自分で作ることができれば、会社のPRツールの一つとして使ったり、個人で趣味のページを開設したりと色々と便利です。「ホームページを作りたい!」と思ったときに主に利用するプログラム言語にHTMLというものがあります。この記事では、HTMLの基本となる内容について解説しています。

後半では、ホームページを簡単に作成できるサービス・ツールについてもご紹介していますので、これからホームページ作成にチャレンジしてみたいという人は、是非この記事を参考にしてください。

HTMLの基本の基本

まずは、そもそも「HTMLとは何なのか」というところから解説していきます。

HTMLは、Webページを作成する言語

HTMLは、Webページを作成する際に多く用いられているプログラム言語です。混同しがちなので、HTMLについてご説明する前に、Webという言葉について先に解説しておきます。

「インターネット」という言葉は、多くの人が耳にしたことがあると思いますが、これは世界中のコンピューターを繋げて情報のやり取りをするネットワークのことを指します。

どこかに「インターネット」というものがあって、そこに繋がっているというのではありません。「コンピューター同士の繋がり」そのものがインターネットなのです。

そして、このインターネットというネットワークを通じて文書や画像などを閲覧することをできるようにする仕組みのことをWebといいます。Webは、インターネットが持つ機能の内の一つであり、中心となる機能です。Web=インターネットという使われ方をすることもあります。

このWeb上に存在する一つ一つの文書のことをWebページといいます。あなたが今ご覧になっているこのページもWebページです。WebページがまとまったものがWebサイトです。ホームページという言葉もありますが、Webサイトとほぼ同じ意味だと思えば大丈夫です。

WebのイメージとWebサイトのイメージ

Webというのは、大きな塊だとイメージしてください。新宿副都心やマンハッタンのような高層ビル群をイメージするといいかもしれません。

そして、高層ビル群には、多くのビルがあり、そのビルには一つ一つの部屋があるように、Webの中には、沢山のWebサイトがあります。

ビルの一つ一つの部屋に住所や部屋番号があるように、WebサイトにはURLというものが割振られています。この仕組みがあるおかげで、あなたが「このURLのページを見たい」とリクエストすると、そのWebサイトが閲覧できるということになるのです。

なお、厳密には、部屋の住所に当たるものはURLではなく、IPアドレスというものなのですが、この点は気にしなくても大丈夫です。

Webページは、HTMLで書かれている

Webサイト・Webページについては、イメージできましたでしょうか。このWebページを作るためのプログラム言語がHTMLです。

HTML というのは「HyperText Markup Language」を略したものです。HyperTextをMarkupするためのプログラム言語ということになります。

HyperTextというのは、複数の文書(画像や音声、動画なども含みます)を相互に関連付けることができる高機能のテキストのことです。Webページを見ると、クリックすると他のページに飛んだり、画像が表示されたりするテキストがありますが、あれらはHyperTextです。

Markupというのは、「印をつける」くらいの意味です。この後紹介する「タグ」というものを使って印を付けて、情報に意味づけをします。例えば、「ここは見出しである」とか、「ここはテキストである」といったようにコンピューターに認識させる作業がMarkupです。

タグで囲むことで意味づけがなされる

上で説明したように、意味づけの作業を行う際に、HTMLではタグというものを使います

例えば<b></b>というタグで囲んだ場合、

<b>ここは太字で表示されます。</b>

といったように書いて、ブラウザで表示すると、この部分は太字になります。他には、<h2></h2>というタグなら、これで囲った部分が見出しになるといったように、複数のタグが用意されています。

ファイル形式について

HTMLは、独自のファイル形式があります。ファイルの拡張子は、「.html」です。

拡張子というのは、どんな種類のファイルであるかをコンピューターが識別する目印になるもので、テキストファイルなら「.txt」、ワードファイルなら「.docx」といったようにファイル形式ごとに決まっています。

HTMLを使用して作成されているもの

HTMLを使用すると、単純なテキストではなく、画像を表示されたり、必要なリンクが貼られていたりする、複雑で機能的な見栄えの良いページを作成できます。HTMLがWebページを作成する際に多く用いられていることは既にご説明しましたが、このような特徴を生かして、HTML形式のメールに使われたり、スマホアプリに使われたりもしています。

ちなみに、実際にHTMLがどのようなものかは簡単に見ることができます。どんなサイトでも構わないので、画面に表示させてみてください。

表示したサイトにカーソルをのせた状態で、マウスを右クリックしてください。Chromeの場合「ページのソースを表示」と出ます。それを選ぶと以下のようなHTMLが表示されます。

使っているブラウザによって表記は多少異なりますが、「ソース」を表示するといった内容を選択すればOKです。このソースというのは、ソースコードのことで、プログラムを記述した文字列のことをいいます。

HTMLファイルとCSSファイル

Webページを作成するためにHTMLを使うということは、ご理解いただけたでしょうか。もう一つ覚えておきていただきたいものに、CSSというものがあります。

CSSは、「Cascading Style SheetsCascading Style Sheets」の略です。スタイルを指定するためのプログラミング言語になります。スタイルというのは、簡単に言うと装飾のことです。色やサイズなどの装飾を施すことでWebページの見栄えは格段に良くなりますが、これを行うのがCSSということになります。

Webページを作成する上で使用できるプログラミング言語は他にも色々ありますが、とりあえずHTMLとCSSだけを理解しておけば、Webページの作成は可能です。

まずは、HTMLとCSSを理解して、後は必要に応じて追加で勉強していけば大丈夫です。

HTMLファイルの作り方とファイル名の付け方

HTMLファイルを作るときは、テキストエディタを使ってソースコードを記入、ファイル名を付けて保存する際にHTMLファイルとして保存します。

テキストエディタは、Windowsならメモ帳でOKです。ファイルを保存する際に、ファイル名を「~.html」として、ファイルの種類を「すべてのファイル」、文字コードを「UTF-8」で保存しましょう。

保存したファイルのアイコンが、使用しているブラウザのアイコンになっていれば、HTMLファイルの保存に成功しています。

このとき、ファイル名は、作成するWebページに関連するものにしておくことをおすすめします。例えば、猫のページのファイルなら「cat.html」といったものです。全く意味のない数字などをファイル名にすることもできますが、関連する名前にしておいた方が、検索でヒットしやすくなります。

ちなみに、ホームページのTOPページに関しては、「index.html」と付けるのが一般的です。

ページを装飾する要素はCSSで別に保存

Webページの装飾は、HTMLを使ってもある程度はできるのですが、CSSで別ファイルに作っておくと、CSSを書き換えるだけで全てのページの装飾を一括して修正することができて便利ですし、装飾はサイト内で統一されていた方が一体感があって見た目にもキレイです。

装飾関係のデータは別にCSSで作成するようにしましょう。

ちなみにCSSを使わずに、シンプルなHTMLだけでページを作成すると以下のような雰囲気になります。

これでも一応Webページとして成立はしていますが、CSSを使って装飾を施すと以下のようなページの作成が可能です。

どちらが見やすく、見栄えの良いページになっているかは一目瞭然でしょう。

無料から使えるホームページ作成ツール

ここからは、無料から使えるホームページ作成サービス・作成ツールをご紹介します。「無料から」としているのは、容量を増やしたい、独自ドメインを使用したい、便利な機能を追加したいといった場合には、有料プランに切り替えることが必要になる場合が多いからです。

多彩な機能が無料で使える「Ameba Ownd」

Amebaが運営するサービスです。ブログ機能やSNSとの連携といった機能が無料で使え、商用利用も可能。独自ドメインの使用も無料です。

ただし、画像の容量は1GB、作成できるページの上限は10ページです。これらの制限をなくしたい場合や、広告表示を消したい、Ameba Owndのロゴが表示されるヘッダー・フッターを消したいといった場合は、有料のプレミアムプランに変更する必要があります。

手軽に作成できるプランと、自由に作成できるプランあり「ジンドゥー」

ジンドゥーには、「ジンドゥーAIビルダー」というプランと「ジンドゥークリエイター」という2つのプランがあります。どちらの場合も無料プランがあるので、費用をかけずにホームページを解説できます。

手軽にホームページ作成ができる「ジンドゥーAIビルダー」の場合、START、GROW、PLAYの3つのプランがあり、PLAYが無料プランです。自由にホームページを作れる「ジンドゥークリエイター」の場合は、プランが5つあり、FREEが無料プランです。

参考:ジンドゥー

用途に合わせて選べる「Wix」

Wixのツールには、ドラッグ&ドロップでホームページを手軽に作成できる「Wix エディタ」、人工知能のサポートにより最短3分でホームページが作成できる「Wix ADI」、デベロッパー向けの開発プラットフォーム「Corvid by Wix」があります。

機能を拡大するためには、プレミアムプランに切り替える必要があります。独自ドメインを使用するための「ドメイン接続」というプランがあり、以下、「ベーシック」「アドバンス」「VIP」の順で容量やサービスが充実していきます。

参考:Wix

初年度無料のプランあり「BiNDup」

BiNDupの場合、「エントリーコース」は無料で始めることができますが、初年度無料で、2年目以降は月額480円がかかります。ずっと無料で使えるサービスではありません。

他のプランには、「基本コース」、「ビジネスコース」があります。ネットショップ開設に必要なカート機能なども月額基本料金に含まれているので、ビジネス利用には便利ですが、無料で使えることを重視する場合には、おすすめできないサービスとなっています。

参考:BiNDup

無料版でも広告なし「FC2ホームページ」

FC2ホームページは、無料版でも広告の掲載がありません。ただし、3ヶ月以上更新がない場合や、スマホでの閲覧時には広告が表示されます。無料版の容量は1GBまでで、容量を増やしたい場合は、有料版への切り替えが可能です。

アダルトコンテンツを扱える「FC2ホームページアダルト」があるのも特徴です。こちらも無料版があります。

参考:FC2ホームページ

無料レンタルのサーバースペース「忍者ホームページ」

忍者ホームページは、サーバースペースのレンタルサービスです。ホームページを手軽に作成できるツールといったものではありません。無料で500MBの容量まで使えますが、バナー広告が入ります。

広告が入らない有料プランは、サーバーディスク容量が5GBまでアップして、月額120円です。

参考:忍者ホームページ

追加機能も無料で使える「CLOUD LINE」

CLOUD LINEの機能一覧のページには、「自動で進化するCMS」という表記があります。その言葉の通り、定期的にバージョンアップがなされていて、そこで追加された機能も無料で使えます。なお、CMSというのは、Contents Management Systemの略で、HTMLなどの専門的な知識がなくても、Webページの作成を可能にするシステムです。

ちなみに、CLOUD LINE は、SNSのLINEとは関係ありません。

参考:CLOUD LINE

スマホでホームページ作成「Crayon」

Crayonの大きな特徴は、スマホでもホームページを作成することができることです。パソコンがない人、ホームページ作成に割く時間がない人でも、スマホで簡単にホームページが作れます。

無料プランの「フリー」で作れるのは、3ページまで、画像は10枚までです。これ以上増やしたい場合は、「ライト」や「プロ」といった有料プランが用意されています。

参考:Crayon

ビジュアルエディターでカスタマイズ可能「Zoho Sites」

Zoho Sitesは、テンプレートを使ってホームページが簡単に作成できるだけでなく、ビジュアルエディターの機能を使って、デザインをカスタマイズすることができます。レスポンシブルテンプレート採用していて、スマホ等のデバイスでの表示にも対応しています。

参考:Zoho Sites

まとめ

HTMLの基本的な知識と、ホームページを無料で作れるサービスやツールについてご紹介しました。記事内でもご紹介したように、とりあえずホームページを作りたいだけなら、HTMLなどの知識がなくても手軽に作ることができるサービスも色々あります

一方、自分で好きなようにホームページを作りたいなら、HTMLとCSSについてだけでも覚えておくことをオススメします。ホームページを作る方法にも色々あるので、自分に合った方法を見つけてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。