HTMLを使ってホームページを作成すれば、オリジナルのデザインやレイアウトに設定できます。
イチからホームページを構築したい場合は、HTMLを使いましょう。
この記事では、HTMLでホームページを作りたい人に向けて、HTMLを使用するホームページの作成方法をわかりやすく解説します。本格的なホームページを構築するために、ぜひ参考にしてください。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
HTMLとは？
HTMLとは、Webブラウザに文字を表示させるための言語です。「HyperText Markup Language」を略してHTMLとよばれています。HTMLはタグで構成されており、文字にさまざまな表現を加えられます。指定したい箇所をタグで囲むのが基本的なルールです。
たとえば、HTMLで見出しを設定したり、文章中にリンクを入れたりできます。ほかにもさまざまなデザインやアレンジを加えられるため、作りたいWebサイトのイメージにあわせてHTMLタグを組み合わせましょう。
また、HTMLの拡張子は「.html」です。テキストファイルは「.txt」で保存しますが、HTMLには専用の拡張子があると理解しておきましょう。パソコンで「.html」が表示されない場合は、拡張子の設定をする必要があります。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
HTMLを使ってホームページ作成をするメリット
HTMLを使用してホームページを作成すれば、さまざまなメリットがあります。ここでは、具体的なメリットについて解説します。
自由にカスタマイズできる
HTMLでホームページを作る場合、すべてを何もない状態から構築する必要があります。レイアウトに制限がないため、自由なカスタマイズが可能です。簡単にホームページを作成できるツールやシステムも増えていますが、細かい部分までこだわりたいならHTMLを使う方法のほうが適しています。
ホームページの内容や規模によってはほかの技術を組み合わせると、さらにさまざまな調整ができます。
独自のデザインのページが作れる
HTMLでは、ホームページのデザインも自由に設定できます。たとえば、文字の大きさや配置などを好みに合わせて調整できます。
WordPressなどを使用するときは、デザインや機能があらかじめ設定されているパッケージを適用するのが一般的です。その場合もある程度はデザインを変更できますが、すべてを自由にデザインできるわけではありません。デザインに個性を出すためには、HTMLを使って自分でホームページを作る必要があります。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
HTMLを使ったホームページ作成方法
HTMLを使ってホームページを作るには、どうすればいいのでしょうか。ここからは、HTMLを使用するホームページの作り方を解説します。
ツールを用意する
HTMLを使ってホームページを作るには、ツールを用意しなければいけません。必要なツールとは、Webブラウザとテキストエディタです。WebブラウザとしてGoogle Chromeなどを普段から使っている場合は、ホームページを作る際もそのまま使用できます。
テキストエディタとはパソコンに文字を打ち込むためのツールであり、たとえばメモ帳などが該当します。もともとホームページを作るために用意されているテキストエディタを選べば、よりスムーズにHTMLファイルの作成が可能です。
HTMLファイルを作成する
HTMLでホームページを作るために、まずはテキストエディタで拡張子が「.html」のファイルを作りましょう。この段階では保存場所にこだわる必要ないため、ひとまずファイルを作成できれば問題ありません。
コードを書く
作成したHTMLファイルを使用し、タグを組み合わせてコードを書いていきます。コードを記載すると、指定した内容がWebブラウザ上に表示される仕組みになっています。コードの例を示すと、以下のとおりです。
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>文章のタイトル</h1>
<p>本文</p>
</body>
</html>
このコードは、HTMLでホームページを作成する際に必ず記載する必要があります。どのような場合も同じ記述をするため、覚えておきましょう。
ファイルをアップロードする
HTMLファイルが完成したら、Webサーバー上にファイルをアップロードします。ファイルをアップロードするためには、外部へファイルを送信するためのFTPソフトが必要です。HTMLファイルをアップロードする前に、FTPソフトの設定を完了させておきましょう。
その後、FTPソフトを開いてHTMLファイルを選択します。そのままWebサーバーにHTMLファイルをアップロードします。Webサーバーに設定しているアドレスをWebブラウザのアドレスバーへ入力し、HTMLファイルの内容が表示されるように設定しましょう。
実際にはそれぞれで細かい設定が必要なため、ファイルのアップロードの全体的な手順を押さえたうえでさらに確認してください。
HTMLの書き方
HTMLにはさまざまな書き方の決まりがあります。ここでは、HTMLの書き方について解説します。
headタグの中にHTMLの情報を記載する
HTMLでは、headタグの中にHTMLの情報を記載するのが基本です。HTMLの情報とは、meta要素やページタイトルなどが含まれます。具体的な記載例は以下のとおりです。
<html>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”参照元”>
<link rel=”stylesheet” href=”style.css”>
<title>ページタイトル</title>
</head>
</html>
実際に作成したいホームページに合わせ、適切に記載しましょう。
bodyタグの中にページのコンテンツの情報を記載する
ホームページ上に表示させたい内容は、bodyタグの中に記載します。たとえば、自社の事業内容や社員に関する情報を記載する場合は以下のような記載をします。
<body>
<h1>サンプルホームページ</h1>
<p>事業内容</p>
<p>社員紹介</p>
</body>
bodyタグの中に記載した情報はWebブラウザ上で公開されるため、誤った情報を記載しないように注意しましょう。
h1タグの中に見出し、pタグの中に文章を記載する
先程示したとおり、ホームページ上に表示させたい内容はbodyタグの中に記載します。見出しにはh1タグを使用し、文章はpタグに記載しましょう。
h1タグは見出しを表すための専用のタグです。h1～h6があり、数字が小さくなるほど小さな見出しとなります。文字の大きさも小さくなるため、細かい見出しであるとわかります。
表示させたい内容によって記載すべきタグは異なるため、注意しましょう。タグにミスがあると正しく表示されなかったり、イメージとは異なる表示になったりする可能性もあるため、よく確認しながら作業を進めてください。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
ホームページをデザインするにはCSSが必要
デザイン性の高いホームページを作るためには、HTML以外の技術も組み合わせる必要があります。HTMLだけでもホームページそのものは作れますが、見た目は白黒で単調なデザインになってしまいます。
ホームページのデザインを変更するには、CSSが必要です。CSSとは「Cascading Style Sheets」の略称であり、ホームページの見た目に関する部分を設定します。CSSを使用すれば、文字や背景の色なども自由に変更できるようになります。
CSSにはHTMLとは異なるルールがあり、それをよく理解したうえで記述しなければなりません。HTMLと組み合わせて使用するため、HTMLとともに記載方法を修得しましょう。
HTML以外でホームページを作成する方法
わざわざHTMLを勉強しなくても、ホームページを作成できる方法があります。ここでは、HTMLを使用しないホームページの作成方法を解説します。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
CMSを使う
CMSとは「Contents Management System」の頭文字をとったツールのことです。CMSを使用すれば、WEBサイトの専門知識がない人やHTMLを書けない人でもホームページを簡単に構築で、コンテンツの構築、管理、更新にも対応できます。
CMSを使用すれば、HTMLで表現するのが難しいデザインもすぐに作成できます。CMSを使用して作られているホームページも多いため、活用を検討してみましょう。
ホームページ作成ソフトを使う
ホームページ作成ソフトを使用すれば、複雑な設定をしなくても簡単にホームページを作成できます。なかには無料で利用できるものもあり、気軽に試せます。直感的な操作で使えるようになっている場合が多いため初心者でも安心です。
ただし、ホームページ作成ソフトを使用して作成したホームページに独自ドメインを設定したり、自動的に表示される広告を消したりするには、料金がかかることもあります。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
まとめ
HTMLでホームページを作成すれば、すべてをオリジナルのデザインやレイアウトに設定できます。ただし、まったく知識がない状態からHTMLを勉強してホームページを構築するのは、簡単ではありません。より簡単にホームページを構築するためには、CMSを活用しましょう。
BiNDupは、日本国内で運営されているCMSです。30日間の無料トライアルが可能であり、有料コースなら専用のサポートを受けながらホームページを運用できます。カスタマイズ性にも優れているため、イメージに合うデザインやレイアウトが可能です。HTMLよりも簡単かつスムーズにホームページを構築したい方は、ぜひ新規申込みを検討してください。
POINT
- HTMLはタグで構成されており、文字にさまざまな表現を加えられる
- ホームページはツールを用意してHTMLファイルでコードを作成し、アップロードする事で閲覧できる様になる
- CMSを使用すれば、HTMLで表現するのが難しいデザインもすぐに作成できる