静的サイトの成り立ち①：構造をつくるHTML
静的サイト、動的サイトに限らず、Webページを表現するための記法が「HTML」と呼ばれるものです。HTMLとは「HyperText Markup Language」の略であり、大きな特徴はプレーンテキストで記述していくことでしょう。
プレーンテキストとはテキスト文字以外の情報は持たず、極端に言えばOS標準の「メモ帳」などのアプリで書くことができるものです。HTMLでは、プレーンテキストのなかで特定の意味がある要素を適切に記述することで文章全体に意味付けをしていくことができます。
「要素」には文章全体のタイトルを表す「title」タグを使ったものや、章ごとの見出しを表す「h1」「h2」「h3」……タグや文章の固まりを表す「p」タグなどを利用した要素があります。要素を構成するパーツにはそれぞれ名前があります。例えば以下のHTMLの要素があるとしましょう。
<h1 class="header">見出し</h1>
冒頭の「<h1 class="header">」が開始タグ、「</h1>」が終了タグと呼ばれ、それに挟まれる「見出し」部分が内容などと呼ばれます。また、開始タグ内の「class="header"」という部分に関しては「class」が属性名、「header」が属性値とも言われます。こうしたHTMLタグに関しても「何がなんと呼ばれているか」を知っておくと後々文献をあさるにしても、技術者とコミュニケーションをするにしても捗るかもしれませんね。
さて、HTMLのもうひとつの大きな特徴は、プレーンテキストでありながら、ハイパーリンクや画像などの読み込みをタグを使い記述することが可能な点です。例えば、文中に筆者のブログへのリンクを張る時には、以下のような記述をすることでハイパーリンクを表現できます。
<a href="http://yusukebe.com/">筆者のブログはこちら</a>
HTMLは、元々こうしたタグを適切に使い、プレーンテキストを意味のあるWebページとして成り立たせる記法です。タグは他にも表をつくるためのtableタグ、リストを表現するulやolタグなど多数のタグが存在しているので興味のある方は覚えておくとよいでしょう。静的サイトをつくる際には、最低限HTMLさえあればWebページとして情報を公開できることになります。
Webの記事を読むのもいいけれど、リアルゆーすけべーさんに会って直接講義を受けませんか？
本講座では、実際のWebサービス制作における事例やエピソードを交えながら、ディレクターの役割と必要なスキル、そしてチームの共通言語となるWeb基礎技術について学びます。Webディレクターに成り立ての人やWebクリエイターとのやり取りがイマイチうまくいかない人にオススメです。
