4月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
3月生は満員となっております。4月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

みなさんは、プログラミングの勉強を始めたり、Webサイトを自分で作成してみたいとは思っていませんか?

今回の記事では、Webサイト制作をするにあたり、hTMLを使ったコーディングの方法について解説していきます。

はじめに

タグを使って(マークアップ)コーディングしていくことは、それ自体は知っていても自分の目指すデザインに対してどういったアプローチを取ればいいかは、スムーズに思いつくにはやはり慣れが必要です。
まずはコーディングする際の決まった流れ、基本的なところを押さえて頂ければと思います。

作業前の準備1(テキストエディタの導入)

専用のアプリケーションソフトもありますが、まずは自身の手で全てやってみて慣れていくために、テキストエディタをおすすめします。

基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションが標準で入っているかと思います。
しかし、それら標準のソフトではなく、テキストエディタを使うことで便利な機能が多く効率的にコーディングを行うことができます。
文字フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。

ご自身で慣れているものや有名なもの、無料のものでも大丈夫ですので、お好きなテキストエディタをインストールしてみてください。

例)秀丸エディタ、サクラエディタ、TeraPadなど

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。

こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

作業前の準備2(Webブラウザの導入)

Webブラウザとは、テキストエディタに記述したhTML言語を解釈してパソコンのモニターに表示するアプリケーションソフトのことです。
Windowsのパソコンには標準で「Internet Explorer」、Macには標準で「Safari」があります。
もちろんそれら標準のブラウザでもいいですし、他のブラウザでもいいので好みのブラウザを選んでみてください。

例)Firefox、Google Chrome、Operaなど

注意)
Webブラウザはお好きなものでモニターに表示しながらhTMLを学習可能ですが、ブラウザによって表示の表現が違ったり、hTMLの機能で対応していないものがあったり、多少挙動が変わってきます。
ある程度慣れてきたら、各種ブラウザそれぞれでどう表示されるか、その違いを踏まえてコーディングすることを考える必要もあるかもしれません。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

hTMLを書くということ

タグ

hTML言語は「タグ」を使って記述していきます。一般社会でいうと「タグ」とは荷札の意味を持っていて、その物がどうような内容の物であるのかを表しています。身近なもので服や靴などの商品についている荷札がありますが、hTMLでは「目印」として使用します。

タグの記述

hTMLタグの記述は要素名を入れた < >【カッコ】でコンテンツ(内容)を挟むのですが、大切なルールとしてコンテンツの前には「開始タグ」、コンテンツの後ろには「/(スラッシュ)」を加えた「終了タグ」でコンテンツを挟みます。(一部例外はあります)

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

タグの書き方

具体的にタグを記述するとはどういうことでしょうか。いくつかの例でイメージをつかんでいただければと思います。

hTMLの骨格(htmlタグ)、文書のヘッダ部(headタグ)、文書タイトル指定(titleタグ)

ホームページ制作において、最初に記述するのがhTMLタグを使った「hTMLの骨格」です。これはホームページを形成する上でとても重要なもので、人でいうと全身を支える骨の部分になります。

以下の例では、<html>タグで全体を囲み、<head>と<body>の2つのタグが<html>タグ内に記載されています。この<html>~</html>に囲まれた部分がhTMLの骨格、つまりhTML 文書であることを指定することになります。

<head>は、文書のヘッダ部を指定します。<head>~</head> で囲んだ部分がヘッダ部になります。ヘッダ部には、この文書全体に関する指定などを書きます。

<title>は、文書のタイトルを指定します。のヘッダ部内(<head>~</head>)に一度だけ記述します。タイトルは、ブラウザのツールバー、履歴(お気に入り)メニュー、検索エンジンの検索結果などで表示されます。必ず指定するようにしましょう。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;タイトル部分&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 ここが本文です。
 &lt;/body&gt;
&lt;/html&gt;
[EOF]
・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

文書の文字コード(キャラクタセット)を宣言(metaタグ)

metaとは、 METAinformation(メタ情報)の略です。
「機能追加の情報」と考えてください。hTML文書全体に適用するさまざまな情報を指定します。

ここでは、文書の文字コードを宣言する方法を例に挙げます。
以下の例では、四種類の文字コード(キャラクタセット)の指定方法を示しています。
「charset=」に使用したいキャラクタセットを指定します。

例)

 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=Shift_JIS&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=euc-jp&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-2022-jp&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;

metaタグでは、他にもキャッシュの有効期限やキャッシュ制御、検索ロボット制御などさまざまな
機能があります。ぜひ試してみてください。

リンクする(aタグ)

a はアンカー(Anchor)の略です。

<a href="...">~</a>という師弟は、指定ページに移動したり、指定メールアドレスに対するメールソフトを起動したりする目的で使用されます。
<a name="...">~</a> の形式は、ページの中の指定した個所にジャンプするための目印となる名前を設定します。

以下に例を示します。

例)
[ソース]

&lt;a href=&quot;http://xx.yy.zz/index.html&quot;&gt;リンク先にジャンプ&lt;/a&gt;
&lt;a href=&quot;index.html&quot;&gt;同フォルダのindex.htmlにジャンプ&lt;/a&gt;
&lt;a href=&quot;../xxx/index.html&quot;&gt;xxxフォルダのindex.htmlにジャンプ&lt;/a&gt;
&lt;a href=&quot;index.htm#XYZ&quot;&gt;同フォルダのindex.htmlにジャンプし、特定位置「XYZ」を表示する&lt;/a&gt;
&lt;a href=&quot;#XYZ&quot;&gt;同じファイル内の特定位置「XYZ」を表示する&lt;/a&gt;
&lt;a href=&quot;mailto:xyz@xxx.yyy.zzz&quot;&gt;指定メールアドレスにメールを送信&lt;/a&gt;
※メールソフトが設定してある環境のみ
[表示]

ブロック要素(divタグ)

<div>はブロック要素を示します。
divタグ自体で表示方法などが変わったりは特にしないのですが、<div>〜</div>で囲んだ範囲を対象に特定のフォントを指定したりするのに用います。

同様なタグに<span>がありますが、<div>はブロック要素(一般的に前後に改行がはいる様な要素)として、 <span>はインライン要素(一般的に前後に改行が入らない要素)として定義されています。

以下に例を示します。

例)
[ソース]

&lt;div style=&quot;border:1px solid gray;text-align:right;width;200px;&quot;&gt;
右寄せ
&lt;/div&gt;
[表示]

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

簡単なページを作成してみましょう

簡単なサンプルソースを表示したものが以下です。
ソースを参考にしてご自分でいろいろ修正し、ページがどう変わるか試してみてください。

サンプルファイルのダウンロードはこちらから行ってください。

サンプルファイル


&lt;!DOCTYPE hTML PUBLIC &quot;-//W3C//dtD hTML 4.01 Transitional//EN&quot; &quot;http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd&quot;&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//dtD hTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;hTML lang=&quot;ja&quot;&gt;
&lt;head&gt;
 &lt;meta content=&quot;IE=11.0000&quot; http-equiv=&quot;X-UA-Compatible&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=Shift_JIS&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
 &lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
 &lt;meta name=&quot;keywords&quot; content=&quot;キーワード1,キーワード2,キーワード3&quot;&gt;
 &lt;meta name=&quot;description&quot; content=&quot;このページに関する簡単な説明。&quot;&gt;
&lt;link href=&quot;ページのタイトル.files/type3_layout.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;tittle&gt;ページのタイトル&lt;/tittle&gt;
&lt;/head&gt;
&lt;body&gt;&lt;!-- コンテナ開始 --&gt;
 &lt;div id=&quot;container&quot;&gt;
 &lt;!-- ページ開始 --&gt;
 &lt;div id=&quot;page&quot;&gt;
 &lt;!-- ヘッダ開始 --&gt;
 &lt;div id=&quot;header&quot;&gt;
&lt;h1 class=&quot;siteTitle&quot;&gt;サイトタイトル&lt;/h1&gt;
  &lt;STRONG&gt;サイトのキャッチフレーズ&lt;/STRONG&gt;
   &lt;ul class=&quot;guide&quot;&gt;
    &lt;li class=&quot;first&quot;&gt;&lt;a hred=&quot;faq.html&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;access.html&quot;&gt;アクセス&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;sitemap.html&quot;&gt;サイトマップ&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul class=&quot;nl clearFix&quot;&gt;
    &lt;li class=&quot;first&quot;&gt;&lt;a hred=&quot;inex.html&quot;&gt;ホーム&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;service.html&quot;&gt;サービス内容&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;jisseki.html&quot;&gt;制作実績&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;kingaku.html&quot;&gt;料金表&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;about.html&quot;&gt;会社案内&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;last&quot;&gt;&lt;a hred=&quot;inex.html&quot;&gt;お問い合わせ&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul class=&quot;spotlight&quot;&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;注目情報その1 キャンペーン実施中&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;注目情報その2 特別セール開催&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;注目情報その3 プレゼント情報&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;hr class=&quot;none&quot;&gt;
 &lt;/div&gt;
 &lt;!-- ヘッダ終了 --&gt; &lt;!-- コンテンツ開始 --&gt;
 &lt;div id=&quot;content&quot;&gt;
 &lt;!-- メインカラム開始 --&gt;
 &lt;div id=&quot;main&quot;&gt;
&lt;div class=&quot;section emphasis&quot;&gt;
&lt;h2&gt;このページについて&lt;/h2&gt;
 このページは、サンプルです。
 &lt;a hred=&quot;index.html&quot;&gt;前のページに戻る&lt;/a&gt;
 &lt;/div&gt;
&lt;div class=&quot;section normal update&quot;&gt;
&lt;div style=&quot;border: 3px solid #cccccc; padding: 10px; background: #ffffff;&quot;&gt;・HTMLをもっと楽に使いたい人は&lt;a href=&quot;https://web-camp.io/magazine/archives/7719&quot;&gt;&lt;span&gt;【HTML初心者入門】無料で使えるおすすめのツール・ソフト○選!&lt;/span&gt;&lt;/a&gt;を参考にしてみてください。&lt;/div&gt;

&lt;h2&gt;新着情報&lt;/h2&gt;
&lt;dl class=&quot;clearFix&quot;&gt;
    &lt;dt&gt;2017/08/03&lt;/dt&gt;
    &lt;dd&gt;サンプルテキスト、サンプルテキスト、サンプルテキスト。&lt;/dd&gt;
    &lt;dt&gt;2017/07/25&lt;/dt&gt;
    &lt;dd&gt;サンプルテキスト、サンプルテキスト、サンプルテキスト。&lt;/dd&gt;
    &lt;dt&gt;2017/07/15&lt;/dt&gt;
    &lt;dd&gt;サンプルテキスト、サンプルテキスト、サンプルテキスト。&lt;/dd&gt;
    &lt;dt&gt;2017/06/10&lt;/dt&gt;
    &lt;dd&gt;サンプルテキスト、サンプルテキスト、サンプルテキスト。&lt;/dd&gt;
    &lt;dt&gt;2017/06/05&lt;/dt&gt;
    &lt;dd&gt;サンプルテキスト、サンプルテキスト、サンプルテキスト。&lt;/dd&gt;
   &lt;/dl&gt;
 &lt;/div&gt;
&lt;div class=&quot;section normal&quot;&gt;
&lt;h2&gt;ページ内容について&lt;/h2&gt;
 ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分で変更してみてください。
 &lt;/div&gt;
&lt;div class=&quot;section normal&quot;&gt;


&lt;h2&gt;カスタマイズ&lt;/h2&gt;
 色の変更、画像の加工、メニュー項目の変更など、テンプレートの編集を楽しんでください。
 &lt;a hred=&quot;index.html&quot;&gt;ご案内&lt;/a&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;!-- メインカラム終了 --&gt; &lt;!-- サイドバー(A)開始 --&gt;
 &lt;div id=&quot;nav&quot;&gt;
&lt;div class=&quot;section subMenu&quot;&gt;
&lt;h2&gt;サブメニュー1&lt;/h2&gt;
&lt;ul class=&quot;nl&quot;&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;h2&gt;サブメニュー2&lt;/h2&gt;
&lt;ul class=&quot;nl&quot;&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サンプルメニュー&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
 &lt;/div&gt;
&lt;div class=&quot;section strong&quot;&gt;
&lt;h2&gt;ピックアップ&lt;/h2&gt;
 &lt;a hred=&quot;inex.html&quot;&gt;特に告知したいコンテンツに対してここからリンク。&lt;/a&gt;
 ピックアップコンテンツに関する簡単な説明をここに記載。
 &lt;/div&gt;
&lt;div class=&quot;section emphasis&quot;&gt;
&lt;h2&gt;ピックアップ&lt;/h2&gt;
 &lt;a hred=&quot;inex.html&quot;&gt;特に告知したいコンテンツに対してここからリンク。&lt;/a&gt;
 ピックアップコンテンツに関する簡単な説明をここに記載。
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;!-- サイドバー(A)終了 --&gt;
 &lt;hr class=&quot;clear&quot;&gt;
 &lt;/div&gt;
 &lt;!-- コンテンツ終了 --&gt; &lt;!-- サイドバー(B)開始 --&gt;
 &lt;div id=&quot;aside&quot;&gt;
&lt;div class=&quot;section strong&quot;&gt;
&lt;h2&gt;ピックアップ&lt;/h2&gt;
 &lt;a hred=&quot;inex.html&quot;&gt;特に告知したいコンテンツに対してここからリンク。&lt;/a&gt;
 &lt;/div&gt;
&lt;div class=&quot;section pickup&quot;&gt;
&lt;h2&gt;ピックアップリスト&lt;/h2&gt;
&lt;ul class=&quot;nl&quot;&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;ピックアップコンテンツ1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;ピックアップコンテンツ2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;ピックアップコンテンツ3&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
 &lt;/div&gt;
&lt;div class=&quot;section emphasis&quot;&gt;
&lt;h2&gt;ピックアップ&lt;/h2&gt;
 &lt;a hred=&quot;inex.html&quot;&gt;特に告知したいコンテンツに対してここからリンク。&lt;/a&gt;
 &lt;/div&gt;
&lt;div class=&quot;section normal&quot;&gt;
&lt;h2&gt;サポート&lt;/h2&gt;
 情報欄です。
 &lt;/div&gt;
&lt;div class=&quot;section normal contact&quot;&gt;
&lt;h2&gt;お問い合わせ&lt;/h2&gt;
 &lt;a hred=&quot;inex.html&quot;&gt;お気軽にお問い合わせください。&lt;/a&gt;
 TEL 03-0000-0000
 営業時間 平日 9:00~18:00&lt;BR&gt;(定休日 土日祝)
 &lt;/div&gt;
&lt;hr class=&quot;none&quot;&gt;
 &lt;/div&gt;
 &lt;!-- サイドバー(B)終了 --&gt; &lt;!-- フッタ開始 --&gt;
 &lt;div id=&quot;footer&quot;&gt;
&lt;ul class=&quot;nl&quot;&gt;
    &lt;li class=&quot;first&quot;&gt;&lt;a hred=&quot;http://www.tagindex.com/template/page/example/type3_top.html&quot;&gt;ホーム&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;会社案内&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;お問い合わせ&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;プライバシーポリシー&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;アクセス&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a hred=&quot;inex.html&quot;&gt;サイトマップ&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;AddRESS&gt;XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX TEL 03-0000-0000 &lt;BR&gt;Copyright (C) 2017
 あなたのサイト名. All Rights Reserved. &lt;/addRESS&gt;
 &lt;/div&gt;
 &lt;!-- フッタ終了 --&gt; &lt;/div&gt;
 &lt;!-- ページ終了 --&gt;
 &lt;/div&gt;
 &lt;!-- コンテナ終了 --&gt; &lt;/body&gt;&lt;/hTML&gt;
 &lt;br data-mce-bogus=&quot;1&quot;&gt;

サンプルコードを表示すると、このようなサイトが出ます。

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ○選!を参考にしてみてください。

さいごに

いかがでしたでしょうか。

初めて学ぶ方は、挫折しないように、なるべく薄くてわかりやすい本で全体を把握できるぐらいでちょうど良いかと思います。また、まずは自分で作りたいデザインをいきなり目指すより、他人が作ったデザインを真似してコーディングしたりする方が勉強になります。

この方法が正解ということはありませんので、何よりも楽しく学習していくことが継続の上で大事です。自分なりの方法を見つけてみてください。

4月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
3月受入枠は満員となっております。4月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事