ホームページ、今やどんな企業でもお店でもあるのが当たり前になってきましたね。
最近ではHTMLというホームページ作りに必須の言語も必要なく、簡単に作れるようになってきました。
そんなHTMLを使ったホームページの作り方、気になりませんか？
こんにちは！個人でも仕事でもホームページを作りまくってるライターのナナミです。
企業やお店でも必須となってきているホームページ。そんなホームページを作ってくれるサービスなども増えてきましたね。特に最近はHTMLを使わなくても作れるサービスなどもあるので、気軽にホームページが作れる世の中になりました。
サービスだと自由に作れないから、もっと自由に作りたい！
という気持ちをお持ちの方が、今この記事をご覧になっていると思います。
そんなみなさまのお役に立てるよう、HTMLでのホームページの作り方を徹底解説！
- ホームページ作りの流れ
- 必要なツール
- 具体的な作り方
などなど、押さえておきたい基本をバッチリご紹介します。
実はHTMLは超簡単、なんと30分あればホームページは作れちゃうんです。この記事であなたのホームページ作成のハードルがグッと下がれば幸いです。
なお、次の記事ではそもそもHTMLとは何なのか、その特徴やできることを詳しく解説しているので良ければ参考にしてください。
→ HTMLとは？基本のタグやできることを初心者向けにわかりやすく解説
この記事の目次
HTMLでのホームページ作成の流れを確認しよう
最初に作成の流れをサクッと確認してしまいましょう。イメージしやすいように、料理に例えてご紹介しますね！
カッコで書いてあるのは使う言語や専門用語なので気にしなくてOK。この段階では難しいことは考えず、「あー、こんな感じで作るのね」くらいのイメージでいましょう。
この流れを見ると、結構簡単に思えませんか？実際とても簡単なので、早速上から順にやってみましょう！
HTMLを書くためのツールを用意しよう
料理もホームページ作りも、まずは作る準備が肝心。包丁やまな板を用意するように、ホームページ作りのための道具を用意しましょう。
HTMLでのホームページ作りで必要なのは、下記の2つのツールです。
- GoogleChrome
- テキストエディタ
「え？これだけ？」と思った人もいると思います。本当にこれだけです。
見慣れないのはテキストエディタくらいですね。テキストエディタとは、パソコンで文字を書くツールのことです。メモ帳とかそいうやつですね。
その中でも、ホームページ作りに便利なものを用意するのがポイント。下記のエディタ「Atom」は無料なのに超便利に使えるのでおすすめです。
まずはこれをダウンロードして、準備を整えましょう！
ちなみにこちら、細かい設定も色々できるのですが、今回は何もしなくてもOKです。もっと使いやすくしたい方は、下記の記事などを参考にしてみてくださいね。
簡単なページを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.jpg" 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.jpg" 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（Hyper Text Markup Language）とは、ホームページの内容を書くためのマークアップ言語という種類の言語です。
あなたがいつも見ているホームページ、文字や画像がたくさん表示されますよね。あれらを設定しているのがHTMLです。
詳しくは下記の記事で解説しているので、こちらも参考にしてみてください。
つまりホームページ作成には必要不可欠な言語、しっかり覚えておく必要が…
ありません。
HTMLは暗記しなくていいんです。
料理をするとき、レシピを全部完璧に覚える必要はありませんよね。確認したいときは検索したり、レシピ本を見ればいいからです。
それと同じように、HTMLもわからなくなったら検索したりすればOK。丸暗記の必要は一切ありません。
「調べ方」と「なんとなくこんなことできた気がする」くらいを覚えておけば、HTMLを書くのに困ることはありません。
超おしゃれなホームページにするには？
先ほど30分で作ったページ、途中までは全然おしゃれではない状態でしたよね。
HTMLは見た目を整えるという目的で使うものではないからです。
HTMLの役割は「この部分はこういう内容だよ」というのを、GoogleなどのAIロボットに教えてあげることです。ただの文字だけ並んでいるだけでは、どれが見出しでどれが本文がわからないので、HTMLのタグを使って分類してあげてるだけなんです。
とはいえ人間からしたらおしゃれなホームページを作りたいもの。ということで調味料、CSSが出てくるわけですね。
CSS（Cascading Style Sheets）とはHTMLで記述した内容をどのような見た目で表示するかを設定する、スタイルシート言語というものです。
このCSSを書くことで、HTMLだけでは味気ないページもおしゃれに彩ることができます。
CSSについてもっと詳しく知りたい！という方は、下記の記事も併せて読んでみてくださいね。
できあがったホームページを公開しよう
ここまでわかればHTMLを使ったホームページ作りはほぼ完璧と言っても過言ではありません。
しかし、このままではそのホームページはあなたしか見れない状態です。たくさんの人に見てもらうには、ネット上に公開する必要があります。
そのために必要なのが、作ったホームページの置き場であるサーバーです。
サーバーの用意は自作やレンタルなど色々あるのですが、基本的にレンタル一択だと思ってOKです。
お皿を1から作るとなると、粘土を捏ねてろくろを回して…と難易度が高いですよね。それをするなら買っちゃった方が早いし綺麗で楽チンです。
それと同じように、サーバーもレンタルしちゃう方が楽な上に、費用もそこまで高くはありません。「レンタルサーバー 安い」とかで検索してみると色々出てくるので、比較してみてくださいね。
挫折なくホームページの作成スキルを習得するなら
ここまで解説してきたように、ホームページ作成にはプログラミングスキルが必要不可欠です。ただ、なかには
途中で挫折したらどうしよう...
と不安な方もいますよね。
いまでは無料で利用できる学習サイトやWebサービスもあるため、お金をかけなくても独学でホームページの作成スキルやプログラミング言語の習得が可能です。
ただ、手軽に学べるようになった反面いざ勉強を始めると、学習途中に挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%の独学者が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、多くの無料学習サイトやWebサービスには不明点を質問・相談できる機能がありません。
こうした背景もあってか、プログラミング学習サイトの活用経験者100名に「再度学習サイトで学ぶと仮定した際、利用したいと考える学習サイト」を聞いたところ、50%が「不明点を質問・相談できる学習サイト」と回答しています。
調査概要：プログラミング学習サイトの活用経験がある人への意識調査
調査期間：2022/9/9~2022/9/19
対象者：プログラミング学習サイトを活用した経験がある10~60代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
いざ独学でホームページ作成に必要なプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「スキルを身につけるのって思っていたよりも難しいんだな...」とホームページの作成自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できるほど実践的なスキルが身につかなければ、結局後悔することになります。
そのため、1人でホームページの作成スキルやプログラミング言語を習得できるか不安な方は数千円の費用をかけてでも、問題が発生したタイミングで現役エンジニア等に質問できる有料の学習サイトを選ぶのが賢明といえます。
そこで、おすすめしたいのが「SAMURAI TERAKOYA（侍テラコヤ）」です。
ホームページ作成を学べる侍テラコヤの教材例
・Webサイト制作コース
・HTML/CSSでWebサイトを作ろう
フロントエンドのプログラミング言語やWebデザインを学びつつ、WordPressを用いたWebサイトの作成スキルが習得できます。
侍テラコヤをおすすめする最大の理由は「登録無料で現役エンジニアに質問しながら学習を進められるコスパの良さ」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、初学者が現役エンジニアのようなプロに質問や相談ができない環境でプログラミングスキルを習得するのは非常に難易度が高いといえます。
しかし、侍テラコヤでは
- 現役エンジニアが応える回答率100％の「Q&A掲示板」
- 必要に応じて受けられる現役エンジニアとの「オンラインレッスン」
- 勉強の進み具合やこれまでの学習時間を確認できる「学習ログ」
といったサポート体制を整えているため、学習中に出てきた不明点を解決しながら挫折なくLinuxが習得可能です。
Q&A掲示板の例
Google検索等で解決できなかった抽象度の高い質問も解決可能
下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。
侍テラコヤ利用者の口コミ
また、侍テラコヤは入会金不要・いつでも退会OKに加え、利用から1ヵ月の間は「全額返金保証制度」が適用されるので「他のサービスを選べばよかった」と後悔する心配もありません。
なぜ侍テラコヤがコスパよくホームページの作成スキルを習得できるのか気になる方はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ：まずは手を動かすことが大事
ホームページ作成で大事なのは、難しいことは考えずまずは手を動かすことです。レシピを眺めていても料理が上達しないように、細々したことを考えても始まりません。
最初は真似するだけでOK。やってみると意外に簡単なことに気づけると思います。
そこからもっとレベルアップしたり、複雑なホームページを作りたいと思ったらしっかり勉強してみてください。
今回の記事で、ホームページ作りの面白さに気づいていただければ幸いです！
