Home > 記事一覧 > 【初心者必見】HTMLの基本〜ゼロから始めるウェブサイト〜
このエントリーをはてなブックマークに追加
ホームページ制作

【初心者必見】HTMLの基本〜ゼロから始めるウェブサイト〜

クイックゼロの原田です、あなたはWordPress(ワードプレス)などでウェブサイトを制作していくうちに「HTMLを覚えたい!!」と考えたことがあるでしょうか? そんな今回の企画は「【初心者必見】HTMLの基本〜ゼロから始めるウェブサイト〜」と題しまして、HTMLをこれから覚えていきたい方や、HTMLの基本的な部分をおさらいしていきたい方に向けて、HTMLの基本的な部分を数回に分けてご説明させていただきます。

HTMLとは

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。ウェブサイトを作成する言語においてウェブの基礎を作っていると言えるマークアップ言語の1つです。 ウェブサイトにおいて文字の部分がHTMLで書かれていると考えていただいて問題ありません。 ここまでのご説明でピンときた方もいらっしゃると思いますが、現在インターネット上に公開されているウェブサイトにおいて、HTMLを使用していないウェブサイトはほとんど存在しません。 それだけHTMLはウェブサイトを制作する際に重要な言語といえます。そのため、ウェブサイトを制作するにあたって、必ず覚えておく必要があります。もちろんHTMLのみではウェブサイトは形作ることはできません。 HTMLとともに、CSSも覚えておきましょう。 HTMLが土台とするならば、CSSはサイトのデザインを構成する言語なので、基本的にはHTMLとCSSの2つを組み合わせていくことでウェブサイトを制作していきます。

基本的な書き方

世に言うプログラムというものはとても難しいというイメージが付いています。 ウェブサイトではありませんが、プログラムの言語で代表的なものとして「Java」が挙げられます。試しにJavaを使用して画面上に「こんにちは」と表示させるプログラムを書いてみましょう。

	public class Main {
		public static void main(String[] args) {
			System.out.println(“こんにちは”) ;
		}
	}

いかがでしょうか?「こんにちは」と書くだけでこれだけのことを書かなくてはなりません。HTMLでは、Javaとは全く違った書き方をします。 HTMLでは「タグ」というものを使用します。例えば、Javaにおいて文字を表示させる部分は「System.out.println(“こんにちは”)」にあたります。パッとみたかんじではなんだかよくわからない部分があると思います。一方、HTMLにおける文字を表示させる部分(タグ)は「<p>こんにちは</p>」となります「こんにちは」という文字を挟んでいる「<><>」がタグというものです。 いかがでしょうか?HTMLに対して抱いていた「ハードルが高い」というイメージは少し和らいだのではないでしょうか。 それでは簡単なHTMLのコードをご覧いただき、それを元に基本的な構成をご説明させていただきます。

HTMLの基本的な構成

それではまず、こちらの文書をご覧ください。

	<!DOCTYPE html>
	<html>
	<head>
		<title>サンプルコード </title>
	</head>
	<body>
		<h1>練習</h1>
		<p>ここに好きな文字を入力してみましょう</p>
	</body>
	</html>

それでは上記のコードを元に解説に移りたいと思います。

HTML文書に必要な要素

	<!DOCTYPE html>

まず一番最初に書かれている「<!DOCTYPE html>」というものですが、これは「このファイルはHTMLのファイルです」という宣言を行っています。

	<html></html>

次に「<html>」というタグですがタグには「開始タグ」と「終了タグ」というものがあります開始タグは「<タグ名>」、終了タグは「</+タグ名>」となります。 つまり、htmlタグでは開始タグは「<html>」、終了タグは「</html>」ということになります。ただし「<!DOCTYPE html>」については終了タグが存在しません。 またhtmlタグはタグ内にHTMLコードを記入していくので <html>←開始タグ この中にHTMLコードを記入します。 </html>←終了タグ

	<head></head>

<head>タグ内の情報は基本的にはWebページ上に表示されることはありません。 「フォントの設定」や「CSSファイルの読み込み設定」などの設定を書き込む場所です。

	<title></title>

<title>タグは文字通りウェブサイトのタイトルを意味します「この文字がタイトルです」とブラウザや検索エンジンなどに伝える役割を担っています。 検索結果に表示されるページのタイトルや、ブラウザのタブに表示されるページ名も基本的には<title>タグ内のものが使われています。

	<body></body>

ウェブサイト上に表示されるものは<body>タグ内のものだけです。

その他のタグ

今まで紹介したものは紹介したタグは<HTML>を記入する際に必ず必要となるタグです。 これらの他に先ほどのコード内に登場したタグには今のものがあります。

	<p></p>

pタグは文章、段落を表示させるタグですそのため最も使用されるタグだと言えます。

	<h1~6></h1~6>

h1~6タグは見出しを作成する際に使用します。hの次に書かれている数字ですがこの数字が大きくなれば大きくなるほど見出しのサイズが大きくなります。
今回のサンプルコードに登場したタグ以外にも様々なタグが存在しますが、それらの紹介は次回とさせていただきます。

実際にサンプルコードの表示、編集をしてみよう

それでは実際にサンプルコードをブラウザで表示してみたり、コードの中身を簡単に編集してみましょう。今回以下のツールを使用します。

  • ブラウザ(この記事ではFirefox)
  • テキストエディタ(この記事ではSublime Text使用します)

それでは以下の手順でおこなってください。

まずはサンプルコードのコピーを行いましょう。

サンプルコードはこちら↓になります。

	<!DOCTYPE html>
	<html>
	<head>
		<title>サンプルコード </title>
	</head>
	<body>
		<h1>練習</h1>
		<p>ここに好きな文字を入力してみましょう</p>
	</body>
	</html>
  1. テキストエディタを起動し、サンプルコードを貼り付けて保存しましょう。
  2. この時、拡張子(ファイルの末尾の「.◯◯◯」の部分)は「.html」にしておきましょう。
  3. ブラウザに保存したファイルをドラッグまたは展開します。
    いかがでしょうか?おそらくコードではなく「Webページ」として表示されたのではないでしょうか。 それではここから少しステップアップしてコードの編集をしてみましょう。

テキストエディタに戻って、h1やpタグ内の文章を好きなものに変えたりh1タグの数字を変えてみるのもいいでしょう。 文章を変えたら上書き保存をして、ブラウザに戻り、再読み込みをしてみましょう。おそらく文章が変わったことと思います。

今回のまとめ

いかがでしたか?今回の企画をきっかけにHTMLのイメージが少しでも変わっていただければ幸いです。こういった専門的なものは最初の一歩が肝心です。 実際にHTMLのコードに触れて、この記事を読む前よりもHTMLに対し感じていた壁が少しでも薄くなればと思い今回の記事を書いてみました。
次回の企画ではHTMLにおいて頻出するであろうタグについて深く掘り下げていこうと思います。 それでは最後に今回の企画のおさらいをしておきましょう。今回の企画のポイントを絞って2つのポイントにまとめました。

今回のポイント

  • HTMLとはウェブの基礎の部分を形作る重要な言語
  • タグを使用してコードを記述していく

クイックゼロのレンタルホームページは充実のサポート対応

レンタルホームページ、クイックゼロならサーバーやドメインの取得といった面倒な手続きは一切不要です。 簡単、低価格であなたのホームページを作成することができます。基本プランでは、ドメインは「.com/.net/.org/.biz/.info」の中からお選び頂けます。 また、ホームページの活用方法や集客方法などは、専門のスタッフもいるのでサポートやアフターフォローもついています。 もしあなたが、経営者・個人事業主・ウェブ担当者でこれからホームページを作成しようと思っているなら、簡単、低価格であなたのホームページを作成することができる、レンタルホームページ、クイックゼロを検討してみてください。  ちなみに、当社では本格的なホームページを月々5,000円から利用できるレンタルホームページというサービスを行なっていますが、はじめから美しいデザインになるように計算されたホームページのテンプレートがあります。 もしあなたが、これから何かしらのテーマのホームページを作ろうとされている方なら、ぜひ一度覗いてみてください。

このエントリーをはてなブックマークに追加

最近書いた関連記事