記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTMLファイルとは+タグの種類とファイルの作成方法(初心者向け)

HTMLファイルを初心者の方向けに紹介。 HTMLを学ぶ上での最初の基礎となる、そもそもHTMLとは、HTMLファイルの作成の方法、HTMLファイルを作成する際のおすすめのテキストエディタ、についてサンプルコード付きで解説していきます。

カテゴリ: HTML/CSS

こんにちは!
WEBサイト制作をはじめてみたいけど、「そもそもHTMLってなに・・?」 今さらだけど、「HTMLについてよく知らない・・」 HTMLについて詳しく知り、「WEBサイト制作をしたい!」 そのように考えている、WEB制作初心者の方も多いのではないでしょうか?
今回は、WEB制作初心者の方向けに「そもそもHTMLファイルとは?」 「HTMLファイルの作成の仕方」「HTMLファイルを作成する際のおすすめのテキストエディタ」について解説していきます。

そもそもHTMLとは?

HTMLとは、「Hyper Text Markup Language」(ハイパーテキスト・マークアップ・ランゲージ)の略で、webページを作るための基本的となる言語です。
普段私たちが、「パソコン、スマートフォン」から見ているWEBページのほとんどがHTMLで作られているものです。
多くの方が毎日見ているのではないでしょうか?
HTMLを理解しなければ、WEBページは作成できません。

HTML(ハイパーテキスト・マークアップ・ランゲージ)の ハイパーテキストとは、ハイパーリンクを埋め込むことができる高機能なテキストという事です。ざっくり言うと、文章中に指定のリンク先を貼ることができ、同ページ内や違うWEBページに移動する事ができる。この移動機能がハイパーテキストリンクと言います。

WEBページの裏側

普段私たちが見ているWEBサイトは言語で書かれています!
でもWEB制作経験のない方はピンと来ないはずです。
そこで実際に画面に書かれている言語を見てみましょう。
見方:画面上を右クリックし「ページソースを表示」を押してみて下さい。

上記のように、アルファベットや数字がずらっと表示されたと思います。
これがWEBサイトの裏側です。
並んでいるアルファベットの文字を「ソースコード」と呼び、この文字がパソコンに指示を出し、WEBページを表示しています。
あらゆるページでソースコードを見ることができますのでチェックしてみて下さい。

HTMLの種類について

HTMLにはいくつか種類があります。 使えるタグに違いがあるため、使いたいタグに応じてHTMLのバージョンを確認して下さい。
ここでは3点紹介しますが、1番最初に紹介する「HTML5」が最新です。


①「HTML5」
・HTMLの最新バージョンで使用できるタグも豊富
・記述方法に関しては比較的決まり事が少ない
・他の言語やファイルの埋め込みに対して柔軟に対応できる


②「HTML4.01」
・現行のHTML5の一世代前のバージョン
・記述方法に比較的決まり事が少ない
・対応しているブラウザが多い


③「XHTML1.0」
・記述方法に決まりが多く厳密
・対応しているブラウザが多い


HTMLの種類についてもっと詳しく知りたい方は下記を参照してみて下さい。
https://www.flapism.jp/html/107/

HTMLファイルの準備・作成方法

テキストエディタを開き、下記のサンプルコードをエディタに記載して下さい。
テキストエディタについて詳しく知りたい方は、下記を参考にして下さい。
https://kinsta.com/jp/blog/best-text-editors/

HTMLサンプルコード

※解説
この文章を記述したファイルを拡張子「.html」をつけて、テキストエディタで保存すればHTMLファイルを作成する事ができます。

この拡張子「.html」がポイントです!
拡張子をつけなければパソコンはHTMLファイルという判断をしてくれません。
例)「sample.txt」というファイル名になっていたら→「sample.html」.html拡張子をつけ、ファイル名を変更する。→このファイルはHTMLファイルだよ、とパソコンに宣言します。

※サンプルコードについて解説
.html拡張子をつければHTMLファイルとして認識されますが、ここではサンプルコードの内容を詳しく知りたい方向けに、簡単に解説していきます。
<!DOCTYPE html>
・この文章がHTML5で書いたものですと宣言しています。


<html>〜</html>
・<html>〜</html>はその文章がHTMLであることを宣言しています。
 文章の最初と最後に記述します。


<html lang=”ja”>
・lang属性を指定しており、日本語を意味するjaを指定しています。
 ドキュメントの言語が日本語であることを宣言しています。


<head>〜</head>
・<head>〜</head>の間に文書のタイトル等のヘッダ情報を記述します。


<meta charset=”UTF-8″>
・文字エンコーディングの指定です。
 日本語の文字コードの値として「UTF-8」の他に「SHIFT_JIS」と「EUC-JP」などがあげられます。
 大文字・小文字の違いは区別されません。


<title>タイトル</title>
・ここに文書のタイトルを入れます。


<body>〜</body>
・コンテンツの中身で、実際にブラウザに表示される文章を記述します。

リンクを表示

先ほど作成したHTMLファイルにリンクを作成してみます。
今回はヤフーのトップページにリンクできるように作成してみます。

HTMLサンプルコード

サンプルコード表示結果

これを作る↓

ヤフー

※解説
今回はヤフーのトップページのリンクを指定しました。
hrefの部分にリンク先のパスを入力します。
<a>〜</a>の間に文字を入れると(今回はヤフー)リンクと連動した文字となります。

画像を表示

画像を表示させるには[img]タグを使います。
HTMLファイルに次は画像を表示してみます。

サンプルコード表示結果

サンプルコード表示結果↓

※解説
imgタグの書き方は、<img src=”画像ファイルURL”>となります。
終了タグは存在しません。
同じディレクトリ内に画像ファイルがある場合は、ファイル名だけを入力すると相対パスとしてつなげる事ができます。
パスについて詳しく知りたい方は下記を参照にしてみて下さい。
https://webliker.info/78726/

段落分を行う

段落分を行うにはpタグを使います。
HTMLファイルに次は段落分をおこないます。

サンプルコード表示結果

サンプルコード表示結果↓

段落1

段落2

段落3

※解説
<p>〜</p>タグで囲み段落わけを行う事ができました。

見出しを作る

<h1>〜<h6>で見出しを作成します。
<h1>が一番大きな文字となり、メインの見出しとなります。
<h2>〜<h6>と数字が大きくなるにつれて、小さな見出しになります。

※<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は6番目に大きい見出し</h6>

HTMLファイルに次は見出しを作成してみます。

サンプルコード表示結果

サンプルコード表示結果↓

見出しh1を作成

見出しh2を作成

見出しh3を作成

※解説
各大きさ、用途に合わせて<h1>〜<h6>を選択し見出しを作成して下さい。

その他HTMLのタグ

その他にもタグはあります。

・<ol>・<ul>・<li>:リストを作成するタグ。

・<tabel>:テーブルを作成するタグ。

・<form>:フォームを作成するタグ。

・<button>:ボタンを作成するタグ。


など様々な種類のタグがあります。
HTMLはこれらのタグを使用しサイトを作成するため、タグについてしっかり理解しておきましょう。より詳しく知りたい方は下記を参考にしてみて下さい。

http://www.htmq.com/html/indexm.shtml

おすすめテキストエディタ

ここからは、HTMLファイルを記載する上で、使いやすく見やすいテキストエディタを紹介していきます。
1.visual Studio(ビジュアルスタジオ)
おすすめポイント
・マイクロソフトが提供する無料のエディタ
・mac,Windows,Linuxに対応
・プログラムのハイライト表示がわかりやすい
・30種類のプログラミング言語をサポートしている
・エディタ内で直接コードをデバックできるオプションがある

2.atom(アトム)
おすすめポイント
・GitHubが提供する無料のエディタ
・Mac,Linux,Windows対応のクロスプラットホームアプリ
・パッケージを追加し機能拡張ができる・カスタマイズしやすい
・共同開発する時、全ての編集や作成がリアルタイムで行える

3.brakets
おすすめポイント
・Adobe社が提供している無料のエディタ
・mac,Windows,Linuxに対応
・インストール直以後から日本語メニュー・フォントが使用できる
・30種類以上のプログラム言語に対応している
・githubとの接続ができる
・エディタの中で直接ウィンドウを開く事ができ、作業中に複数のタブを開く必要がない

4.terapad
おすすめポイント
・windows用のテキストエディタで、国産、無料
・インターフェイスが全て日本語
・シンプルなので機能面の充実はないが、シンプルかつ日本語で初心者にはわかりやすい

5.秀丸エディタ
おすすめポイント
・windows用の有料エディタで軽量かつ高機能
・タグの色分けを細かく行えるので、複数人で開発しても読みやすいコードを書くことができる

6.さくらエディタ
おすすめのポイント
・windows用のオープンソースエディタ
・国産でインターフェイスは全て日本語
・アウトライン解析・Grep機能・差分解析の機能がある
・文字コード変換機能充実

7.Sublime Text
おすすめのポイント
・有料版(1つのライセンス購入80ドル)ですが、パーケージ機能によるカスタマイズのしやすさが特徴のエディタ
・Windows,Mac,Linux対応
・日本語対応可能
・購入前にエディタを試してみることが可能

8.Liveweave
おすすめのポイント
・pc上にインストールすることなく、オンライン上で編集できるエディタ
・軽量なのでスペックの低いPCでも手軽に利用できる
・編集と同時進行でWebページを確認できる

9.Mery
おすすめのポイント
・国産エディタ・無料版
・windows対応
・windowsのメモ帳に似ていて、初心者にも使いやすいシンプルなエディタ
・日本語の縦書き対応
・プログラム言語を入力する際に候補を補完する機能搭載

10.Notepad
おすすめのポイント
・Windows10のメモ帳と同じ様な操作方法が特徴の無料エディタ
・windows対応
・様々な言語に対応しており、日本語対応
・カスタマイズツールが豊富
・プログラミング言語の色分けが豊富

まとめ

最後に簡単にポイントをまとめます。

1.HTMLとは、「Hyper Text Markup Language」(ハイパーテキスト・マークアップ・ランゲージ)の略で、webページを作るための基本的となる言語です。


2.HTMLファイルを作成するには、ファイルを拡張子「.html」をつけて、テキストエディタで保存する。


3.おすすめのテキストエディタは10点
 1.visual Studio(ビジュアルスタジオ)
 2.atom(アトム)
 3.brakets
 4.terapad
 5.秀丸エディタ
 6.さくらエディタ
 7.Sublime Text
 8.Liveweave
 9.Mery
 10.Notepad


いかがだったでしょうか?
今回は、「HTMLファイルとは?」「HTMLファイルの作成方法」「おすすめテキストエディタ」について解説してきました。
HTMLファイルはWEBサイトを作成する上でかかせない基礎知識となります。
HTMLファイルを作成し積極的にアウトプットを増やす事で知識を定着させていきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。