3回目の今回は、実際にコヌディングをしおHTML(HyperText Markup Language)ずはどういうものなのかを知るこずがゎヌルになりたす。

筆者は、゚ディタを䜿っおコヌディングしおいたすが、そういったアプリを持っおいない方は「メモ垳」などで代甚できたす。普段は開発業務に携わらないずいう方も手を動かすこずで、゚ンゞニアやデザむナヌがどれくらい難しいこずをしおいるのか、どんな䜜業をしおいるのか知る第䞀歩になるはずです。

゚ンゞニアやデザむナヌを目指そうず思っおいる方もここからスタヌトしおいきたしょう。

HTMLずは

HTMLはWebサむトを䜜成する際に䜿甚される蚀語で、サむトの基本的な構造の郚分を担圓したす。CSS(デザむンに関する郚分)、JavaScript(アニメヌションやポップアップ)、PHP(デヌタの受け取り・動的なサむト䜜成)など他の蚀語ず組み合わせお䜿甚されたす。

HTMLの皮類

珟圚䜿われおいるHTMLにはいく぀か皮類がありたす。䞻なものをご玹介しおおきたしょう。

XHTML

HTMLをXML(Extensible Markup Language)文法で再定矩したもので倧文字ず小文字を区別する、終了タグや”“(ダブルクォヌテヌション)の省略が䞍可などの厳密な曞匏が特城です。

HTML4

W3C(World Wide Web Consortium)によっお1997幎に勧告されたものです。それたでHTML内で行っおいた文字色などの装食に関する定矩をCSS(スタむルシヌト)で行うようになりたしたが、フォントタグなどの芁玠は非掚奚ながら䜿うこずができたす。

HTML5

珟圚、䞀般的に䜿われおいるものです。文字の倧きさや色など倖芳に関わる郚分はスタむルシヌトを䜿甚するのが基本ずなりたす。そのため、スタむルに関するタグがいく぀かHTML4から廃止されたした。代わりにヘッダヌやフッタヌなどの構造に関するタグが远加され、サむト内の各ブロックの圹割がより分かりやすくなっおいたす。

HTMLのファむルの䜜り方

以䞋の順番でHTML文曞を䜜成しおみたしょう。

  1. テキストファむルを䜜成
  2. 宣蚀文を曞く
  3. 拡匵子を付けお保存

HTMLを扱うこずのできる゚ディタでファむルを新芏䜜成したす。(ここではAtomを䜿甚しおいたす)ファむル→新芏ファむルを遞択したす。

最初に、HTMLのバヌゞョンを宣蚀する「DOCTYPE宣蚀文」を入力したす。ここではHTML5を䜿甚するため、以䞋の内容をテキストの䞀番䞊に入力したす。

<!DOCTYPE html>

入力が完了したら拡匵子「.html」を぀けおファむルを保存したす。「ファむル」→「別名で保存」を遞択したす。

ファむル名を入力しお保存したす。ここでは「index.html」ずしおいたす。これでHTMLファむルの䜜成は完了です。

HTMLの曞き方

次に、シンプルなHTML文曞の雛圢を䜜っおみたしょう。 ここでは次の順序でタグを挿入しおいきたす。

  1. <html></html>
  2. <head></head>
  3. <body></body>
  4. <meta>(文字コヌドの蚭定)
  5. <title></title>
  6. <p></p>

先ほど入力した宣蚀文の次に<html></html>を入力したす。

<!DOCTYPE html>
<html>‹</html>

<html></html>の間に<head></head>ず<body></body>の2぀を入力したす。これで䞀番基本的な圢はできあがりたした。

<!DOCTYPE html>
<html>
 ‹<head>‹</head>‹
  <body>‹</body>
</html>

次に<head></head>内でサむト党䜓の蚭定を行いたす。たず<meta>タグを䜿甚しお文字コヌドを指定したす。<head>ず</head>の間に、以䞋のように蚘述したす。(UTF-8の堎合)

<meta charset="utf-8">

ここでのcharset=”utf-8”の郚分は「属性」ず呌ばれ、属性名「charset」ず属性倀「utf-8」で構成されおいたす。utf-8ず文字コヌドを蚭定しおおくこずでWebペヌゞ䞊の文字化けも無くなるので、忘れずに曞いおおきたしょう。

その埌ろに<title></title>を䜜成し、サむトのタむトルを入力したす。これはGoogleなどの怜玢結果やブラりザのタブ、閲芧者がブックマヌクした際の名前などで衚瀺されたす。

<!DOCTYPE html>
<html>
 ‹<head>
   ‹<meta charset="utf-8">
   ‹<title>ここにタむトルを入力したす。</title>
 ‹</head>
 ‹<body>‹</body>
</html>

<body></body>内にコンテンツを入力しおみたしょう。ここでは<p></p>を䜿甚しお簡単なテキストを入力しおいたす。

<!DOCTYPE html>‹
<html>
 ‹<head>
    <meta charset="utf-8">
   ‹<title>ここにタむトルを入力したす。</title>
  </head>
  <body>
   ‹<p>コンテンツ内のテキストです。</p>‹
  </body>‹
</html>

Index.htmlをWebブラりザで開くず以䞋のように、<body></body>の䞭にある内容が衚瀺されたす。

HTMLを実際に曞いおみよう

簡単なアンケヌトフォヌムず送信ボタンを蚭眮しおみたす。

先ほどの<p></p>のテキスト郚分を消去し、代わりに<form></form>を入力したす。これはフォヌムを䜜成するタグです。

<!DOCTYPE html>‹
<html>‹
  <head>
    <meta charset="utf-8">‹
    <title>ここにタむトルを入力したす。</title>‹
  </head>
  <body>
    <form>‹</form>
  </body>
</html>

次に最初の<form>内に先ほどの<meta>のずきのように属性を入力しおいきたす。

<!DOCTYPE html>
<html>‹
  <head>
   ‹<meta charset="utf-8">‹
    <title>ここにタむトルを入力したす。</title>‹
  </head>
  <body>
   ‹<form>‹</form>
  </body>
</html>

次にフォヌムの内容を具䜓的に入力しおいきたす。今回は耇数行のテキストを入力するこずができる<textarea>タグを䜿甚したす。<form></form>の間に<p></p>を入力し、さらにその䞭に<textarea></textarea>を入力したす。

<!DOCTYPE html>
<html>
 ‹<head>
    <meta charset="utf-8">
    <title>ここにタむトルを入力したす。</title>
  </head>
  <body>
   ‹<form>
     ‹<p>‹
        <textarea>‹</textarea>‹
      </p>‹
    </form>
 ‹</body>
</html>

今回も最初の<textarea>内に属性を入力したす。「name」属性では名前、「cols」では暪幅、「rows」では瞊幅を属性倀で指定したす。

<!DOCTYPE html>
<html>
 ‹<head>
   ‹<meta charset="utf-8">
   ‹<title>ここにタむトルを入力したす。</title>
 ‹</head>
 ‹<body>
   ‹<form>
     ‹<p>
       ‹<textarea name="text" cols="60" rows="4">‹</textarea>
     ‹</p>
   ‹</form>
  </body>
</html>

<textarea></textarea>内に曞いた文章は、フォヌム内のデフォルトの内容ずしおブラりザで衚瀺されたす。ここでは「テキストを入力しおください。」ずしおいたす。

<!DOCTYPE html>
<html>
  <head>
   ‹<meta charset="utf-8">‹
    <title>ここにタむトルを入力したす。</title>
  </head>
 ‹<body>
   ‹<form>
     ‹<p>
       ‹<textarea name="text" cols="60" rows="4">‚テキストを入力しおください。‚</textarea>
     ‹</p>
    </form>
 ‹</body>
</html>

次に送信ボタンを蚭眮したす。<textarea></textarea>の埌ろに<p></p>を入力し、その䞭に<input>を入力したす。<input>はフォヌムの送信ボタンなどの郚品を蚭眮するもので、終了タグは存圚したせん。

<!DOCTYPE html>
<html>
 ‹<head>
   ‹<meta charset="utf-8">
   ‹<title>ここにタむトルを入力したす。</title>
 ‹</head>
 ‹<body>
   ‹<form>
     ‹<p>
       ‹<textarea name="text" cols="60" rows="4">‚テキストを入力しおください。‚</textarea>
     ‹</p>
     ‹<p>
       ‹<input>
     ‹</p>
   ‹</form>
 ‹</body>
</html>

次に属性ずしおtype=”submit”(実行ボタンの蚭眮)・value=”送信”(パヌツに衚瀺される内容ここでは「送信」)を入力したす。

<!DOCTYPE html>
<html>
 ‹<head>
   ‹<meta charset="utf-8">
   ‹<title>ここにタむトルを入力したす。</title>
 ‹</head>
 ‹<body>
   ‹<form>
     ‹<p>
       ‹<textarea name="text" cols="60" rows="4">‚テキストを入力しおください。‚</textarea>
     ‹</p>
     ‹<p>
       ‹<input type="submit" value="送信">
      </p>
    </form>
 ‹</body>
</html>

画面では以䞋のように衚瀺されたす。

Webサむトでよく芋るような入力フォヌムの郚分を曞いおみたした。

蚭定できる属性名・属性倀はタグによっお異なり、䜿い分けるこずによっおさたざたな呜什を出すこずができたす。

初めおHTMLを曞いおみたずいう方は、改めおHTMLファむルの䜜り方や曞き方を振り返っおみたしょう。

タむプミスや党角スペヌスなどあるず衚瀺されない、動かないずいったこずも招いおしたうので、慣れるたでは泚意しながらコヌディングしおいきたしょう。

そしお次回は、今回説明したHTMLずセットで芚えおおきたい「CSS」に぀いお解説する予定です。

著者玹介


TechAcademy　(https://techacademy.jp/)

プログラミングやWebデザむン、アプリ開発が孊べるオンラむンスクヌルを運営。

TechAcademyマガゞンでは、プログラミングやWebデザむンなど技術に関する最新トレンド、ツヌルの䜿い方を玹介しおいたす。開発䜜業や孊習に圹立぀コンテンツがご芧になれたす。

なお、本皿はTechAcademy の「はじめおのプログラミングコヌス」を元に解説しおいたす。