HTMLのホームページは30分で作れる!5つの手順でわかる簡単な作り方

ホームページ、今やどんな企業でもお店でもあるのが当たり前になってきましたね。
最近ではHTMLというホームページ作りに必須の言語も必要なく、簡単に作れるようになってきました。

そんなHTMLを使ったホームページの作り方、気になりませんか?

こんにちは!個人でも仕事でもホームページを作りまくってるライターのナナミです。

企業やお店でも必須となってきているホームページ。そんなホームページを作ってくれるサービスなども増えてきましたね。特に最近はHTMLを使わなくても作れるサービスなどもあるので、気軽にホームページが作れる世の中になりました。

とはいえ依頼するのはお金もかかるし、自分で作りたい…
サービスだと自由に作れないから、もっと自由に作りたい!

という気持ちをお持ちの方が、今この記事をご覧になっていると思います。

そんなみなさまのお役に立てるよう、HTMLでのホームページの作り方を徹底解説! 

  • ホームページ作りの流れ
  • 必要なツール
  • 具体的な作り方

などなど、押さえておきたい基本をバッチリご紹介します。

実はHTMLは超簡単、なんと30分あればホームページは作れちゃうんです。この記事であなたのホームページ作成のハードルがグッと下がれば幸いです。

HTMLでのホームページ作成の流れを確認しよう

最初に作成の流れをサクッと確認してしまいましょう。イメージしやすいように、料理に例えてご紹介しますね!

カッコで書いてあるのは使う言語や専門用語なので気にしなくてOK。この段階では難しいことは考えず、「あー、こんな感じで作るのね」くらいのイメージでいましょう。

この流れを見ると、結構簡単に思えませんか?実際とても簡単なので、早速上から順にやってみましょう!

HTMLを書くためのツールを用意しよう

料理もホームページ作りも、まずは作る準備が肝心。包丁やまな板を用意するように、ホームページ作りのための道具を用意しましょう。

HTMLでのホームページ作りで必要なのは、下記の2つのツールです。

  • GoogleChrome
  • テキストエディタ

「え?これだけ?」と思った人もいると思います。本当にこれだけです。

見慣れないのはテキストエディタくらいですね。テキストエディタとは、パソコンで文字を書くツールのことです。メモ帳とかそいうやつですね。

その中でも、ホームページ作りに便利なものを用意するのがポイント。下記のエディタは無料なのに超便利に使えるのでおすすめです。

Atom

まずはこれをダウンロードして、準備を整えましょう!

ちなみにこちら、細かい設定も色々できるのですが、今回は何もしなくてもOKです。もっと使いやすくしたい方は、下記の記事などを参考にしてみてくださいね。

【基礎をおさえよう!】Atomエディタまとめ
更新日 : 2019年7月9日

簡単なページを30分で作ってみよう

道具が用意できたら、今度は材料の用意ですね。ここが今回のメイン、HTMLを使う部分になります。

今回はお試しということで、初心者でも30分で作れるレシピをご用意しました。

AtomでNewFileを選んで…

こんな感じの画面を用意したら、早速作っていきましょう!

基本となるコードを書こう(所要時間:5分)

まずは下のコードをコピー&ペーストしてみましょう。

<!DOCTYPE html><!-- このファイルはHTMLですという宣言 -->
<html><!-- ここからHTMLが始まりますというタグ -->
<head><!-- ここから裏の設定ですよという宣言 -->
	<meta charset="utf-8"><!-- 文字化け防止の記述 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- ややこしいので無視してOK -->
	<title>30分で作るホームページ</title><!-- ページのタイトルを入れます -->
</head><!-- ここまでがうらの設定ですよという宣言 -->
<body><!-- ここからページに表示される内容ですよという宣言 -->
	
</body><!-- ここまでがページに表示される内容ですよという宣言 -->
</html><!-- ここまでがHTMLですという終わりの宣言 -->

※<!-- 〜 -->の内容は細かい解説なので見ても見なくてもOK

これがHTMLの基本の基本、土台となる記述です。どんなホームページを作るときにも、このコードは必ず使います。つまり主食ですね、米とか食パンとかです。

ここで覚えておきたいのは、こういう記述を必ず使うということだけです。一つ一つの意味などは今は覚える必要はありません。サクッと次に行っちゃいましょう。

見出しと本文を書こう(所要時間:5分)

先ほどの状態では、画面上に表示するものがありません。何にもおかずがない状態です。

ということで、メイン食材を用意していきましょう。今日のメイン食材は「見出し」と「本文」です。

下記のコードを、〜の間にコピペしましょう。

<h1>30分で作るホームページ</h1><!-- 見出し -->
<p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p><!-- 本文 -->

下記のようになればOKです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>30分で作るホームページ</title>
</head>
<body>
	<h1>30分で作るホームページ</h1>
	<p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p>
</body>
</html>

どんな状態か確認してみよう(所要時間:10分)

メイン食材が入ったところで、今どんな感じなのかちょっと気になりますよね。

確認するために、一度保存をして確認してみましょう。

Atomの「file」を選んで、「save」をクリックすると、保存のための画面が出てきます。

ここでファイル名を付けるのですが、ポイントが2つあります。

  • 必ず半角英数字にする
  • 必ず「ファイル名.html」のように、一番後ろに「.html」を入れる

こうしないとバグが起きたり、パソコンが「これはHTMLなんだな」と認識しなかったりしてしまうので要注意です。

保存場所はどこでもOK。自分がわかりやすいところに保存しましょう。

今回は「test.html」を「デスクトップ」に保存してみました。

これをGoogleChromeのアイコンにドラッグ&ドロップして開いてみると…

こんな感じで、先ほど入力した見出しと本文が表示されます。

画像やリンクを入れてみよう(所要時間:5分)

先ほどみた感じだと、ちょっとまだまだ材料が足りない感じがしますね。追加の材料として、画像とリンクを入れてみましょう。

画像は下記を用意したので、右クリックで先ほど保存したHTMLファイルと同じ場所に「test.jpg」という名前で保存しましょう。

あとは下記のコードを本文の下にコピペすればOKです。

<img src="test.ipg" alt=""><!-- 画像を表示 -->
<a href="https://www.sejuku.net/blog/">解説していたブログはこちら</a><!-- リンクを表示 -->

全体的に下記のようになれば、今回の材料の準備はOKです!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>30分で作るホームページ</title>
</head>
<body>
	<h1>30分で作るホームページ</h1>
	<p>初心者でも30分でホームページは作れます。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう</p>
	<img src="test.ipg" alt="">
	<a href="https://www.sejuku.net/blog/">解説していたブログはこちら</a>
</body>
</html>

ここまでできたら、もう一度保存をしておいてくださいね。

見た目を綺麗にしてみよう(所要時間:5分)

今の状態を先ほどと同じようにGoogleChromeで見てみると…

うん、素材そのままって感じですね。

料理もホームページ作りも、素材だけでなく味付けも大事。最後に美味しくなるような味付けをしましょう!

その味付けに使うのが、CSSというものです。詳細は後ほど説明しますね。

今回は合わせ調味料的な感じで、CSSも丸っと用意しちゃいました。下記のコードをtitleタグの下に貼り付けましょう。

<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(Hyper Text Markup Language)とは、ホームページの内容を書くためのマークアップ言語という種類の言語です。

みなさんがいつも見ているホームページ、文字や画像がたくさん表示されますよね。あれらを設定しているのがHTMLです。

詳しくは下記の記事で解説しているので、こちらも参考にしてみてください。

HTMLとは?初心者でも10分で理解出来る知っておくべき基礎知識
更新日 : 2019年5月9日

つまりホームページ作成には必要不可欠な言語、しっかり覚えておく必要が…

ありません。

HTMLは暗記しなくていいんです。

料理をするとき、レシピを全部完璧に覚える必要はありませんよね。確認したいときは検索したり、レシピ本を見ればいいからです。

それと同じように、HTMLもわからなくなったら検索したりすればOK。丸暗記の必要は一切ありません。

「調べ方」と「なんとなくこんなことできた気がする」くらいを覚えておけば、HTMLを書くのに困ることはありません。

超おしゃれなホームページにするには?

先ほど30分で作ったページ、途中までは全然おしゃれではない状態でしたよね。

HTMLは見た目を整えるという目的で使うものではないからです。

HTMLの役割は「この部分はこういう内容だよ」というのを、GoogleなどのAIロボットに教えてあげることです。ただの文字だけ並んでいるだけでは、どれが見出しでどれが本文がわからないので、HTMLのタグを使って分類してあげてるだけなんです。

とはいえ人間からしたらおしゃれなホームページを作りたいもの。ということで調味料、CSSが出てくるわけですね。

CSS(Cascading Style Sheets)とはHTMLで記述した内容をどのような見た目で表示するかを設定する、スタイルシート言語というものです。

このCSSを書くことで、HTMLだけでは味気ないページもおしゃれに彩ることができます。

CSSについてもっと詳しく知りたい!という方は、下記の記事も併せて読んでみてくださいね。

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年7月11日

できあがったホームページを公開しよう

ここまでわかればHTMLを使ったホームページ作りはほぼ完璧と言っても過言ではありません。

しかし、このままではそのホームページはあなたしか見れない状態です。たくさんの人に見てもらうには、ネット上に公開する必要があります。

そのために必要なのが、作ったホームページの置き場であるサーバーです。

サーバーの用意は自作やレンタルなど色々あるのですが、基本的にレンタル一択だと思ってOKです。

お皿を1から作るとなると、粘土を捏ねてろくろを回して…と難易度が高いですよね。それをするなら買っちゃった方が早いし綺麗で楽チンです。

それと同じように、サーバーもレンタルしちゃう方が楽な上に、費用もそこまで高くはありません。「レンタルサーバー 安い」とかで検索してみると色々出てくるので、比較してみてくださいね。

HTMLを使ったホームページは誰にでも作れる

今回ご紹介したように、HTMLを使ったホームページの作り方はそんなに難しくはありません。30分あれば大まかな仕組みもすぐにわかってしまいます。

これをきっかけに、ぜひHTMLを楽しく学んでいただければ幸いです。

とはいえひとりでの学習は自信がない…
具体的にどんなことを覚えればいいのかイメージできない…

という方は、侍エンジニア塾の無料体験レッスンで相談してみませんか?

  • あなたが作りたいホームページのために必要なスキルは?
  • そのスキルを手に入れるための勉強方法は?

などなど、あなたの疑問にプロのコンサルタントがお答えします!

申し込みは下記から希望の日時を選んで、必要項目を入力するだけ。ぜひお気軽にお申し込みください!

まとめ:まずは手を動かすことが大事

ホームページ作成で大事なのは、難しいことは考えずまずは手を動かすことです。レシピを眺めていても料理が上達しないように、細々したことを考えても始まりません。

最初は真似するだけでOK。やってみると意外に簡単なことに気づけると思います。

そこからもっとレベルアップしたり、複雑なホームページを作りたいと思ったらしっかり勉強してみてください。

今回の記事で、ホームページ作りの面白さに気づいていただければ幸いです!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説