ウェブサイト制作の教科書はネット、知りたいことはネット上にたくさん転がっている。
ネットから気に入ったデザインのコードを借りてくれば、思い通りのウェブサイトができるとともに、おのずとHTML+CSSが書けるようになってくる。
ウェブサイトを制作していくこと自体は、実は簡単なことだ。
しかし、その前にHTML文書を構成するためのタグ、そしてHTML文書とウェブサイトの構造について知っておかなければならない。
注）以後、ここではWordPressを使用する動的サイト制作ではなく、HTML+CSSを基本とした静的サイト制作を想定していくことにする。
HTMLの基本はタグで囲むこと
ブラウザ上で見ることができるウェブページは、HTML+CSSというマークアップ言語で書かれている。
マークアップ言語とは、文書の本文中に構造や見栄えなどを指定するデータを埋め込む形で記述することができる人工言語のこと。
試しに、ブラウザに表示されているページで右クリックし、「ページのソースを表示」を選んでみよう。開かれた記号の羅列のページ、これがHTML文書だ。
ウェブサイトを構成するウェブページを制作することは、テキストエディタを使って、このようなHTML文書を書いていくことである。
右クリックで表示されたHTML文書は、その構造や見栄えのためにかなり複雑なことが書かれているが、基本は単純なもの。
例えば、以下を見てほしい。これは、CodePenというサービスを利用して表示している。
See the Pen
basic-html by Kazy (@uraflt)
on CodePen.
CodePenは、ブラウザ上でHTML、CSSなどのコードを記述し、リアルタイムで表示を確認しながら開発をすることができ、このように記事の中に埋め込むこともできる便利なサービス。
上部にHTML、CSS、Result３つのタブがあり、Resultがブラウザ上の表示と思ってもらえればいい。
HTMLはブラウザに表示させるための文書、CSSはそのHTMLの構造や装飾を指示する、いわば指示書で「スタイルシート」という。CSSはHTMLを補完するもので、そのものがブラウザに表示されるものではないということだけ覚えておこう。
話を戻して、上記CodePenのHTMLタブを見てみることにする。右側のResultに表示されているのは、＜body＞から＜/body＞の間だけ、それ以外は表示されていない。
そして、表示されているタイトルや見出しや文書は、その役割ごとに決められた＜＞で囲まれた「タグ」で前後を囲んでいる。
これが、HTML文書を書いていく基本の「き」となる。
タグは、＜＞で始まり、スラッシュが入った＜/＞で閉じることで、タグが持つ役割がその間だけ反映される。なお、全てのタグは小文字で書くのが正規の書き方。
HTML文書の基本構造は４つ
次に、HTML文書の基本構造について。
上述の通り、ブラウザ（Result）に表示されるのは＜body＞タグで囲まれた部分だけだが、どのHTML文書も
- !doctype
- html
- head
- body
の４つのタグで構成されている。動的サイトのPHPなどは別だが、静的サイトではどのページを見ても、どんなに複雑でもこの４つのタグは必ず書かれている。
これがHTML文書の基本構造と覚えておこう。
念のため、それぞれの役割について簡単に記しておく。
DOCTYPEタグ
DOCTYPE宣言または文書型宣言のこと。必ず冒頭に記載され、その文書が何で書かれているかを宣言している。HTML文書は
<!doctype html>とだけ書いておけば良い。このタグは要素を囲むタグではないので、終了タグがない。
HTMLタグ
DOCTYPE宣言で、「この文書はHTML文書です」と宣言し、そのすぐ下から文末までHTMLタグで囲むことによって、HTML文書を書くエリアを決めている。
HTML文書である限り、このタグの範囲外に記載できるのはDOCTYPE宣言のみ。
HEADタグ
HTML文書のヘッダ部分で、ユーザーからは見えないが、主に検索エンジンなどの機械が読み取るためのウェブページの情報を記載するところ。
ここには、「meta」「title」「link」「script」の４つの情報を記載していく。これらのタグについて、今覚えておく必要はない。例によって、ネットでHEADタグに書くべき内容を調べて書けばいい。
大事なのは、ここに記載される情報が、SEO（検索エンジン最適化）対策にとって重要であるということ。
BODYタグ
上述の通り、ブラウザに表示されるものを記載するところ。
この基本構造によるHTML文書は、テキストエディタで編集して「.html」の拡張子で保存する。
CSSはHTML文書の指示書
上記の章でも軽く触れたが、CSS（Cascading Style Sheets）は「スタイルシート」と言い、HTML文書の構造や修飾を指示する指示書。
上記CodePenの「CSS」タブを開いてみよう。
例えば、h1タグは大見出し、文書のタイトルを表示するタグだが、CSSには
h1 {color: blue; text-align: center;}と記載してある。「color」はタイトル文字の色を指示し、「text-align」は文章の水平方向の揃え方を示す指示、ここで「center」と指定しているので、タイトルが表示上の真ん中に来ている。
HTML文書では必ず左寄せで表示されるので、このタイトルを左寄せにしたい場合、特に指示する必要はない。
一方、CSS内の「footer」を見てみると、「text-align: right;」と指示されているので、HTML文書内のfooterタグ内の記載（copyright: ©ura-no-ura.com）が、Resultでは右寄せになっている。
実は、HTMLのタグはほとんど何らかの形でCSSから指示をするので、「タグ＝CSS」くらいに覚えておけば良い。
CSSファイルは、「.css」拡張子をつけて保存する。そして、HTML文書のHEADタグ内の「link」部分に、以下の通りCSS文書名を記載することで、HTML文書にCSSの指示を反映させることができる。
<link rel="stylesheet" href="css/style.css">ファイルごとにディレクトリに分けて保存
次はウェブサイト全体の構造について。
ウェブサイトは、複数のウェブページ（HTML文書）で構成される。キャンペーンサイトではない限り、単一ページのウェブサイトはほとんどない。
そのため、サーバーにアップロードするときには、ウェブサイトの構成に沿ってアップロードしなければならない。そのルールを決めておかないと、いざサーバーにアップロードしてブラウザに表示されたとき、ユーザーが探しているページに辿り着くことができずに離脱してしまうことになる。
それを防ぐためにも、制作したHTML文書やCSSは、ローカル環境に特定のディレクトリを作成し、その中でさらに種類やカテゴリに沿ってディレクトリを作って保存することになる。
例として、Googleの「検索エンジン最適化（SEO）スターター ガイド」にある、ディレクトリの構造図を引用して説明しよう。
rootディレクトリは、ウェブサイトのトップページ（index.htmlやtop.html）を格納するディレクトリ。URLには、ドメイン以降”スラッシュ”がつかない。なお、index.htmlはURL上で省略することができる。
rootディレクトリの中にさらに作成された「about」「articles」「news」などディレクトリのURLは、ドメイン以降スラッシュで区切られる。例えば、ドメインが「example.com」なら「about」は
example.com/about
となり、「about」ディレクトリの中に格納された各文書名が”スラッシュ”とともに続く。
また、「news」ディレクトリの中には、さらに「2022」「2023」「2024」ディレクトリが格納され、URLは、
example.com/news/2022
となる。
ここまでくればお分かりかと思うが、HTML文書の構造が、そのままウェブサイトのURLに反映されるということだ。
ローカル環境でHTML文書を作成していくとき、出来上がりのウェブサイトの構造を想定しながらディレクトリにまとめ、一つのrootディレクトリにまとめておく。そうすれば、FTPを利用してサーバーにアップロードする際、rootディレクトリをまるまるアップロードすれば良いことになる。
タグとHTML文書・ウェブサイトの構造のまとめ
前半は、HTML文書を書くために必要なタグとひとつのHTML文書内の構造について、後半は複数のHTML文書をウェブサイトの構造にあわせて整頓するということを書いた。
今までウェブサイトなど作ったこともない人が読むには、少々専門的になってしまったかもしれないが、書いていることは単純なこと。つまり、
「HTML文書は大きく４つのタグでできていて、タグに役割を与えるための指示書がCSSである。」
「ウェブサイトはひとつの文書ではなく、複数のウェブページ（HTML文書）で構成されるため、カテゴリに沿ってディレクトリで分けておく。」
というだけのことである。
コメント