• WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02
  • WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20
  • WebCampPro_インタビュー
    未経験から上京し、テレビでも話題のIT企業に転職!【WebCampPro卒業生インタビュー】
    2018.03.10
  • WebCamp_インタビュー
    「自信の持てるスキルを得たい!」内定辞退した女子大生がプログラミングを学習したワケ。
    2018.04.28
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15

▼当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

金王冠Web Camp【業界最安値】1ヶ月集中してプログラミングスキルを身につけられるスクール
1ヶ月通い放題・メンター常駐の教室環境でWebサービス等作りたい方
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
銅王冠Tech Camp業界最大級!教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
びっくりマークWebCampPro転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアを3ヶ月で目指すプログラミングスクールです。
7月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
6月受入枠は満員となっております。7月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

みなさんは、プログラミングの勉強を始めたり、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>)に一度だけ記述します。タイトルは、ブラウザのツールバー、履歴(お気に入り)メニュー、検索エンジンの検索結果などで表示されます。必ず指定するようにしましょう。

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

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

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

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

例)

 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

リンクする(aタグ)

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

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

以下に例を示します。

例)
[ソース]

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

ブロック要素(divタグ)

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

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

以下に例を示します。

例)
[ソース]

<div style="border:1px solid gray;text-align:right;width;200px;">
右寄せ
</div>
[表示]

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

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

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

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

サンプルファイル


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

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


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

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

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

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

さいごに

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

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

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

WebCamp・Webスクについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。Webスクは半年間で未経験から即戦力エンジニアを育成する転職保証付きのプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

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

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

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

関連キーワード
学習の関連記事
  • 【徹底比較】失敗しないプログラミングスクールの選び方と最新スクール20選
  • 【必見!】フリーランスエンジニアが困った時に役立つエージェントとは?
  • 【フリーランスの開業届を徹底解説】メリット・デメリットや提出方法
  • 【節税対策】フリーランスのための経費一覧
  • 【必見!】フリーランスプログラマーを目指すなら知っておくべきこと5選
  • 【1000万も夢じゃない?】フリーランスの年収アップ方法解説

当サイトで人気のオススメ転職サービスTOP3

1位 マイナビエージェント×IT

おすすめポイント

・平日忙しい人も、土曜日開催の個別キャリア相談会に参加できる

・職種や仕事内容(要件定義、上流工程から携わる仕事など)の要望が細かくできる
・マイナビの規模を活かした豊富で幅広い求人数

マイナビエージェント×ITの登録はこちら

2位 レバテックキャリア

おすすめポイント

・求人登録数4,000件以上

・エンジニア未経験、経験者両方に対応

・有名企業の採用担当者インタビューがみれる

・一次面接NGからの内定実績もあるほど、内定率が高い

レバテックキャリアの登録はこちら

 3位 type転職エージェント

おすすめポイント

転職者の71%が年収アップ

・IT系企業、特にエンジニアに限らず営業職の求人も充実している

各職種専門の転職アドバイザーが援助

type転職エージェントの登録はこちら

おすすめの記事
キャリア
IT業界は専門的なイメージの強い業界なので異業種からの転職が難しい業界と思われがちですが、実はそんなことはありません。 IT業界では異業種か...