HTMLの基礎の基礎を学ぶ

最近はWordPressのような初心者でも扱いやすいCMSがあることで、HTMLが良くわからない人でも簡単に自分のオリジナルサイトが作れるようになっています。

ただ、HTMLでサイトを作る場合でもWordPressでサイトを作る場合でも、自分の好きなようにカスタマイズしていくにはHTMLやCSSの知識が必要になります。

HTMLのタグを全て覚える必要はないですし、タグ打ちでサイトを作る必要もないのですが、基本的なルールは頭に入れておいた方が何かと便利ですので、初心者向けにHTMLの基礎を学ぶための方法を解説していきます。

本当はHTMLの参考書を一冊購入して基礎を学ぶのが良いと思いますが、本は色々な情報が詰まっているため、難しいと感じて途中で挫折してしまうかもしれませんので、基礎の基礎を学び実践していくのが良いと思います。

»CSSの基礎の基礎はこちら

HTMLの基本構造を学ぶ

はじめにHTMLというものが何なのかという事を学んでも良いのですが、あまり難しく考えずにHTMLの「html」「head」「body」と言った骨格部分を覚えるのがいいでしょう。

まずは色々なサイトのHTMLを見てみましょう。ブラウザでサイトのHTMLソースを見ることができます。

Internet Explorerであれば、HTMLを表示したいサイトにアクセスして、ツールバーの「表示 ⇒ ソース」で見られます。FirefoxやChromeであれば、キーボードのCtrl+Uでソースが表示されます。

image01

これが当サイトのHTMLです。初めて見た方は全く意味がわからないと思いますが、こういった文字情報をブラウザが読み込んで人間が見やすいように整形しているのです。

HTMLの基本構造は、以下のようになっています。

<html>
<head></head>
<body></body>
</html>

htmlというタグの中にheadタグやbodyタグがあります。

headタグの中にはtitleタグやmetaタグが記述され、bodyタグの中にサイトのコンテンツなどが記述されています。headタグ内に書かれた情報はサイト上には表示されません。

良く使うタグを覚える

サイトに表示したい物はbodyタグ内に書いていくことになりますが、その際に必要になってくるのが以下のタグです。

  • h1、h2、h3タグ・・・見出し
  • p、brタグ・・・段落、改行
  • ul、olタグ・・・リスト
  • imgタグ・・・画像
  • aタグ・・・リンク

この5つが良く使うタグです。これだけ覚えておけば困ることはないと思います。

<h1>大見出し</h1>
<p>文章がここに入ります。</p>
<h2>見出し</h2>
<p>文章がここに入ります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
<img src=”画像のURL” alt=”画像の説明”>
<a href=”リンク先のURL”>リンク先の説明</a>
<p>文章がここに入ります。</p>

body内では、このような感じでタグが並んでいきます。

見出しタグはh6まで使うことができますが、一般的にはh3やh4ぐらいまでしか使われていません。

ulタグとolタグはどちらもリストを表すタグですが、順列があるリストの場合はolタグを使います。

imgタグは画像を表すタグで、「src=””」の部分に画像のURLを指定します。altは無くても良いですが、画像の説明文を入れるのが一般的です。

aタグはリンクを表すタグで、「href=””」にはリンク先のURLを記述します。イメージリンクにしたい場合には、aタグでimgタグを囲います。

マークアップを練習する

最低限のタグを覚えたらマークアップの練習をしていきます。

image03

Windowsであればメモ帳などのテキストエディタを開きHTMLを書いていきます。完成したら、適当にファイル名をつけて、拡張子を「.html」にして保存します。

image04

作成したhtmlファイルをブラウザで見るとこのようになります。超シンプルですが、これをサーバーにアップすればインターネット上でこのページが見られるようになります。

見出しタグは自動的に文字が大きくなり、リストタグは箇条書きのようになります。一応形になっていますが、そっけないページですので、見栄えを良くするためにCSSを使います。CSSで見出しタグやリストタグを装飾することで、綺麗なページが作れます。

作ったページをCSSでデザインするとこのようになります。

まとめ

これがHTMLのスタートです。一辺に色々と覚えようとすると頭がパンクしてしまいますし、ホームページビルダーのように安いホームページ作成ソフトもありますので、タグ打ちでサイトを作る人はあまりいません。

私はHTMLを覚える前に、Dreamweaverという作成ソフトの使い方を覚え、その過程でHTMLやCSSを理解して行きました。頭で考えるよりも体で覚えてしまった方が良いと思いますので、ホームページ作成ソフトを使う場合には、このページで紹介したHTMLの基礎の基礎がわかった時点で、作成ソフトの使い方を学ぶのが良いかもしれません。

自分の満足が行くサイトが作れるようになるまでには、ある程度の経験が必要になりますが、いくつかサイトを作っているうちにいつのまにか必要な知識やスキルは付いていきます。コツコツと続けていけばそれほど難しいものではありませんので、諦めずに頑張って行きましょう。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年2月16日

サブコンテンツ

このページの先頭へ