HTML初心者入門｜基礎知識

2023.02.01 HTML

Webプログラミング初心者のほとんどがHTMLを最初に学習します。

しかし、初心者からすると「HTMLとは？」「HTMLって何なの？」と感じている人がほとんどではないでしょうか？

この記事では、プログラミング初心者でもHTMLが理解できるよう、わかりやすい画像や具体例を使って解説しています。

読み終えた頃には、HTMLを学ぶ第一歩を踏み出しているでしょう。ぜひ最後までお読みください！

HTMLとは？

HTMLとは、「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略で、Webページを構成するための言語です。

「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉で、使用する文字列にはそれぞれ役割を持っており、文章が構成されている要素がどのような役割を持っているかを指示しています。
HTMLで使用する文字列のことをタグと言い、構成されたタグを基に、検索エンジンがWebページの構造を把握しています。

HTMLの見た目を整える役割を果たすCSS

HTMLで構成した基本的な要素に対して、装飾を施すのがCSSの役割です。

文字の色や大きさ、画像のサイズやコンテンツの幅や位置など、細かな指示を行うことができます。

HTMLが骨組みの役割に対して、CSSは見た目の装飾の役割を果たします。

CSSとは？CSSの書き方を解説！

ページに動きを付けるJavaScript

作成したページに「ポップアップ」や「スライド」など、「動く」ために指示を出しているのがJavaScriptです。

JavaScriptはHTMLやCSSなど、他のプログラミング言語と組み合わせて使うことで、動作を付けることができます。

JavaScriptは動きを付ける役割を果たします。

JavaScriptとは？JavaScriptをわかりやすく解説！

HTMLを表示する

ほとんどのWebサイトはHTMLとCSSという言語でその見た目が作られています。

Webサイトを表示させるのに使用するのがブラウザです。
※ブラウザとは、インターネットを閲覧するために使うソフトのことです。

主なブラウザ

Google Chrome
Safari
FireFox
Microsoft Edge

インターネットを閲覧するためには、これらのブラウザを使用しなければなりません。
ただし、ブラウザで表示する＝Webサイトを閲覧するということではありません。

普段閲覧しているWebサイトは、サーバーにアップロードされているHTMLファイルが表示されています。
サーバーにアップロードすることで、インターネットを利用している人が、Webサイトを見ることが出来ますが、
今使用しているパソコンの中にあるHTMLファイルは、あなた以外見ることができません。

Webサイトに関しては、こちらの記事で詳しく説明しています。

Webサイトって何？Webサイト入門に必要な知識を徹底解説

あなたのパソコンのことを「ローカル」と言い、ローカルにあるファイルを「ローカルファイル」と言います。

ブラウザは、Webサイトだけでなく、ローカルファイルも表示することが出来るのです。

多くの制作者は、ローカルファイルをブラウザで表示させて、動作確認のチェックを行います。

ファイルの種類

Webサイトを構成するためのファイルには、様々な種類が存在します。

HTMLファイル・・・拡張子「.HTML」。ページの骨組みを構成するためのファイル。
CSSファイル・・・拡張子「.css」。ページの装飾の役割を果たします。
JavaScriptファイル・・・拡張子「.js」。ページに動きを付ける役割があります。

他にも、「.php」や「.cgi」などありますが、基本はこの3つになります。

ブラウザで表示するまでの手順

HTMLを表示させるための手順を説明します。

テキストエディタでコードを書く
「.HTML」の拡張子で保存
保存したファイルをブラウザ上で表示する

色々と難しい印象がありますが、実はたったのこれだけでブラウザで表示することが可能です。

では、詳しく解説します。

1．テキストエディタでコードを書く

テキストエディタとよばれるソフトで、コードを記述してみましょう。

テキストエディタとは、文字や記号などのテキストを編集するソフトのことです。
Windowsに搭載されている「メモ帳」もテキストエディタに該当します。

２．「.HTML」の拡張子で保存

記述が終わったら、名前を付けて保存します。

テキストエディタでファイルを保存する場合、初期設定で「.txt」などになっていると思います。
この拡張子を「.HTML」にして保存してください。

３．保存したファイルをブラウザ上で表示する

保存したファイルをブラウザ上でドラッグアンドドロップしてみてください。
作成したHTMLが表示されます。

ファイルを右クリックでブラウザを指定して開くことも可能です。

初心者でも使えるHTML編集におすすめのツール2選

HTMLの編集は、テキストエディタを使用しますが、
初心者の方でも使えるおすすめのツールを紹介します。

TeraPad

TeraPadは、Windows上で動く無料のテキストエディタです。
左に行番号がふられるので、見やすいのが特徴。HTMLタグが自動で色分け表示されるので、初心者におすすめです。
ブラウザでのプレビュー機能が付いているので、使い勝手が良く非常に便利です。

公式サイト：https://tera-net.com/

Dreamweaver

Dreamweaverは、Adobe社から発売されているWebデザイン・制作ソフトです。有料ですが、機能はとても充実しています。
ブラウザ上での表示のプレビュー画面を並べた状態でHTMLコードを書けるのが特徴。スムーズな作業が可能となるので、本格的にコーディングに取り組む方におすすめです。

公式サイト：https://www.adobe.com/jp/products/dreamweaver.HTML

HTMLは初心者でもマスターできる！

HTMLやコード、という単語を聞くと身構える人は少なくありません。
しかし、構造を理解してしまえば、初心者でもHTMLをマスターできます。

詳しいタグの使い方はこちらの記事で解説しています。

初心者が覚えるべき、タグの役割と使い方

Webページの制作・更新において、自分でHTMLを編集するのが難しいと考えている方や、もっと簡単に行いたいと考えている方には、「CMS」もおすすめです。

CMSとは、ブログサイトのように、フォーマットが決まっており、文章のみを記載して、ページを作成するツールのことです。

CMSも様々ありますが、もっとも有名なのが「WordPress」です。

WordPressを覚えよう！初心者でもわかるWordpressの基礎知識

どのようにして、Webサイトを制作するには、自分のやりやすい方法を選択するのがベストです。

HTMLを習得されたい方は、引き続きご愛読ください。

CSSとは？...