物販

既存のデザインじゃ物足りない?HTMLを使った自分だけのホームページの作り方

自分でホームページを作成したいという方は、ホームページ作成の基礎となるHTMLの基礎について知っておくことで、自分だけのホームページを作成することができます。既存のデザインを利用したホームページでは、他のWebサイトと被ってしまうという可能性もありますよね。

この記事では、HTMLを使ったホームページの作り方を初心者にもわかりやすく解説します。この記事を読めば、ブログやネットショップなどのWebページをオリジナリティ溢れるページにすることができます。

ホームページの構成

検索すれば、誰もが閲覧することができる『ホームページ』ですが、『ホームページ』がどうやって作成されているか、知っていますか?

『ホームページ』は本のように、Webページという1枚ずつのページをリンクで繋ぐことで1つのWebサイトとなります。

例えば、企業のホームページなら、最初のページに「目玉商品や会社の売り」といった内容のページが閲覧できるようになっていて、サイト上部にあるメニューをクリックすれば、「会社概要」のページや「社長の挨拶」のページを見ることができます。その1つ1つのページをまとめたものがWebサイトとなります。

ホームページは、1つのWebページのみでも成り立ちます。この項目ではWebページについて解説します。

Webページとは?

ホームページを構成するWebページは、『静的ページ』と『動的ページ』に分けることができます。ページの中にクリックボタンがあったり、情報を入力すれば自動的処理が行われるのは動きのある『動的ページ』で、そのような動きのないページは『静的ページ』です。

ホームページは基本的に静的ページで構成されていて、ページの作成に用いられる言語(HTML・CSSなど)を書き込むことでどのように表示されるかが決まります。

ホームページをネットで閲覧できるようにするには、Webサーバーに保存されている言語ファイルをURL(ドメイン)を使って読み込む必要があるのです。

HTMLの基本

HTMLは「ハイパーテキスト・マークアップ・ランゲージ」の略で、テキストに「見出し」や「段落」などの様々な意味を持たせることができる言語です。

テキストで記述したコンテンツを、開始タグ<>と終了タグ</>で挟んだものを『要素』と呼び、で指定するタグの種類を変更することで指定する内容を変えることができます。また、一部のタグでは、終了タグを必要としないものもあります。

HTMLは基本的に半角英数字と記号で構成されていて、パソコンの「メモ帳機能」やダウンロードした「テキストエディタ」を使って記述することができ、記述したファイルは拡張子「.html」で保管しておけば、ブラウザで読み込むことが可能になります。

HTMLのタグ

HTMLのタグは「<開始タグ>テキスト</終了タグ>」という構成で、例えば「<title>HTMLの基礎を学ぼう!</title>」と記述した場合、“HTMLの基礎を学ぼう!”がページのタイトルとして指定さていることになります。

<>開始タグと</>終了タグは、必ず半角英数字で記述し、一部例外はありますが基本的にセットで使うことを覚えておきましょう。

どんなWebページでも『ページのソース(源という意味)』を確認すれば、そのページに記述されているHTMLを見ることができます。

ページのソースを確認する方法は、検索に使用しているブラウザによっても違いますが、例えばGoogleChromeの場合は、ページの余白部分を右クリックし『ページのソースを表示』をクリックすれば、文字がたくさん並んだHTMLを確認することが可能です。

タグに『属性』を加える

開始タグのの中に『属性』を書き加えることで、より細かく指示することができます。

例えば、<font color=”green”>このテキストの色はグリーンです</font>の場合「color=”○○”」が属性の部分です。

属性は通常の開始タグの後に半角スペースを入れ、その後に記述します。属性が指示する内容は「“”(ダブルクォーテーション)」で括る、と覚えておくと良いでしょう。

タグの種類によって使える属性は決まっているので、よく使うものはHTMLの記述に慣れていくうちに自然と覚えていきます。

HTMLを記述するのに必要な『テキストエディタ』

ここまで、HTMLが半角英数字やなどの記号を記述してWebページを作成するものだということは解説してきました。

では、実際にその言語をどこに書くのかと言えば、文字を入力したり保存することができる『テキストエディタ』を使っていきます。『テキストエディタ』とは、Windowsの『メモ帳』やMacの『テキストエディット』といったものが当たります。

それ以外にも、HTMLの編集に適した『HTMLエディタ』は、タグのスペルミスを防いだり記述したコードのプレヴューが見られるなどのサポート機能が備わっているので、Web制作者に利用されています。

無料で利用できるHTMLエディタには、『Visual Studio Code(ヴィジュアル・スタジオ・コード)』や『Sublime text(サブライム・テキスト)』、『Atom(アトム)』などがあり、初心者がコードを記述する際にもおすすめです。

自作のホームページは自由度が高い

HTMLを使ってWebページを作成するということは、慣れないうちはとても難しいことのように思うかもしれません。

しかし、HTMLのすべてのタグを丸暗記する必要はありませんし、タグの種類などは必要に応じて調べれば大丈夫です。HTMLの基本の形やよく使うタグは、コードを記述するうちに身についていきます。

HTMLを記述できるようになれば、既存のデザインには無いオリジナルのWebページを作成することが可能です。ホームページ作成ソフトに無いような自由度の高いページは、他のサイトとの差別化を図ることができます。

最初から1ページを作り上げようとするのではなく、Webページの部分ごとに1つずつ作成すれば、成功体験を積みながら楽しくホームページを作成することができるでしょう。

ホームページの作成と運用にかかる費用

オリジナル性の高いホームページを作成する方法としては、ホームページ制作会社に外注するという方法もあります。予算や納期、目的やターゲットなどを決めて依頼すれば、担当者がWeb制作を行います。

ホームページの発注で難しいのは、発注者と受注者で目指すホームページのイメージが共有しづらい点です。制作していく過程で浮き彫りになった要望を追加すれば、費用が発注時よりも大幅にかさむことも考えられます。

ホームページの制作料金の相場は、テンプレートを使ったページで5万~10万円、オーダーメイドでの依頼は30万円程度です。さらにホームページの運用に月々1万円といった費用が掛かります。

これに対して、自分でホームページの作成・運用を行った場合にかかる費用は、サーバーのレンタル代とドメイン取得にかかる費用が1年で数百円~数千円程度なので、ホームページ運用の予算を1万円以下に抑えることが可能になります。

ホームページの表示速度

自分でHTMLを書きホームページを作成するメリットとして、ホームページの表示速度が速いことが挙げられます。テキストエディタで作成されたページはユーザーのリクエストに対してそのまま表示されるので、ページの表示がスムーズに行われる仕組みになっています。

これに対し、『WordPress(ワードプレス)』や『Jimdo(ジンドゥー)』などのコンテンツ管理システムを利用したサイトはユーザーのリクエストに対して、データベースからサイトのデータを読み込んだ後にユーザーのブラウザに表示されるという仕組みになっているため、表示速度が遅くなってしまうのです。

ちょっとした興味で見てみようと思ったサイトが数秒経っても読み込まれないとき、あなたならどうしますか?いくら素晴らしいページでも表示速度が遅ければ、ユーザーはそのページを見ることなく離脱してしまいます。

Webページがスムーズに表示されることは、GoogleのSEOで評価項目としても知られているように、重要視されていますが、テキストエディタで作成していれば問題ありません。

データのバックアップ

自分が作り上げたホームページのデータは自分の資産になりうるもので、そのデータをバックアップしておくことは大切なことです。例えば、サーバーが故障した際にバックアップデータがなければ、消えたホームページのデータは取り戻せません。

自分でテキストエディタを使ってHTMLを記述した場合は、そのHTMLデータをそのままサーバーにアップしているので、自分のパソコンの中のHTMLが自ずとバックアップされたファイルとなります。

それに対して、コンテンツ管理システムを利用したホームページのデータは、ネット上で一元管理されているため初心者がバックアップを取ったり、実際にデータが消えてしまった場合にデータを復元することはかなり難易度が高いです。

データを資産として取り扱うという視点から見ても、自分でホームページを作成することは有利な結果をもたらします

HTMLコードの記述方法

ホームページの作り方は、HTMLのコードを書き込む作業です。ここでは、Windowsの『メモ帳』を使って実際にHTMLを記述する方法を手順を追って解説していきます。

HTMLの記述方法はどのテキストエディタを利用しても同じですから、まずはHTMLの基礎を理解することが大切です。自分でホームページを作成する際は、好きなHTMLエディタを利用することをお勧めします。

Webページの基本構造をイメージしよう

メモ帳を開く前に、Webページの基本構造をイメージしておきましょう。Webページは、大きく4つの項目に分けることができます。

HTMLのコードを書き込む際に、自分がWebページのどの部分を作っているのかを知っておくことで、記述すべき内容が明確になります。

Webページの上部は『ヘッダー』といって、ナビゲーションメニューやロゴなどサイト内のすべてのページで共通する部分です。その下に『コンテンツ』と呼ばれる本文を書く部分があります。

そして、コンテンツの横にはヘッダー以外の共通コンテンツを配置できる『サイドバー』があり、Webページの最下部にはページリンクやコピーライトを配置するための『フッター』部分があります。

メモ帳を開き『基本構造』を記述しよう

Windowsの『アクセサリ』の中にある『メモ帳』を開き、HTMLを記述する際必ず使う『基本構造』を書いていきましょう。

基本的なタグとタグが持つ意味は下記の通りです。<>の付いた半角英数字・記号で記述されている箇所のみをメモ帳に入力してください。

<!DOCTYPE html>…HTMLのバージョンが『HTML5』であることを表す宣言
<html lang="ja">…HTMLの文書を日本語で表示
<head>…ヘッダー部分
<meta charset="UTF-8">…プロパティの値と文字コード
<title>ここにタイトルを書きます</title>
</head>
<body>ここに本文を書きます。</body>
</html>

このように、HTMLを書くときは『文書に関する情報』の中に『コンテンツで表示する情報』を入力する必要があります。

HTMLのファイルを保存

HTMLの基本構造を記述したメモ帳をHTMLのファイルとして保存します。

『ファイル』から『名前を付けて保存』を選び、ファイル名を入力します。この時、拡張子を必ず『○○.html』にしてファイルを保存しましょう。○○の部分は、自分がわかりやすい名前でOKです。

拡張子は、ファイルの種類を表す印のような役割を持っています。拡張子を『.html』にすることで、そのファイルがホームページのファイルだということを示してします。

また、デフォルトの設定だと文字コードは「ANSI」になっていますが、このままブラウザで表示すると文字化けが発生するので、必ず『UTF-8』に設定しましょう。

ブラウザで見てみよう

先ほどメモ帳に書き込んだ、HTMLがどのように表示されるかを『InternetExplorer』や『Chrome』などのブラウザで確認することができます。

確認する方法は、ブラウザを起動して『ファイル』メニューから保存したHTMLのファイルを開くだけです。

ブラウザの左上部のタブ部分が、<title></title>に入力したテキスト「ここにタイトルを書きます」となっていて、ウインドウ内にの中に入力した内容「ここに本文を書きます。」の文字が表示されていれば成功です。

ホームページの内容を更新したい時は、まず、メモ帳で更新したいHTMLファイルを開いて本文に変更を加えます。

ブラウザに戻ってページの再読み込み、または「F5キー」を押します。そうすれば変更した内容が反映されていることが確認できます。

他のWebサイトのソースを参考にする

Webサイトでは、プロが制作したページがたくさん閲覧できます。良いなと思うページを見つけたら、そのページがどのような記述で作られているか確認することができます。

ソースを表示する方法はブラウザによって多少異なりますが、ここでは代表的なブラウザである『Chrome』や『Firefox』での方法について解説します。

まず、表示しているホームページの余白部分で右クリックし『ページのソースを表示』をクリックしてください。

すると、新しいタブが開き、ソースファイルを確認することができます。

参考にしたいWebサイトのソースを確認したら、Windowsのメモ帳に追加したいコードを書き込み、『上書き保存』します。

ブラウザに戻ってページの再読み込み、または「F5キー」を押してページを更新すれば、コードを追加した後のページが表示されます。

様々なWebページを参考にして、自分だけのホームページを作成しましょう。

テキストのスタイルを変更したいときは『CSS』

HTMLでも文字色を変更することは可能ですが、HTMLは基本的にテキストの構造を指定する言語であるため、文字の装飾を施したいときは『CSS』を使うことを覚えておきましょう。

見た目を整える役割を担う『CSS』は、カスケーディング・スタイル・シートといって、Webページのレイアウトを整えたり、サイズの調整・色の表示スタイルやアニメーションを加えることが可能です。

HTMLとは別の『CSS』ファイルで記述し、ファイルを保存する際の拡張子は『.css』とします。HTMLファイルに、CSSファイルを読み込むことを記述すれば『HTML』と『CSS』を合わせたオシャレなページを作ることができます。

CSSは下記のように記述します。HTMLと違ってセットで使うタグはありません。

【記述例】

  • h1{color: #ff0000;}…見出しの文字を赤色にする
  • img{border: 3px dotted #00ff00;}…画像の枠線を緑で付ける

HTMLのコーディングによく使われるタグとHTMLの習得方法

この項目ではHTMLのコーディングによく使われるタグにはどのようなものがあるかを紹介します。また、HTMLは覚えるのが大変そう……と思っている方のために、HTMLを習得する方法を解説します。

HTMLでよく使うタグ

HTMLの基本構造の他にコンテンツ内、つまりの中でよく使うタグを紹介します。

  • <h1></h1>…見出し(h1~h6まであります)
  • <p></p>…段落
  • <a></a>…リンクの出発点や到達点
  • <img>…画像(終了タグ無し)
  • <ul></ul>…順番のない箇条書きリスト
  • <li></li>…リストの項目を表示
  • <br>…改行(終了タグ無し)

丸暗記するより慣れた方が早い

ホームページを作るうえで必要なHTMLのタグの種類はたくさんあるので、すべてを丸暗記しようとするのは無駄な努力に終わるでしょう。

コーディングに使う言語は、英語などと同じで難しい文法などを覚えようとしなくても、親しんでいくうちに使い方が身についてくるものです。

先ほど紹介したよく使うタグは、Webページを何度か作っていくうちに覚えてきます。そして、覚えていないタグはネットで検索すれば『HTMLタグ辞典』などでいくらでも調べることが可能です。

イチからHTMLを学びたいという人は、HTMLを学習できる無料サイトもありますので利用してみても良いでしょう。

まとめ

自分でできるホームページの作り方には、無料のコンテンツ管理システムを利用して作る方法と自分でHTMLなどのコーディングを行って作成する方法がありました。既存のデザインでは物足りなさを感じる人はぜひ、自分でWebページを作ってみましょう。

コーディングが苦手な人には、コードを書かずに自分のWebページを作ることができるツールもあるので、そちらを検討することをお勧めします。

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


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

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

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

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