プログラミング

【HTML初心者向け】HTMLの概念からウェブサイト・ホームページの作り方

2020年9月18日

今回はプログラミングで1番最初に学ぶであろうプログラミング言語「HTML」について、HTMLの概念や考え方から実際にHTMLを使ってプログラミングを行う方法について解説していきたいと思います。

プログラミングは色んなことを覚えたりと何となく難しいという印象を持たれがちですが、実際やってみると基本的な作り方は同じですし、よく使うタグとほとんど使わないタグがあったり以外にそこまで多くのことを覚える必要がありません。

色や動きを付けて、自分の思い通りにウェブサイトを作れると、もっと色々試したくなっちゃいます。何より自分がプログラミングしたものが、実際にブラウザを通して表示されるとちょっと感動します。

この記事を読んで、HTMLに興味を持たれたら是非試してみてください!

Webサイト・ホームページの仕組み

最初にWebサイト・ホームページの仕組みについて話していきたいと思います。

まずは普段から目にしているウェブサイトがどんな感じで作られているかみてみましょう。

上記の画像は当ブログのトップページになります。このトップページがどう作られているかみていきます。

ちょっとゾッとしますよね。

ウェブサイトはHTMLを使ってブラウザでウェブサイトを閲覧した時に、人間が理解できるデザイン、画像、テキストが理解できるようになっています。

ソースコードを表示したり、どんなCSSが当たっているかを確認するのに便利なChromeデベロッパツールの使い方は下記の記事でまとめています。是非参考にしてみてください。

こちらもCHECK

Chromeの検証機能(デベロッパーツール)の使い方
Chromeの検証機能(デベロッパーツール)の使い方

続きを見る

HTMLとは

HTMLとは

HTML(HyperText Markup Language)はエイチティーエムエルと読みます。プログラミングを学ぶ上で1番メジャーな言語であり、皆さんが普段インターネット検索で閲覧しているウェブサイトのほとんどがHTMLで構成されています。

ハイパーテキスト(HyperText)はWordやExcelであるように、クリックすると対象のページに遷移する下線が付いた青文字のことです。Markupは「目印をつける」という意味です。Languageはそのまま言語と考えます。

HTML(HyperText Markup Language)はハイパーテキスト(HyperText)に印をつける(Markup)言葉(Language)になります。

HTMLタグとは

HTMLタグとは

実際にハイパーテキスト(HyperText)に印をつける(Markup)ことを行っているのがHTMLタグになります。

<開始タグ>文字が入ります</終了タグ>

HTMLではタグを使って、文字に意味を持たせることをします。具体的には、文字の前後に「開始タグ」「終了タグ」をつけて囲うことで意味を持たせます。

終了タグには<>の中に「/(スラッシュ)」を必ず入れる必要があります。

よく終了タグを付け忘れていたり、スラッシュが抜けてることで表示崩れが起きることがあるので注意しましょう。
例:</h1>、</p>、</li>

代表的なHTMLタグの種類

代表的なHTMLタグの種類

ここではよく使う代表的なHTMLタグをあげていきたいと思います。

【見出し】
<h1>HTMLとは</h1>

【段落】
<p>HTMLはタグを使って文字に意味を持たせることができます。</p>

【リスト】
<ul>
<li>見出し</li>
<li>段落</li>
<li>リスト</li>
</ul>

【リンク】
<a href="https://nuko-blog.net/">nuko-blog</a>

【画像】
<img src="https://nuko-blog.net/wp-content/uploads/2020/06/laptop-2557468_1280-640x360.jpg">

例えば「h1」は見出し、「p」は段落、「ul」「li」はリストの意味を持たせるHTMLタグになります。その他にもウェブサイト内のページに遷移させるための「a」リンクタグや画像を表示させる「img」タグがあります。

上記以外にもそれぞれ文字に対して色々な意味を付与する多くのHTMLタグがあります。

利用頻度が多いHTMLタグは下記の記事でまとめていますので、是非参考にしてください。

こちらもCHECK

【HTML初心者向け】HTMLの基本を勉強する!HTMLでよく使う必須タグ
【HTMLの超基本】HTMLでよく使う覚えておきたい必須タグ23選

続きを見る

HTMLの書き方

HTMLの書き方
<!DOCTYPE html>
<html>
<head>
<title>Webページのタイトルが入ります</title>
<meta charset="UTF-8">
<meta name="description" content="Webページの説明文が入ります">
<meta name="keywords" content="キーワードが入ります,キーワードが入ります">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="wide.css" title="wide style">
<link rel="alternate stylesheet" href="contrast.css" title="contrast style">
</head>
<body>
<h1>1番大きい見出し</h1>
<p>1番大きい見出し</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>

上記のHTMLを元にHTMLの書き方を説明していきたいと思います。

HTMLの書き出しは定型文を入れる

<!DOCTYPE html>
<html>
〜〜省略〜〜
</html>

HTMLの書き出しは必ず<!DOCTYPE html>というタグを記載します。その次は文書全体を<html></html>で囲います。

<!DOCTYPE html>はこの文書はHTML文であることを示す宣言文になります。お決まりの定型文と考えて必ず入れるようにしましょう。

HTMLは頭<head>と体<body>でできている

<!DOCTYPE html>
<html>
<head>
〜〜省略〜〜
</head>
<body>
〜〜省略〜〜
</body>
</html>

<!DOCTYPE html>タグで宣言を行ってから、<html>タグで文書全体を囲った中は<head>と<body>で囲います。

<body>タグの中に「h1」見出し、「p」段落、「ul」「li」リストなどの実際のコンテンツ部分のHTMLを記述していきます。

<head></head>
検索エンジンで表示するタイトルや説明文、CSS・JavaSriptファイル、文字コードの指定に関する記述を書きます。

<body></body>
実際にコンテンツとして表示するテキスト・画像などの記述を書きます。

文書全体はheadタグ・コンテンツはbodyタグに記述する

<!DOCTYPE html>
<html>
<head>
<title>Webページのタイトルが入ります</title>
<meta charset="UTF-8">
<meta name="description" content="Webページの説明文が入ります">
<meta name="keywords" content="キーワードが入ります,キーワードが入ります">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="wide.css" title="wide style">
<link rel="alternate stylesheet" href="contrast.css" title="contrast style">
</head>
<body>
〜〜省略〜〜
</body>
</html>

文書全体に関する記述は<head>タグ内に記述していきます。具体的には以下などが当てはまります。

<title></title>:Webページのタイトル
<meta charset>:文字コードの指定
<meta name="description" content="~">:Webページの説明文
<meta name="keywords" content="~">:Webページのキーワード
<link rel="~">:CSS・JavaSriptファイルまたはその他の外部ファイル

<!DOCTYPE html>
<html>
<head>
〜〜省略〜〜
</head>
<body>
<h1>1番大きい見出し</h1>
<p>1番大きい見出し</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<p><a href="https://nuko-blog.net/"><img src="https://nuko-blog.net/wp-content/uploads/2020/06/laptop-2557468_1280-640x360.jpg"></a></p>
</body>
</html>

文書のメインコンテンツに関する記述は<body>タグ内に記述していきます。具体的には以下などが当てはまります。

<h1></h1>〜<h6></h6>:見出し
<p></p>:段落
<ul></ul>、<li></li>:リスト
<a></a>:リンク
<img src>:画像

まとめ

今回はHTMLに関する概念から実際にHTMLで文書を書く際の大きな流れを解説しました。

これをベースにHTMLでプログラミングを始めてスキルアップを目指していってください。

もっと細かい部分の記述方法などは別記事で書いていこうと思います。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-プログラミング

© 2021 nukoblog