物販

HTMLでホームページを作成する方法!初心者に分かりやすく解説

CMSや無料ホームページ作成サービスのような簡単にホームページを作れるサービスを利用すれば、簡単にホームページは作成出来ます。しかし、ホームページ作成に興味がある方の中にはHTMLを使ってホームページを作ってみたいと考えた事がある方は多い事でしょう。

今回は、HTMLでホームページを作成する方法をお伝えします。WordPressのようなCMSやホームページ作成サービスで作った事があるという方も、HTMLについて詳しくなればカスタム出来るようになりますので最後までご覧下さい。

どうやってHTMLでホームページを作成するの?

HTMLでホームページを作成する流れを確認していきましょう。どのような流れを辿るのかを事前に確認しておく事で、ホームページを作成する方法が見えてきます。

Google ChromeとテキストエディタがあればHTMLは書ける!

HTMLを書く時に必要となるものは2つだけです。Google Chromeとテキストエディタの2つだけなので、準備自体は簡単です。

Google Chromeはインターネットを見るためのブラウザ、テキストエディタはHTMLのようなプログラミング言語を書く際に使われるソフトです。

まずはHTMLのファイルを作成しよう

あなたが分かりやすい場所に新規フォルダを作って下さい。新規フォルダの作成方法は、デスクトップで右クリックを押して新規作成です。

フォルダ名を分かりやすい半角英数字で指定して下さい。例えば、「hp」のような感じです。

作ったフォルダをダブルクリックして、右クリック、新規作成、テキストドキュメントを選択して下さい。保存する際のファイル名は必ず「index.html」にして下さい。拡張子は変更すると警告が出てしまいます。しかし、それは気にしなくて大丈夫です。

index.htmlという名前は非常に重要なので間違えないように気をつけて下さい。

実際にタグを使ってHTMLを作成してみよう

HTMLを作成する方法を覚える際に有効な手段として、実際にタグを使った文書を作成してみるというのがあります。下記の文書をhtmlファイルとして保存してみましょう。

HTML

どのようにページが表示されるかというと、下記のとおりになりますので確認してみてください。。

HTMLのデータをアップロードするにはFTPソフトを使用しよう

HTMLを書いたら、ファイルをサーバーにアップロードします。FTPソフトを使用する事で可能になります。

FTPソフトを起動してアップロードするファイルを選択します。データをアップロードし、アドレスを入力してブラウザで表示してみましょう。問題なく表示されたら完了です。

HTMLを使って簡単なページを作成する方法

HTMLを使って簡単なページを実際に作成してみましょう。

土台となるHTMLのコードを書く

下記のHTMLを実際に書いてみましょう。

<!– ●● –>の中の●●に記載している内容は、そのタグがどういう意味を持っているかの解説です。このコードは、どんなホームページを作成する際にも使います。今回は、なんとなくの理解度で大丈夫ですので、次に進みましょう。

メインとなる部分を作成しよう

上記の状態は土台となる部分のみなので、内容がありません。下記のコードが内容になります。

こちらを適切な場所に入力しましょう。下記のコードと同じようになるように入力して下さい。

ブラウザで表示してみよう

現在の状態をブラウザで確認してみましょう。まず、データを保存します。ファイル名をつける際には、ひらがな等の全角を使わずに英数字等の半角を使用しましょう。

拡張子は「.html」にして下さい。例えば、「data.html」のような感じです。名前部分は分かれば大丈夫です。

Google Chrome等のブラウザにドラッグアンドドロップすると、下記のように表示されます。

HTMLで画像とリンクを挿入する方法

テキストだけだとホームページは味気ない物になってしまいます。画像を挿入する事でホームページが華やかになり、リンクを挿入すると便利になります。

画像をホームページに入れてみましょう。下記の画像を「test.jpg」という名前で保存して下さい。右クリックで保存します。保存場所は、HTMLファイルと同じ場所にしましょう。

保存が完了したら、下記のHTMLコードを本文の下に入力してみましょう。

入力する場所は下記になります。

入力が完了したら保存するのを忘れないようにしましょう。

レンタルサーバーを借りてホームページを公開する

ブラウザに入力して見れる状態は、あなたのパソコンからは見れますが、ネット上にあるわけではありません。レンタルサーバーを借りてそこにアップロードする事でみんなに見てもらえるようになります。

おしゃれなホームページはどうやって作成する?

HTMLだけで作成したホームページは、見ていただいて分かる通りシンプルで見栄えのする物ではありません。HTMLは、クローラーにどういうホームページかを伝えています。

人間の目から見て、どう見えるかというのはまた別の話です。見栄えのするホームページを作成したい場合は、CSSを組み合わせましょう。

おしゃれなホームページを作成するならCSSは必須

CSSは、Cascading Style Sheetsの略で、カスケーディング・スタイル・シートと読みます。HTMLで作成したホームページにスタイルを指定する役割を持っています。具体的には、背景色や余白、文字色等を指定出来るようになります。

CSSでスタイルを変更しても装飾されるだけで、ホームページの内容や文章等の構造自体は変更されないので安心して下さい。CSSはメディアごとにスタイルを指定出来ます。

印刷する際のスタイルや、音声再生の際のスタイルも指定出来るのでイメージ通りのホームページを作成出来るようになります。

CSSで見た目を美しくする

Google Chromeで現在のファイルを表示させて見てみましょう。

まだシンプルな状態ですが、ここに下記のCSSを追記します。

<style>
h1 {
font-weight: normal;
padding-bottom: 10px;
text-align: center;
position: relative;
margin: 0 0 30px 0;
letter-spacing: 5px;
}

p {
width: 50%;
line-height: 2;
display: inline-block;
background-color: #03A9F4;
padding: 20px;
position: relative;
z-index: 999;
margin: 50px 0 0;
color: #fff;
letter-spacing: 2px;
}

a {
color: #fff;
text-decoration: none;
background-color: #F44336;
display: block;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 0 0 #9e2b23;
font-weight: bold;
width: 300px;
text-align: center;
margin: 110px auto 0;
letter-spacing: 2px;
}

h1::after {
content: ;
display: block;
border-bottom: solid 5px #2196F3;
position: absolute;
width: 100px;
right: 0;
left: 0;
margin: auto;
bottom: -5px;
}

html {
background-color: #a8e4ff;
}

body {
background-color: #fff;
padding: 30px 30px 30px;
max-width: 700px;
margin: 20px auto;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.18);
border-radius: 3px;
position: relative;
}

img {
height: 300px;
display: inline-block;
vertical-align: top;
position: absolute;
right: 30px;
}
</style>

書き終わったら保存をして下さい。このファイルをブラウザで表示させてみると下記のようになります。

かなり見た目が変わりました。HTMLとCSSを組み合わせる事で、見栄えのするホームページが作成出来ます。どのように組み合わせるかによってかなり見た目が変わるので、普段何気なく見ているホームページも、自分だったらどうするかという視点で見ましょう。

基本的なHTMLタグの書き方

HTMLのようなプログラミング言語は、基本的には上から下方向に向かって読み込まれていきます。<html>から始まり、最後は</html>で終わります。

<head>タグも同様に、<head>で始まって</head>で終わります。間に文書のタイトルや情報を記載します。

<title></title>の間に書いた文章以外はホームページに表示されません。<meta・・・>タグは省略する事も出来ます。

ホームページのタイトルは、<title></title>の間に記載します。画像の左上に表示されています。ブックマークをするとデフォルトでこのタイトルが表示されます。

<body></body>タグの間に書いた事がホームページの画面に表示されます。また、<!- -●●- ->の中の●●に書いた文章はコメント扱いとなり、ホームページには表示されません。注意書き等に使います。

HTMLで見出しを書く方法

見出しは、<>の中の数字が小さい方が大きな見出しとなります。<h1></h1>が大見出しとなっていて、<h2></h2>はh1よりも小さい見出しとなります。

見出しはh1からh6まであって、数字が大きいほうが小さい見出しとなるので文字のサイズが小さくなります。

h1は1回だけ使う大見出し、それ以降はh2以下を使用しましょう。小見出しは、数字が小さい見出しの下に1つ数字が大きい物を使います。

他のタグと同様に、見出しのタグにも終了タグは必要です。

HTMLで本文を書く方法

<p></p>タグを使って本文を書きます。<p>と</p>の間に本文を記載していきます。<p></p>タグの上下には1行ずつ自動的に余白が出来ます。

HTMLで改行をする方法

改行は<br>タグで行います。<br>タグには終了タグがありません。改行したい所に入力すればOKです。

HTMLでリンクを貼る方法

HTMLでリンクを貼る方法をご紹介します。

<a href=”URLを入力”>文字</a>

というようになります。<a href=” ●● “>の●●にURLを入力して下さい。

その後の>●●</a>の●●にホームページで表示する文字を入力して下さい。こうする事で、ホームページ上で指定した文字をクリックするとリンク先に飛べるようになります。

このままだと同じタブでリンク先が表示されます。別のタブでリンク先を開きたい場合は、targetと_blank を使います。下記のように書きます。

<a href=”URLを入力” target=”_blank”>文字</a>

targetの前と、aとhrefの間に半角で空白を入れる事を忘れないで下さい。リンク先にはサイトだけではなく、画像も指定出来ます。

targetを指定しなければ、同じタブで表示されます。target=”_self” と入力した場合も結果は同じです。

新規タブで開きたい場合は、target=”_blank” と入力して下さい。あまり使う事はありませんが、target=”_parent”と入力すると、親ウインドウが開きます。

画像をクリックしてリンクを開きたい場合は、

<a href=”URL” target=”_blank”><img src=”画像のファイル名” alt=”どんな画像かを記載”></a>

と入力します。

URLの所にはリンク先のURL、画像のファイルの所には指定された場所に置いた画像のファイル名、どんな画像かを記載と書いている場所には、メタ情報としてどんな画像なのかを記載します。画像にリンクを設定すると、画像を縁取るように枠線が表示されます。

不要な場合は、alt=の後ろにborder=0 を付け足しましょう。スタイルシートでは、img { border-width:0}となります。

HTMLで枠を表示する方法

HTMLで枠を表示するには、<table>と<tr>と<td>を使います。

基本的な使い方は下記のようになります。border=1 と記載する事で、枠の線を表示出来ます。

<tr>を使うと、枠が縦に並びます。<td>を使うと、枠が横に並びます。枠を縦に並べる時は、下記のように書きます。

枠を横に並べる時は、下記のように書きます。

色々な効果を与えられる<div> タグ

<div>を使うと、余白を指定したり右揃え等のような効果を付与する事が可能になります。文章全体を右寄せにしたい時は下記のように書きます。

表示したい文字の部分が右寄せで表示されます。<div>はスタイルシートを使用出来るので、余白の指定も可能です。下記のように指定すれば、上下左右に余白を作れます。

style=padding:30pxの部分の数字で余白の広さを調節出来ます。

styleはスタイルシートという意味です。スタイルシートを使って細かい空白を入れたい場合は下記のように書きます。 は、全角空白という意味です。

<div>は、ホームページを作成する上で重要になタグなので必ず覚えましょう。空白や余白の使い方で見栄えが違ってきます。

<div> との違いは改行が入らない事!<span>タグ

<span> は、<div>と同じように使えます。違いは、<span> は、前後に改行が入らないという事だけです。

例えば、下記のように

と入力しても、途中で改行されません。<div>の場合は、改行が入ってしまいます。

途中で改行が入らない事を利用して、下記のように文章の一部に黄色い強調線を入られます。

HTMLでリスト表示させる方法

HTMLでリスト表示させたい場合は、<ul>か<ol>と、<li> を組み合わせて使います。

<ul>を使うと文頭に中黒が自動的に表示され、<ol>を使うと数字が順番に表示されます。<li>の使い方は共通です。それぞれ、下記のように書きます。

<li>は、単独でも表示出来ますが、<ul>か<ol>で囲って使うルールなのでそうして下さい。

まとめ

HTMLを使ってホームページを作成する方法を学んでいく中で、時に分かりにくく挫折してしまいそうな時もあります。しかし、一つ一つの事はシンプルなので諦めずに噛み砕いて勉強してみて下さい。

WordPressやホームページ作成サービスを使用する場合にも、HTMLやCSSの知識があると細かい部分をいじれる事もあります。ホームページを各自が持つ時代です。しっかり理解して活かしていきましょう。

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


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

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

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

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