10分で学べるHTMLの超入門講座!「全体構造と基本文法」編

今回は、初心者の方にも分かりやすいように、HTMLの基本について解説します。

HTML/CSS基礎

具体的には、

・HTMLの概要

・HTMLコーディングに必要なもの

・HTMLの基本文法

・HTMLの基本構造

・行き詰った時の対処法

この順番で説明します。

 

本記事は10分で読めるようになっているので、サラッと短時間で学びたい方におすすめです!

 

1.HTMLは何のための言語?

 

HTMLとは、Webサイトを構築する際に、

Webページの土台を作成するための「マークアップ言語」です。

主に、Webページに表示される「文字や画像」やページの「骨組み」を作成するために用いられます。

 

実際のHTMLは以下の画像のように記述されます。

HTML (1)

 

HTMLは主にCSSと共に用いられる

 

あくまでもHTMLはWebページの骨組みにすぎません。

HTMLだけで作成されたWebページは、

非常に簡素で味気なく、使いづらいものになってしまいます。

 

そのため、Webサイトを作る場合には、

CSSという「スタイルシート」を一緒に使用します。

CSSは、文字や背景の色や大きさなどのデザインやレイアウトを作る言語です。

 

Webサイト製作においては、

「HTMLでページの土台を作り、CSSでデザインをする」という

工程をたどります。

 

HTMLコーディングで必須のツール

 

HTMLを書いていく際には、

・テキストエディタ

・ブラウザ

を必ず用意してください。

 

テキストエディタは、コードを書く時に使います。

作成したHTMLの完成度を確認する時に、ブラウザ上で表示させます。

 

テキストエディタもブラウザも、何を使っても大丈夫です。

 

私は、

・テキストエディタ:「Atom」

・ブラウザ:「Google Chrome」

を使用しています。

 

Google ChromeでHTMLを表示させる方法

 

作成したHTMLをGoogle Chrome上で表示させて確認する方法は、

  • 「HTMLファイルを作成」
  • 「①のHTMLファイルを、Google Chrome上にドラッグ&ドロップ」

です。

 

HTMLファイルには、末尾に「.html」を付けましょう。

 

HTML(2)

上の画像のようなHTMLファイルを作成。

 

ファインダー

 

ここではファイル名を「index.html」にしました。このファイルを、Google Chrome上のどこでもいいので、ドラッグ&ドロップしてください。

 

ブラウザ表示

 

すると、このように作成したHTMLが表示されます。

 

2.HTMLの基本文法

 

HTMLのプログラミング作業では、「タグ」と呼ばれるものを駆使してコーディングを行います。タグとは、以下の画像の「<h2>~</h2>」のような「<>」です。

 

HTML(3)

 

HTMLでは、「タグで文字や画像などを挟む」というのが基本的な文法となります。

 

下の画像のように、「こんにちは!」と表示させたい場合には、

「こんにちは!」という文字列を「<h2></h2>」で囲みます。

 

ちなみに「<h2>」は見出しを記述するためのタグです。

前半の「<h2>」の部分を開始タグといい、

後半の「</h2>」を終了タグといいます。

また、タグで囲まれた部分は「要素」と呼ばれます。

 

基本となるタグの種類には、以下のようなものがあります。

 

HTML(4)

 

3.HTMLの基本構造

 

ファイルの先頭部分には、必ず以下のように記述します。

 

HTML(5)

 

一番初めにある <!DOCTYPE html> は、このファイルがHTML文書であることを宣言しています。

 

さらに、<html>~</html>で、コード全体を囲みます。

このタグは、

「ここからここまでがhtmlのコードだよ」

ということを表すために記述されます。

 

また、<head>~</head>には、そのWebページの基本情報を記述します。

その中には、ページのタイトルなどが含まれます。

ここでは「HTML」がこのページのタイトルとなります。

基本的にheadタグで囲まれた部分は、

ブラウザ上に表示されないので、ユーザーの目に入ることはありません。

あくまでもWebページの目に見えない部分の設定を行う部分であることを覚えておきましょう。

 

ユーザーの目に映る部分は、<body>~</body>で囲まれた部分です。

そのため、Webページの内容は、bodyタグ内で記述されます。

 

4.分からないことがあればプロのエンジニアを頼ろう!

 

HTMLは初心者でも比較的に習得が容易な言語です。

ですが、より高度なコーディングをしていくにつれて、次第に難しくなっていきます。

多くの人が挫折するのは、「HTMLの基本」を学び終えた後です。

 

さらに、独学をしている人にとっては、

「いくら考えても理解できずになかなか前に進めず、ただ時間だけが過ぎていく」状況に陥りやすのも現実です。

 

そんな時には、この道のプロである現役エンジニアに質問する、教えてもらうことが良いでしょう。

 

中でもおすすめなのが、「AITECHCAMP」です。

 

このスクールでは、現役のフリーランスWebデザイナーに、

直接レクチャーしてもらうことができます。

学習に行き詰ったとしても、丁寧に教えてもらえるので、

より効率的に短期的で習得することが可能になります。

 

また、「WEBクリエイターコンサルプラン6ヶ月コース」では、

Webサイト製作に関するスキルを網羅的に深く学べるので、

Webデザイナーや自身のサイトを運営したい人にとってはおすすめです。

 

5.まとめ

 

今回は、「HTMLの基本」について解説しました。

 

本記事で説明したことは、まだHTMLの初歩の初歩です。

ですが、HTMLはそれほど難しい。

言語ではないので、とっつきやすさが売りの言語でもあります。

 

これからHTML/CSSの学習を始めようと思っている方、

Webデザインに興味がある方にとって参考になれば幸いです。