ホームページの作り方

【超基礎】ホームページの作り方まとめ

はじめに。

私が初めてホームページを作ったのは2003年ぐらいのことなので12年も前の話になります。 当時はまだツイッターもフェイスブックもありません。ブログがようやく登場し始めた時代でした。

仕事の合間をぬってメモ帳を開きながら、わからないところはGoogleで検索し独学で作り始めたのを覚えています。 あれから10年近く経っていますが、ホームページを作るための手順はほとんど変わっていません。

デザインも抜きにして非常にシンプルな物を作るのであれば、まったく何も知らない初心者の方でも作ることは可能です。 このページではホームページ作成をする上で、本当に最低限必要となる「もの」や「知識」を紹介してみたいと思います。

ホームページ作成に必要なものその1.ドメイン

まずホームページに必要なもの。それは「ドメイン」です。ドメインと聞くと聞きなれないかもしれませんが、 ホームページはそれぞれ固有のドメインを持っていて、そのドメインを頼りに訪問者がアクセスしてきます。

例えば、このサイトであれば「http: //www.domain-easy-study.com」の赤文字の部分がドメインです。

いわゆる住所とも言えるこのドメインですが、これを自分で持つためには「ムームードメイン」のようなドメイン業者で年間1000円ぐらい払って購入するか(※.comの値段)、 無料ホームページサービスなどで貰うのが一般的です。

まず、このドメインを持った時点で、みなさんはネット上に住所の権利を保有したことになります。

  • ドメインとはネット上の「住所」にあたります。

ホームページ作成に必要なものその2.サーバー

ドメインの次に必要になるのがサーバーです。サーバーと言うとこれも難しく感じるかもしれませんが、24時間電源が点いているパソコンのことだと思ってください。

なぜサーバーが必要になるのかというと、これはホームページのデータを置くためです。 サーバーにドメインという住所を紐づけることで、アクセスしてきた人はそのサーバーにホームページを見に来ます。 この時、サーバーにホームページのデータがしっかり入っていれば、そのホームページを問題なく見ることが出来るわけです。 もし、データがなかったら?エラーの表示がでることになります。

24時間電源が点いているのは、いつどんな時間に訪問者が来てもホームページのデータをしっかり返すためです。

このサーバーについてですが、月額料金を払ってレンタルサーバーを借りるか、または無料ホームページサービスなどで借りるのが一般的です。

「ドメイン」が住所であれば、「サーバー」は家のようなものです。 この2つがあれば、あとはホームページのデータを用意すればサイトは公開できるんですね。

ホームページ作成に必要なものその3.サイトデータの作り方

3つ目に必要になるものがホームページのデータです。 ここでは「index.html」(HTMLファイル)、と「style.css」(スタイルシート)の2つ。このHTMLファイルとスタイルシートの必要最低限の作り方を説明してみたいと思います。

index.html」「style.css」といきなり横文字が出てきましたので、なんだそれはとなるかもしれませんが、これらは「秀丸」や「さくらエディタ」など エディタソフトと呼ばれる物を使って作るものです。 エディタソフトはテキストエディタとも言われますが、それ自体は開くと真っ白なノートなんですね。 つまりパソコン上のノートだと思ってください。

これらのノートに必要なデータを書き、「名前をつけて保存」をすることでindex.htmlやstyle.cssを作成することになります。

  • index.html ・・・HTMLファイル。
  • style.css ・・・スタイルシート。

1.HTMLファイルとスタイルシートとは?

HTMLファイル

本で言うとページを構成する部分がHTMLファイルです。本の場合1ページ、2ページ・・・となりますがHTMLファイルであれば 「01.html」、「02.html」のような書き方でページを作成していきます。 「01.html」「02.html」といったように数値を使うこともありますが、 実際には「domain.html」とか「howto-homepage.html」のように英語などで意味を持たせてネーミングすることが多いです。 ちなみにこのホームページは50ページ以上から構成されていますが、ページ数と同じだけのHTMLファイルがあると思ってください。

そしてHTMLファイルでは主に、「HTML」と呼ばれるタグと、文章などのテキストを書くことになります。 ここで書いた文章がホームページの内容として表示されることになるんです。

スタイルシート

一方、スタイルシートは本でいうとデザインや装飾を担当する部分にあたります。 例えば文字の大きさや色。見出しのデザイン。余白をどれくらいの幅で指定するのか。など 細かいデザインを決めることができます。

「style.css」のように拡張子が「.css」になります。 当サイトではPC用とスマホ用の2ページ分のスタイルシートを作成しています。 すべてをまとめて1ページだけで作成するサイトもあるでしょうし、内容が多くなるようであれば数ページにわけて作成する場合も多いです。

imageフォルダ

3つ目に紹介するのは「imageフォルダ」です。これは画像置き場だと思ってください。 ホームページ作成では画像を使うことが多いですが「image」とネーミングしたフォルダを作り、画像の置き場を作るのが一般的です。

2.ファイルの作り方

次に「index.html」と「style.css」を実際にどのように作っていくのか、その方法を説明したいと思います。

index.html

index.htmlのようなHTMLファイルを作るには、エディタソフトにHTMLを入力する必要があるのですが、 初めてだとなにをどう書けばいいのかわかりませんよね。

そこで必要最低限、これだけ書いていればページ表示が出来るHTMLのコードを紹介してみたいと思います。 これをコピペしてテキストエディタに添付すれば、後は「名前を付けて保存」でindex.htmlとして保存すればファイルの完成です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.  <head> ←ヘッダーではタイトルやメタタグなどを記載します。
  4.   <meta charset="UTF-8">
  5.   <title>ページタイトル</title>
  6.  </head>
  7.  <body> ←bodyタグからページに表示される部分です。
  8.   <h1>見出し</h1>
  9.   <p>Pタグには文章を書きます。ここに文章を書きます。</p>
  10.  </body>
  11. </html>

10行ほどのコードになっていますが、このデータを使えば「このように表示されることになります

文字だけのシンプルなページとなっていますが、この状態からスタイルシートを使って文字の色や大きさ、余白などデザインを指定していく形になります。

style.css

スタイルシートもHTMLファイルと同じくテキストエディタにデータを書き込む形になりますが、書き方がちょっと変わります。 こちらも下のデータをコピペしてもらってstyle.cssと名前を付けて保存すれば使えます。

  1. body {  ←body全体に指定をします。
  2.    margin: 50px; ←余白を50px取る
  3.    background-color: #FCFFF5; ←背景色の指定
  4. }
  5. h1 { ←h1に対して指定をします。
  6.    text-align: center; ←h1の文字をセンタリング
  7.    color: #32A130; ←文字の色を指定
  8. }
  9. p { ←Pタグに対して指定をします。
  10.    background: linear-gradient(transparent 0%, #ffff66 30%);
       ↑文字背景を黄色に
  11.    font-weight: bold; ←文字を太くする
  12. }

スタイルシートで色や余白を指定したページが「こちらのページになります

実際に作成するHTMLファイルやスタイルシートはもっと複雑なものになると思いますが、今回紹介した最低限のコードでも リンク先のようにしっかり表示することができます。

以上でデータの作成は完成です。後は作ったデータをサーバーへ移動させれば、ホームページが見れるようになります。

3.ファイル階層

ファイル階層については、始めての時点で覚えていなくともホームページは作れます。 ただ階層の概念を知っておくと、後々ものすごく楽になりますので説明してみたいと思います。

さきほどホームページ作成にはドメインという住所が必要になるということを説明していますが、 この住所と大きく関わってくるのがファイル階層です。 まずは当サイトのドメインを紹介します。

  • http://www.domain-easy-study.com/
    ・・・これがTOPページ(index.html)の住所です。

例えばホームページの説明をするために「homepage.html」とネーミングされたHTMLファイルを作ったとします。 この場合、住所は次のようになります。

  • http://www.domain-easy-study.com/homepage.html
    ・・・これが「homepage.html」の住所です。

仮にホームページの説明をするために30ページ分のHTMLファイルを作ったとします。 この場合は例えば次のようになります。

  • http://www.domain-easy-study.com/homepage.html
  • http://www.domain-easy-study.com/homepage01.html
  • http://www.domain-easy-study.com/homepage02.html
  • http://www.domain-easy-study.com/homepage03.html
  • http://www.domain-easy-study.com/homepage-desing.html
  • http://www.domain-easy-study.com/homepage-color.html
  • http://www.domain-easy-study.com/web-creat.html
ページを整理したい場合はフォルダを追加します。

あまりにもページが多くなってしまった場合や、新しく違うテーマのページを追加したい場合などにどうするのかと言うと 新規フォルダを作成するのが一般的です。 例えばこのサイトであればテーマごとに「domain」「mail」「homepage」などたくさんのフォルダを作っています。 このフォルダをはさむことで住所の階層が2階層になります。

ちなみに、このページは「homepage」フォルダの中に「howto-homepage.html」として格納されています。 この場合、住所は次のようになります。

  • domain-easy-study.com/homepage/howto-homepage.html

住所(URL)が長くなっているのがわかると思います。

では、さらに「homepageフォルダ」の中に「seoフォルダ」や「blogフォルダ」を作成したとします。 この場合、階層は3階層となり住所(URL)もさらに長くなります。

  • domain-easy-study.com/homepage/seo/howto-seo.html
  • domain-easy-study.com/homepage/blog/howto-blog.html

これがファイル階層の概念です。

作ったデータを公開する。

ドメインとサーバーの用意ができて、データの作成が完了すれば残すはデータを公開する作業だけです。 この時点ではデータは皆さんのパソコンの中にありますが、これをサーバーに移動させる必要があります。この作業をアップロードと言います。 そしてデータの移動(アップロード)を行うにはFTPソフトと呼ばれる転送ソフトを使います。

FTPソフト(FFFTP)

データを転送してくれるFTPソフトは何種類もあるのですが、ここでは代表的なソフトを1つだけ紹介してみたいと思います。 私も実際に使っているソフトになります。

このソフトの説明や使い方については別のページで詳しく紹介をしています。

かけあしで1からホームページを作成する手順を説明してきましたが、これまでの手順を踏むことでホームページは完成となります。

【応用編】その次のホームページ作成

基礎編で説明したことを実践することで、最低限ですがホームページを公開することができます。 応用編ではこの先、もう少し踏み込んでホームページ作成をすすめたい場合に知っておくと役立つ知識を、本当にさわりだけですが説明してみたいと思います。

スマホ対応ページを作るには?

iphoneなどのスマホが登場したことによりスマホからの訪問者が大変増えてきているのが現在です。 事実、私が運営しているサイトではPCよりスマホからの流入が多いサイトのほうが多いです。

スマホに対応したページを作る場合、主な考え方として3通りあります。

方法その1.スマホ専用のページを作成する

1つはPCとは別にスマホ専用のページを作るやり方です。この場合、同じページであってもPC用・スマホ用のHTMLファイルが必要になりますので手間がかかります。 ただ専用のページを作るので次に紹介するレスポンシブデザインによるやり方よりも、よりスマホに最適化したものが作ることが可能です。

方法その2.レスポンシブデザインで作成する

2つ目のやり方はレスポンシブデザインと呼ばれる方法です。当サイトはこちらを採用しています。 これはどういうことかと言うと、HTMLファイルは1つのみ。その代わりスタイルシートはPC用とスマホ用にわけて表示を切り替えるというやり方です。 HTMLファイルの作成が1つで済む分、レスポンシブでの作成は作業の負担が少ないです。 その代わり少し複雑な表を作ったりするととても見難くなったりするので、専用ページを作るのかレスポンシブを作るのかは、サイトの内容や作業量との兼ね合いの判断になると思います。

方法その3.PC用のサイトをそのまま表示させる

3つ目のやり方はPCページのみを作って、そのまま何も対策せずスマホで表示するというやり方です。 スマホには拡大機能がありますので、その機能を使ってホームページを見る方も多いです。 いまでは大きなサイズのスマホも以前より画面が大きいため、無理をして最適化する必要がない。と言う考え方もあります。

ホームページ作成を1から始めて、さらにスマホ対応を行うにはとても学習量がかかってくると思いますが、 いずれ取り組むことかもしれませんので、それぞれの特徴を覚えておいても損は無いと思います。

  1. スマホ専用ページを作る
  2. レスポンシブデザインで作る
  3. PCサイトをそのまま表示する

テンプレートでおしゃれなホームページを作る

ホームページを作る方の希望として、自分の思うようなデザインを実現させたいという気持ちが強いと思います。 そのためにはHTMLやスタイルシート、フォトショップなどの画像編集ソフトの勉強をしなくてはいけないわけですが、やはりこれも時間がとてもかかってしまいます。 そこで紹介したいのが「テンプレート」です。テンプレートを使うことですでにデザインが完成された状態でホームページを作ることができます。

仕事にも使える!おしゃれで超簡単なホームページテンプレートまとめ

簡単にホームページを作るサービスのまとめ

テンプレートもそうですが、今では自分で1からHTMLやスタイルシートの勉強をしなくても、簡単にホームページを持つことが出来るようになっています。 これから作ろうとしているサイトが、今回紹介しているサービスで代替できるのであれば検討してみてもいいかもしれません。

【超かんたん】ホームページが1時間~1日で作れるホームページ作成ツールまとめ