• HOME
  • HTML/CSS
  • 制作コストを削減！HTMLを使ってホームページを作成する手順
  • HTML/CSS
  • css
  • html
  • javascript

制作コストを削減！HTMLを使ってホームページを作成する手順

制作コストを削減！HTMLを使ってホームページを作成する手順

ホームページ作成方法が分からない人は会社や個人でホームページを作るためには作成を外部に委託する方法があります。価格はページ数によって異なりますが、20～50万とかなり高額です。資金に余裕があるなら可能かもしれません。もし資金に余裕がなければ、ホームページが作れないです。

現代はインターネットで情報を収集する時代なので、ホームページなくして売上を上げるのは難しいです。コストを抑えてホームページを開設するには自分で作ることでコストを削減できます。

本記事ではHTMLを使ってホームページを作成する手順を解説します。HTML自体はそんなに難しいものではないので、ぜひ挑戦してみてください。

HTMLでホームページを制作する手順

準備

HTMLでホームページ制作を始めるにあたり用意するべきものは以下の2つです。

  • ブラウザ
  • テキストエディタ

ブラウザはGoogle ChromeやMicrosoft Edge、Firefox、Internet Explorerなどwebページを表示するためのものです。作成したホームページの確認するために必要です。初めはPCを購入した際に入っているブラウザでもOKです。

HTMLでホームページを作るならできるだけ二つ以上のWebブラウザを使えるようにすることがおすすめです。ブラウザによってHTMLで表示されるページが若干違います。複数のブラウザがあるとブラウザでレイアウト崩れがないかを確認できます。

ユーザーがどのブラウザを使うかは指定できません。ユーザー目線のサイトにするためはブラウザ違いの確認は大切です。

テキストエディタはコードを書くために必要です。テキスト編集できるものであればなんでもOKです。Windowsで標準にある「メモ帳」でもHTMLを作ることができます。ただし、効率的に開発するためには専用のエディタを使うことをおすすめします。

おすすめのテキストエディタは以下の通りです。

  • Visual Studio Code
  • Atom

コーディング専用のエディタを使うとHTMLの閉じタグが自動で書かれたり、ショートカットや文字数を入れたら予測でコードを書いてくれるものもあります。メモ帳でもできますが、初心者の人ほどコーディング専用のエディタを使うことをおすすめします。

HTMLファイルにコードを書く

準備が整ったらエディタにコードを書いていきます。ファイル名は「.html」の拡張子で保存します。HTMLのコードを書く手順は以下の通りです。

  1. htmlタグで大枠を作る
  2. headタグにとbodyタグを作る
  3. headタグにホームページの情報を記述する
  4. bodyでコンテンツを作る。

1と2はホームページの大枠を作ります。htmlタグは囲まれた中がhtmlという宣言です。headタグはホームページの情報を記述する場所です。文字コードやホームページのタイトル、CSSのリンクなどを書きます。

bodyタグの中にはホームページのコンテンツを作ります。HTMLではタグを使ってコンテンツに役割を与えます。例えば、見出しを作る文字の場合はhタグを、段落を作るにはpタグを使います。タグ名と役割は下記の記事に一覧があるので参考にしてみてください。

いまさら聞けないHTMLのコードとはどんなものかがわかりやすく解説

下にコード例を書いていますので、参考にしてみてください。作成したhtmlファイルを読み込むとブラウザ上で表示されるので、確認して問題なければ完成です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>テスト</title>
  </head>
  <body>
    <header>
      <h1>テスト</h1>
      <ul>
        <li>概要</li>
        <li>情報</li>
        <li>ブログ</li>
        <li>問い合わせ</li>
      </ul>
    </header>
    <main>
      <section>
        <img src="https://placehold.jp/150x150.png" alt="画像" />
        <h2>テストページです</h2>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </section>
      <section>
        <h3>概要</h3>
        <img src="https://placehold.jp/150x150.png" alt="画像2">
      </section>
      <section>
        <h3>情報</h3>
        <table>
          <tr>
            <th>日付</th>
            <th>新着情報</th>
          </tr>
          <tr>
            <th>20xx.y.z</th>
            <th>トップページを更新しました</th>
          </tr>
          <tr>
            <th>20xx.x.y</th>
            <th>ホームページを解説しました</th>
          </tr>
        </table>
      </section>
      <a href="#">TOPへ行く</a>
    </main>
    <footer>
      <small>©copyright 2021</small>
    </footer>
  </body>
</html>

HTMLの学習方法は下記のリンクに掲載しているので、ぜひ参考にしてください。初心者の方は「Progate」から始めるのがおすすめです。

【無料あり】HTMLとCSSの練習に使えるサイト、教材紹介

サーバーにアップロードする

ホームページはファイルを作っただけではWeb上に公開されません。サーバにアップロードすることでWeb上に公開されます。サーバーにアップロードするにはレンタルサーバーを契約する必要があります。

ホームページの公開におすすめのレンタルサーバーは以下の通りです。

エックスサーバーとスターサーバーは無料プランがあるので、初めは無料プランで学習してもいいと思います。ただし、性能が無料と有料では違うので、資金に余裕があり、慣れてきたら有料プランに変えることをおすすめします。

HTMLでのホームページ制作が終わったら

CSSでデザインをつける

HTMLではWebページに高度なデザインをつけることができません。Webページにデザインがなければ見にくく、ユーザーがすぐに離脱する可能性が高いです。そのため、CSSでデザインを整える必要があります。

CSSについては下記の記事に詳しく書いてあるので参考にしてください。

CSSの基礎知識まとめ(コードの型や具体例などを解説)

JavaScriptで動きをつける

昨今のWebページは画像が切り替わるスライドショーやアイコンをクリックするとメニューが現れるハンバーガーメニュー、アコーディオンメニューがほぼすべてのサイトに実装されています。このような機能をつけるにはJavaScriptが必須です。

JavaScriptはホームページに動きをつけるプログラミング言語です。より高度なホームページを作るにはJavaScriptは必須です。下にJavaScript（jQuery)についてまとめた記事を挙げているので参考にして下さい。

Webページを自由に動かすならjQueryを使おう【初心者必見】
初心者でも簡単に高度なサイトが作れる！jQueryの基本を解説

JavaScriptはHTML/CSSに比べて難しいです。最初はHTML/CSSでサイトを作成し、運営していく中でJavaScriptを勉強することをおすすめします。ある程度コードが書けるようになったら、適用に挑戦してみてください。

まとめ

インターネットが発達してホームページを使った販売や販売促進活動なしでは売上を挙げることは難しくなっています。商品やサービスの情報を入手する方法もインターネットがメインになっています。つまり、ホームページを作成するスキルは今後も役に立ちます。

自社や自分のサービスのコスト削減ではなく、副業としてホームページ制作を請け負っている人も増えています。今後、自分にも返ってくるスキルになると思うので、HTMLは身に着けて損はありません。