このシリーズは、短期間でWebエンジニアとして最低限必要な技術を学ぶことを目的としています。
第一回では、Webの技術が複数の分野にまたがって構成されていることを紹介しました。実際のWebエンジニアにはそれぞれ得意な分野があることもありますが、Webというサービスが、最低限どのような体系で提供されているのか、全体を把握しておくことは大事です。今回から、実際の技術について、それぞれどういった物なのか基本的な事を紹介していきます。短期間で学べるように、それぞれ実務で役立つ要点だけをピックアップして紹介します。
今回扱うのはHTML(HyperText Markup Language)です。HTMLはWeb技術の中核ともいえる重要な技術で、ほとんどのWebエンジニアが扱うことになります。長年をかけて非常に膨大な仕様が組み上げられていますが、短期間でWeb技術を一通り体験するコンセプトに従って、要点だけを一気に紹介していきます。
HTMLの基本構成 – タグを知ろう –
Webページ/Webサイトの基本はHTMLにあります。Webの世界では色々な技術が絡み合いますが、ほとんどの場合Webブラウザを終着点としていることが多く、そこに表示されるデータの基礎はHTMLだからです。(当然例外はあります)
HTMLは、パソコンなど文書を作成できる環境さえあれば、誰でもすぐに作成することができます。
メモ帳などのテキストエディタでファイルを作って、ファイルの拡張子を[.html]にすれば、環境にもよりますがほとんどの場合ダブルクリックでWebブラウザでの表示が行われるでしょう。ファイルに何も入力されていなければ、真っ白の何もない画面が表示されることになります。
タグ – HTMLを構成する基本要素
HTMLは、タグというマーカーで文書などの要素を囲い込むことで、その要素に特別な効果や役割を与えます。以下に簡単な例を紹介します。
<!-- HTML文書 -->
これは<b>テスト文章</b>です。上記例は、普通の文章の中に、文字をBold体(太字)にするBタグを指定しています。タグはこのように開始タグ<***>と終了タグ</***>で指定するのが一般的なルールです。終了タグが必要ないタグ(改行<br>など)の場合、HTML上は開始タグのみで問題ありませんが、他のMarkup言語(XML)と合わせて省略形式(<br />など)で記載するようにしましょう。
<!– (任意の文章) —>、と記載すると、HTML内で「コメント」として扱われます。これはブラウザなどで表示する際に、完全に無視され、画面上に表示されることがないものです。HTML文書内に備忘録として説明を記入しておいたり、他の人へファイルを渡す際に伝えておきたい事を書いておくなど、様々な用途で利用されます。(上記例では読者の方へ向けての説明なので、太字の文章のためには「必要ない行」ということになります。)
タグの大文字・小文字について
HTMLの仕様上は、タグは大文字でも小文字でも構わないことになっています。<br />は改行のタグです。終了がないため省略形の指定となっています。
<!-- HTML文書 -->
これは<b>小文字</b>です。<br />
これは<B>大文字</B>です。<BR />
終わりこれは大文字です。
終わり
ただし、省略形のタグと同じようにXMLなど他のMarkup言語と合わせて小文字で記載していくのが、現状のWeb世界の流れです。
細かな話は省きますが、HTMLもバージョンが上がっていっており、大文字小文字が許されていたのはHTML4.0の頃(1999 – 2008年)の話で、現行のHTML5.0(2008 – )以降は小文字推奨というのが大体の流れです。実際にはHTML5.0でも大文字は許されているのですが、その前段階に策定されていたXHTMLという仕様で大文字禁止だったことを受けて、HTML5.0頃には大文字タグを避け、XHTMLにも準拠した書き方が浸透したという流れです。XHTML自体は2009年に中止されています。
現在流通しているブラウザは、大文字小文字どちらで記載しても表示されますが、今後HTMLのバージョンアップなどでXHTML/XML準拠ということになれば、大文字のHTMLは表示できなくなる可能性があるので、新しく作るHTMLは小文字で記載していきましょう。
HTML全体もタグで囲まれている
HTMLはタグを使って構成していくことを紹介しましたが、HTMLファイル全体もタグで定義します。ファイル全体は以下のような構成になっています。
<!-- HTMLファイル -->
<html>
<head><!-- 定義など --></head>
<body><!-- 文書本体 --></body>
</html>一番大外に<html>というタグがあり、通常ファイルの先頭と末尾に書くことになるでしょう。これで囲まれている部分がHTML文書である事を定義しています。その中には、<head>と<body>の2つのタグがあるのが一般的です。<head>は省略することは可能です。
<head>～</head>にはページに関する様々な定義を記載します。サイトのタイトル(ブックマークに登録される名前)などもここで定義する他、今後紹介するCSSやJavaScriptのファイルの読み込みなどもここで行われます。
<body>～</body>には、このHTML文書のコンテンツ本体です。文書や画像、動画などを含めて、画面に表示される部品は全てこの<body>の中に記入しておきます。先ほど紹介した太字にするサンプルを、bodyタグの中に記載してファイルを保存すれば、ブラウザ上で文字が表示されることを確認できますので、是非試してみてください。
Webページを彩る便利なタグ
<body>タグの中には文章を自由に記入することができますが、文章だけのWebサイトはとても見にくいので、すぐに画像など使ったリッチなコンテンツを作りたいと思う事でしょう。
HTMLのタグについて解説をしてしまうと、それだけで辞書のような文章量と数か月・数年というすさまじい時間がかかってしまうので、ここでは「Webエンジニアの短期集中」に従って、最低限のタグだけを簡単に紹介しています。
まずはHTML全体の雰囲気やタグの使い方を把握しましょう。それだけ分かっていれば、後は自分で調べながらでも色々なことを試して吸収していけるようになるはずです。
画像表示とタグの属性について
文章に画像が入ったら、それだけで一気にHTMLらしさが出てくるので、画像について簡単に紹介しておきます。
<img src="/wp-content/uploads/2024/07/web-eng-02-sample.png" />
<img>タグは終了がないタグなので、省略形式の<img />を使います。指定してある画像URLは、ご利用の環境で表示できるものに置き換えてご利用ください。
タグの属性
<img>タグの中に、srcという文字列が出てきています。これはHTMLでは「属性」と呼ばれ、タグに対して様々な情報を付与します。タグによって指定できる属性は異なりますが、デザインに関するものなど共通で指定できるものもあります。
<img>タグのsrc属性は、画像のsource(ソース : 源)を指定します。一般的には画像のURLになります。ここでは同じWebサーバー内の画像なので、https://xxx.xxx/のような指定が省略されています。外部の画像を参照することも可能ですが、引用元の権利(著作権)などには注意しましょう。
タグを覚えるだけでも大変なのに、属性まで覚えるなんて無理、と思うかもしれませんが、意外とよく使うパターンは決まっています。特殊な指定方法などはエンジニアでも忘れることも多いです。マニュアルなどの調べ方だけ知っておくと便利ですが、今はGoogleで検索するだけでも一般的な物ならすぐに見つかる便利な時代なので、あまり気負わなくても大丈夫です。
絶対覚えよう! HTMLフォームはエンジニアには必須
HTMLには様々なタグが用意されていますが、Webエンジニアであれば「フォーム」はある程度覚えておきましょう。フォームは「ユーザーからの入力」を受け取って処理するために利用されるもので、JavaScriptやサーバー上のプログラムにおいて、利用者からの情報を得るための重要な手段です。
実際にフォーム部品をサーバーで受け取るところは、もう少し先で学ぶとして、今はHTMLタグとしてフォーム部品をどのように表示させるかだけを紹介します。
<input type="button" value="決定" />
<br />
<input type="radio" />
<input type="checkbox" />
<br />
<select>
<option>北海道</option>
<option>東京</option>
<option>沖縄</option>
</select><input>タグは、フォーム部品として大事なタグで、type属性によって様々な形状(役割)の部品をWebサイト上に表示することが出来ます。上記例では、ボタン(button)、ラジオボタン(radio)とチェックボックス(checkbox)を表示しています。ボタンにはvalue属性で”決定”という文字を表示しているように、属性の指定や他のタグと組み合わせることによって様々なフォーム部品を実現することができます。<input ****** />のように最後のスラッシュを忘れないようにしましょう。
<select>タグは、利用者に選択肢を提示して選んでもらうフォーム部品です。<select>～</select>の間に<option>タグで選択肢を提供します。
本サイトではITエンジニアを目指す人へ向けた様々な記事もありますので、興味のある方は是非ご覧ください。
失敗を恐れず気軽にやってみよう
HTMLはプログラム言語ではなく文書データで、特別なソフトなどを準備する必要もなく、パソコンなど文書を制作できる環境さえあれば、すぐに作成して試すことができます。間違った記述をしてしまっても、プログラム言語のようにファイルが壊れたりパソコンが壊れたりするようなこともなく、ブラウザ上に変な表示がされるだけなので、安心してどんどん失敗していきましょう。
IT分野の技術に限りませんが、失敗すると問題を調べて解決することになり、苦労が多い程記憶に深く刻まれやすく、その積み重ねはとても強力な経験値になっていきます。
また、普段見ているWebページなどで、どうやって表現しているのか興味を持ってみるのもいいでしょう。素敵な表現や便利な画面構成などは、参考にして真似していくと、習熟スピードは高まり、品質の良いWebページを制作することに役立つでしょう。
