目次
HTMLは、Webページの骨組みを支える言語です
私たちが日々利用しているインターネット上のあらゆるページは、HTMLという言語によって作られています。HTMLは、HyperText Markup Languageの略で、Webページの構造を定義し、各要素の意味をコンピュータに伝える役割を担っています。
HTMLがなければ、単なる文字の羅列でしかなく、見出しや段落といった構造的な情報が失われてしまいます。HTMLは、いわばWebページの設計図のようなもので、この設計図に基づいて、ブラウザが実際のページを表示します。
HTMLでは、タグと呼ばれる特別な記号を使って、文章の構造を定義します。「見出し」には<h1>や<h2>などのタグ、「段落」には<p>というタグが使用されます。
これらのタグによって、コンピュータはどの部分が「見出し」で、どの部分が「本文」なのかを理解し、私たちに見やすいページを表示してくれるのです。
HTMLを用いて、文章に意味を与えることをマークアップと言います。マークアップによって文章だけでなく画像や動画、リンクなどもページの中に配置することができます。HTMLを学ぶことは、Webページ作成の第一歩といえるでしょう。
また、HTMLによる印そのもののことを「タグ」といい、例えば先ほどの見出し・本文の例だと下記のようなタグづけをおこないます。
<h1>見出しとなるテキストが入ります<h1><p>本文の内容が入ります</p> このようなタグを組み合わせることでシステムが、ページの意味を正しく理解しホームページとして表示させることができます。ただし、このようにタグ付けしただけだとデザイン面には何も手が加えられていない味気ない状態になります。そこでホームページにデザインを施すために使用されるものがCSSというものです。
ホームページのデザインにはCSSを使う
Webページを作成する際、HTMLは建物の設計図のようなものです。部屋の配置や大きさを決め、建物の構造を定義します。一方CSSは、その設計図をもとに、建物を彩るインテリアを選ぶようなものです。壁紙の色や家具の配置、照明の種類など、あらゆるデザイン要素をCSSで指定できます。HTMLで見出しや段落といった要素を配置し、CSSでそれらの要素にフォントや色、大きさなどのスタイルを適用することで、魅力的なWebページを作成することができます。HTMLがWebページの中身を決め、CSSがその見た目をデザインする。この両者は、車のエンジンとボディの関係のように、密接に連携して一つのWebページを作り上げます。
CSSを学ぶことで、あなたは、自分のアイデアを形にし、オリジナリティ溢れるWebページをデザインできるようになります。例えば、企業のウェブサイトであれば、会社のイメージに合った洗練されたデザインにしたり、個人のブログであれば、自分の好きな色合いやフォントを使って個性的なデザインにしたりすることができます。
HTMLとCSSは、Webデザインの基礎となる技術です。この二つの言語を学ぶことで、あなたはWebの世界で活躍するための第一歩を踏み出すことができます。
ホームページをHTMLで作成する手順
ここからは具体的にHTMLからホームページを作る手順について解説していきます。初心者でも理解できるように1から解説しますのでご安心ください。簡単なものであれば知識ゼロの方でも作成できますのでぜひチャレンジしてみてください。- テキストエディタを用意する
- 基本となるタグを記述する
- 作りたいページ内容に応じてタグを記述する
- 作成したファイルを実際にブラウザで表示してみる
- 実際にサーバーにデータをアップロードする
テキストエディタを用意する
Webサイト制作の第一歩として、HTMLのコードを記述するためのテキストエディタを選びましょう。テキストエディタは、いわば、プログラミング言語であるHTMLを書き込むための専用のツールです。 Windowsに標準で搭載されている「メモ帳」もテキストエディタの一種ですが、より高度な機能を備えた専門的なテキストエディタを使うことで、効率的かつ正確にHTMLコードを作成することができます。専門的なテキストエディタには、コードの自動補完や構文の強調表示など、HTMLの記述をサポートする様々な機能が搭載されており、初心者の方でもスムーズにWebサイト制作を始めることができます。ではまず人気のあるテキストエディタを幾つか紹介します。どれも機能に少しの違いはあってもできることは同じですので使いやすいものを選んでください。
- Sublime Text
- Atom
- Visual Studio Code
- サクラエディタ
- Emacs
Sublime Text
Sublime Textは、プログラミングやマークアップ言語のコーディングを効率的に行える、世界中で高い評価を得ているテキストエディタです。その高速な動作と直感的な操作性は、開発者の作業を飛躍的に向上させます。多様なプログラミング言語に対応しており、シンタックスハイライトやコード補完といった機能が、正確かつ迅速なコーディングをサポートします。さらに、プラグインによって機能を拡張できるため、自分好みの環境を構築することができます。Goto Anything機能は、ファイル、シンボル、行に素早く移動でき、大規模なプロジェクトでも効率的に作業を進めることができます。
Sublime Textは、初心者からプロの開発者まで、幅広い層に支持されており、一度使うと手放せないツールとなるでしょう。
Atom
Atomは、GitHubが開発した、カスタマイズ性に富んだテキストエディタです。そのオープンソースな性質から、世界中の開発者によって日々進化を続けており、多様なプログラミング言語に対応しています。直感的なインターフェースと豊富なパッケージにより、初心者でも手軽に使い始めることができます。シンタックスハイライトやコード補完といった基本機能に加え、Gitとの連携もスムーズに行えるため、バージョン管理も効率的に行えます。また、コミュニティが活発であり、様々な情報やサポートを得やすいのも魅力の一つです。
Atomは、Web開発を中心に、幅広い分野で活用されており、柔軟性と拡張性を兼ね備えたエディタとして人気を集めています。
Visual Studio Code
Visual Studio Code、略してVS Codeは、マイクロソフトが開発した、今最も人気の高いテキストエディタの一つです。その高い拡張性と多機能性が特徴で、プログラミングだけでなく、マークダウンや設定ファイルの編集など、幅広い用途で活躍します。IntelliSenseによるコード補完やデバッグ機能など、開発を効率化する機能が充実しており、初心者からプロの開発者まで、多くのユーザーに支持されています。Gitとの統合もスムーズに行え、バージョン管理も効率的に行えます。また、豊富な拡張機能により、カスタマイズの幅も広がり、自分好みの開発環境を構築できます。
VS Codeは、Web開発を中心に、様々なプラットフォームに対応しており、クロスプラットフォームな開発環境を求めるユーザーに最適です。
サクラエディタ
サクラエディタは、長年多くのユーザーに愛されている、国産のテキストエディタです。そのシンプルさと軽快な動作が魅力で、プログラミングやテキストファイルの編集など、幅広い用途で活用されています。多様な文字コードに対応しており、日本語はもちろん、英語や中国語など、世界中の言語で書かれたテキストを快適に編集できます。正規表現を使った検索・置換機能も強力で、大量のテキストデータを効率的に処理することができます。カスタマイズも自由自在で、マクロ機能を使えば、繰り返し行う作業を自動化することも可能です。
サクラエディタは、軽量でありながら、必要十分な機能を備えているため、初心者から熟練者まで、幅広い層に支持されています。
Emacs
Emacsは、その拡張性の高さで知られる、由緒あるテキストエディタです。長年の歴史を持ち、多くのプログラメールや作家に愛されてきました。Emacs Lispという独自のプログラミング言語でカスタマイズできるため、自分だけの環境を構築することができます。メールやカレンダー、さらにはゲームまで、Emacs上で様々な機能を実現できる点が特徴です。初心者には少しハードルが高いと感じるかもしれませんが、一度使いこなせば、その柔軟性と強力な機能に魅了されることでしょう。プログラミングはもちろん、文章作成や研究など、様々な用途に活用できます。
Emacsは、単なるテキストエディタを超えた、パーソナルなコンピューティング環境と言えるでしょう。
基本となるタグを記述する
ホームページを作成するために必要なタグを記述していきます。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>それぞれの意味は以下のようになっています。
- <!DOCTYPE html>・・・HTMLを記述する上で前提となる書き出し。
- <html></html>・・・HTMLの文書の起点と終点を表す記述。
- <head></head>・・・ページ上には表示されないが裏側の設定を記述するエリア。
- <meta charset="utf-8">・・・文字のエンコードを指定するタグ。文字化けを防ぐことができる。
- <meta name="viewport" content="width=device-width, initial-scale=1">・・・様々なデバイスの画面幅にも綺麗に表示させることができるようになるタグ。
- <title></title>・・・ページタイトルを指定するための記述。
- <body></body>・・・ページ上に実際に表示される要素を記述するエリア。
作りたいページ内容に応じてタグを記述する
HTMLの基礎となるタグの準備が整ったら、いよいよWebページに具体的な内容を追加していく段階に入ります。例えば、「見出しの後に文章と箇条書きが続くページ」を作成したいとしましょう。この場合、<body>タグと</body>タグの間に、HTMLタグを用いて構造を記述します。<body>タグは、Webページの本体であり、ここに記述された内容がブラウザに表示されます。つまり、<body>タグと</body>タグで囲まれた部分が、実際にユーザーが目にするページの内容となるのです。
<h1>ページの大見出しを表します</h1>
<p>pは文章の段落を表します。文章の本体です。</p>
<ol>
<li>olは番号付きのリスト（ordered list）を表します</li>
<li>番号無しのリストにしたい場合は、ul（unordered list）を使います</li>
<li>li（listitem）はolやulの中でリスト内の項目を表します</li>
</ol>例えばこのように記述します。このようにページ内容を決めたらCSSでデザインを整えていきます。CSSはページ全体に覆いかるのでCSSで指示を出したページを全て同じデザインになります。
今回は以下の２点を行ってみましょう。
- W見出しの文字サイズを大きくして、色と背景色を変えた上で余白持たせる。
- W箇条書きの<ol>に枠線を付けて余白を持たせる。
以下を<head>と</head>の間に入れてみてください。
<style type="text/css">
h1 {
font-size: 30px;
background-color: #00af3a;
color: #ffffff;
padding: 8px 14px;
}
ol {
border: 2px solid #F3F3F3;
padding: 14px 14px 14px 32px;
}
</style>作成したファイルを実際にプラウザで表示してみる
HTMLファイルを作成したら、いよいよ完成したWebページをブラウザで表示させてみましょう。作成したindex.htmlファイルを、普段お使いのGoogle ChromeやMicrosoft EdgeなどのWebブラウザで開いてみてください。すると記述した内容に基づいたWebページが表示されます。現時点では、作成したWebページはシンプルな状態ですが、HTMLやCSSを追加していくことで、デザインを洗練させ、より魅力的なホームページへと発展させることができます。見出しのフォントや色を変更したり、背景に画像を設定したりといったカスタマイズが可能です。HTMLとCSSを組み合わせることで、創造性を最大限に発揮し、オリジナリティ溢れるホームページを制作することができるでしょう。
実際にサーバーにデータをアップロードする
作成したHTMLファイルを多くの人に見ていただくためにインターネット上に公開するには、サーバーにアップロードする必要があります。サーバーは、Webサイトのデータを保存し世界中のユーザーからのアクセスに応える役割を果たします。レンタルサーバーと呼ばれるサービスを利用することで、比較的簡単に自分のWebサイトを公開することができます。HTMLの見本テンプレートを活用する
HTMLをイチから作成することに不安を感じていらっしゃる方は、テンプレートの活用を検討してみてはいかがでしょうか。テンプレートとは、あらかじめ用意されたHTMLファイルのことで、文章や画像を置き換えるだけで、自分だけのホームページを手軽に作成することができます。デザインやレイアウトが整っているため、初心者の方でも比較的簡単に本格的なホームページを制作できます。しかし、テンプレートを自由自在にカスタマイズしたい場合には、HTMLやCSSの知識が必要になります。テンプレートを選ぶ際は、業種やデザインの雰囲気など、ご自身の目的に合ったものを慎重に選ぶことが大切です。
では、多種多様なテンプレートが無料または有料で配布されているウェブサイトをいくつかご紹介します。これらのウェブサイトでは、検索機能などを活用して、ご自身のニーズにぴったりなテンプレートを見つけることができます。
専門知識がなくても、本格的なホームページを作成したいという方には、ホームページ作成ソフトもおすすめです。ホームページ作成ソフトは、直感的な操作でデザインやレイアウトを変更できるため、初心者の方でも簡単にホームページを制作することができます。
初心者向けの手軽に利用できる無料テンプレートサービス
- 無料テンプレート.com
- HTML5 UP
- Template Party
無料テンプレート.com
「無料テンプレート.com」は、中小企業や個人事業主の方が、WebサイトやSNSのデザインをもっと手軽に、そしてプロフェッショナルなクオリティに仕上げるための無料テンプレートを提供するサービスです。高品質なデザインのロゴ、バナー、プレゼンテーション資料、そしてWebサイトテンプレートなど、ビジネスシーンで必要となる様々なデザイン素材が豊富に揃っています。初心者の方でも扱いやすい直感的なインターフェースで、短時間で魅力的なデザインを作成することができます。
デザインスキルがなくても、自分だけのオリジナルコンテンツを簡単に作り出すことができるので、時間とコストの削減にも繋がります。豊富なデザインテンプレートからあなたのビジネスにぴったりのものを選び、ワンランク上のビジネスイメージを確立しましょう。
無料で利用できる高品質なデザイン素材で、ビジネスを成功に導きます。
HTML5 UP
「HTML5 UP」は、Webサイト制作に携わるデザイナーや開発者にとって、なくてはならない存在と言える無料のHTML5/CSS3テンプレート集です。高品質で洗練されたデザインのテンプレートが豊富に揃っており、ポートフォリオ、ブログ、ランディングページなど、様々な用途に活用できます。レスポンシブデザインに対応しているため、スマートフォンやタブレットなど、あらゆるデバイスで快適に閲覧できるWebサイトを短時間で作成することができます。
また、、コーディングの知識がなくても、HTML5 UPのテンプレートをカスタマイズすることで、オリジナリティ溢れるWebサイトを手軽に実現できます。無料で利用できるにも関わらず、そのクオリティの高さはプロのデザイナーも納得のレベル。最新トレンドを取り入れたデザインで、あなたのWebサイトをより魅力的に演出します。
Template Party
「Template Party」は、デザインの知識がなくても、プロフェッショナルなデザインを作成したいという中小企業や個人事業主の方のための、デザインテンプレートの宝庫です。Webサイト、SNS、プレゼンテーションなど、様々なシーンで使える高品質なデザインテンプレートが豊富に揃っています。ロゴ、バナー、資料など、ビジネスで必要となるあらゆるデザイン素材を手軽に手に入れることができます。ドラッグ＆ドロップなどの簡単な操作で、自分だけのオリジナルデザインを短時間で作成可能。フォント、カラーなど、細かな部分まで自由にカスタマイズできるため、オリジナリティ溢れるデザインも実現できます。
最新トレンドのデザインを取り入れたテンプレートも多数用意されており、あなたのビジネスをより魅力的にアピールすることができます。デザインの専門知識は不要、Template Partyさえあれば、あなたのアイデアを視覚的に表現し、効果的なコミュニケーションを促進することができます。
HTMLを簡単に作成できるソフトの活用
これまで、HTMLを用いたホームページ作成方法や、デザインの効率化に役立つテンプレートについて解説してきました。しかし、ご自身の理想とするウェブサイトを制作するためには、HTMLに関する一定の専門知識が必要となることも事実です。
もし月額5,000円程度の費用負担が可能であれば、ホームページ作成ソフトの利用を検討されてみてはいかがでしょうか。
ホームページ作成ソフトは、多種多様なデザインテンプレートから、ご自身のビジネスに最適なものを選択できるだけでなく、直感的な操作でウェブサイトの内容を自由自在に編集することができます。
HTMLの知識がなくても、ドラッグ＆ドロップなどの簡単な操作で、プロフェッショナルなウェブサイトを構築することが可能です。管理画面を通じて、テキストの入力や画像の挿入といった作業を行うだけで、自動的にHTMLコードが生成され、ウェブサイトに反映されます。
これにより、デザインとコンテンツの両方に集中でき、より魅力的なウェブサイトを短時間で作成することができます。専門的な知識がなくても、高品質なウェブサイトを手に入れたいとお考えの方は、ぜひホームページ作成ソフトをご活用してみてください。
以下はおすすめソフトと、その費用感・簡単な特徴になります。、これらはそれぞれ無料プランも用意されていますので気軽に試すことができます。
| 価格 | 特徴 | |
| Wix | 1,200円～12,000円 | デザイン性と機能性を両立。さらに費用は掛かるが拡張性が高い。 |
| Jimdo | 990円～1,590円 | 小規模なブログやECサイトに向いている |
| Crayon | 1,188円～3,190円 | 柔軟性があり拡張性も高い。複数人での共同編集も可能。 |
| Strikingly | 8ドル～49ドル | デザイン性と使いやすさを両立させている。決済がドル。 |
| BASE CREATOR | 16,580円 | オンラインショップ作成に適したサービス。 |
中小企業・個人事業主必見！スマホで作るホームページで売上アップ！
公開されているホームページのHTMLを確認する方法
ここまでホームページ作成に必要なHTMLの基礎について解説してきましたが、最後に、既にインターネット上で公開されているウェブサイトのHTML構造を確認する方法をご紹介しましょう。 気になっているウェブサイトが、どのようなHTMLコードで構築されているのか、ぜひ一度ご自身で調べてみてください。ブラウザの開発者ツールを使えば、簡単にHTMLのソースコードを見ることができます。これは、まるで家の設計図を見るようなもので、ウェブサイトの骨組みを詳しく知ることができるのです。HTMLのタグや属性の意味を理解しながらコードを見ていくことで、Webサイトの仕組みをより深く理解することができます。
まとめ
これまで、ホームページを作成する上で欠かせないHTMLとCSSの基礎知識から、実際にホームページを作っていく手順、そして効率的にデザインを完成させるためのテンプレートの活用法まで、幅広く解説してきました。HTMLとCSSを習得することで、ご自身のアイデアを形にしたオリジナルのウェブサイトを作成できるようになります。コーディングの世界は奥深く、スキルアップの可能性は無限大です。Webサイト制作に興味をお持ちの方は、ぜひ一歩踏み出して、プログラミングの世界を探求してみてください。Webデザインの楽しさをきっと見つけることができるはずです。
もし、より実践的なホームページや集客を見据えたホームページ制作に興味があればホームページドットコムにアクセスしてください。作って終わりのホームページではなく、マーケティング戦略やSEOなどきちんと顧客を獲得できるノウハウを提供しています。