HTMLとは

まるで呪文

「Webクリエーター養成科」での学びが本格始動－。
先ずは、Webページを作成する上で指示を出すための言語「HTML」から。
教科書は「1冊ですべて身につく　HTML＆CSSとWebデザイン入門講座」（SBクリエイティブ株式会社）。総ページ数が約280ページにも上る、とても分厚い本です。

Webページ上での見出しや本文のほか写真表示にサイトへのリンク等を仕組むためには、「<」と「>」で挟まれたタグの中に、文字列を書き込みます。

例えば、見出しをつけるためには英語で見出しを意味する「heading」の頭文字にちなんだ<h>タグを使います。
見出しは大きい順に<h1>から<h6>まで設定できますが、最も大きな見出しを立てるときには<h1>タグを使って、開始タグと呼ばれる<h1>と終了タグと呼ばれる</h1>で挟み込みます。
<h1>最も大きな見出し</h1>と書けば、Web上で
最も大きな見出し、と表示されます。

文章を表示するには、英語で段落を意味する「paragraph」の頭文字<p>タグを使います。
<P>天気予報では本日は晴れで、明日は曇りです。</p>と書けば、Web上で
天気予報では本日は晴れで、明日は曇りです。
と、表示されます。

また画像を表示するには「image」の頭文字＜img＞タグを使い、表示させたい写真等の画像がある場所をsrc属性を使って指定して記入。さらには、他のページとリンクさせるには<a href=” “>と＜/a＞タグで、飛ばしたい先のWebサイトのURLを指定して記入する。
タグで囲んだテキストはWeb上でのどのように見てもらうかを決める、プログラムのソースコードといわれ、 さまざまなコードがあり、それぞれのコードにはそれぞれのルールがある、といいます。

HTMLは日本語でなく英語がベースとなって、半角スペースを使ったり、<>のほか＝や” ”といった記号と文字を組み合わせてプログラムするので、一見するとまるで呪文のよう。

思い知ったタグ

今春からこのブログを書き始めて適宜更新しているわけですが、<h><p><img><ul>といったさまざまなタグの存在と役割を知ったら、これらのタグのルールによって自分のブログのあの部分が形づくられているんだろうなといった箇所が思い浮かんできました。

当ブログ「爺時刻刻」はWordPressを利用しています。
WordPressはプログラミングやWebデザインの知識がなくても、Web上で展開する文章や写真といったコンテンツを編集できるCMS（コンテンツ・マネジメント・システム）と呼ばれる仕組み。Web上で見える画面とは別に文章や写真を編集する画面があって、発信者は編集画面にアクセスして、文章を書いたり写真を挿入したりします。

編集画面を開いて、見出しを書くときには「見出し」、文章を書くときには「段落」、写真を挿入する場合には「画像」、項目を羅列する場合には「リスト」といったアイコンの中から、自分が編集する都度選択クリック選択。その上で、それぞれ「文章」「箇条書き」の対象となる文を書いたり、「写真」の挿入を指定したりすれば、それだけでそのままWebが更新されます。

当ブログが無事更新されているのはWordPressの仕組みのおかげです。
本来であれば、Web上でブログを表示させるためには複雑なコードプログラムの構成・作成に思いを巡らせなければなりません。
しかし、WordPressの編集画面の裏側で<h><p><img><ul>といったコードが事前に組み込まれているため、コードを入力することなく反映させたい文章や写真を指定する作業だけでWeb画面を作動させることができているんだと思い知ると同時に、CMSとしてのWordPressのクオリティーの高さに感心してしまいました。

グループ化も

講義では、スケジュールや何かの料金を見やすく表示する表組みや複数ある選択肢のうち1つを選んでもらうラジオボタン、複数ある選択肢から複数の項目が可能なチェックボックス、送信ボタンにセレクトボックスの表示設定等についても学習。
日々目にするパソコンやスマホの画面が見やすいように工夫されていたり、クリックすると別画面に移ったりという動作が、HTMLというルールに基づいているんだということにも気付きました。

さらに、コンテンツのグループ化するためのくくりタグの役割も。
Web画面上のレイアウトを考えるときに分かりやすく組めるように、画面表示される部分のコンテンツパーツを取りまとめてタグでくくって、コンピューターに認識してもらう必要があるようです。
主なタグは以下の通り。

• <header>…よくWebページの上部で見かけるロゴ画像やページタイトルやWebページの中を案内するナビゲーションメニューなど
• <main>…その名の通りでページの中心・核となる主要部分のコンテンツである記事や写真などが載っている部分ですね
• <aside>…mainスペースの脇で展開する本文を補足する情報を表示する部分。店舗や筆者に関する情報など
• <footer>…ページの最後の部分。人間の体に例えると足（foot）に当たり、多くはコピーライトやリンク先などが表示されています
• <div>…Webデザインを考える上でグループ化する際など

<header>ヘッダー、<main>メイン、<footer>フッターといったフレーズだけは何となく小耳にはさんだことはあったのですが、ディブ<div>は初めて。
授業では<div>が多用した演習が多く、どの部分に該当するかまだ決まっていなかったり、Webデザインを考えたりする場合、とりあえずグループ化するのに使うとのことですが、ビギナーとしてはその使い方がいま一つ理解できていないのが現状です…。