今までは概論ばかりだったので、読むことに飽きてしまう人がいるかもしれない。
そこで、今回は難しいことは抜きにして、遊び感覚でHTMLとCSSを書いてみよう。
テキストエディタに書いたHTML文書が、どのようにネット上に反映されるか、基本の「き」を「感覚」で捉えてもらいたい。
タグで囲みながら書くのがHTML文書
「一から始めるWeb制作 #2〜ウェブサイトの仕組みとHTML」で書いたように、HTML文書は、ネット上に表示したい文書を、「タグ」というもので囲みながら書いていく。
例として、夏目漱石の「吾輩は猫である」の冒頭部分を引用し、 前回説明したCodePenというツールを使ってHTMLを書いてみた。
段落を示すpタグ
See the Pen
no1_030122 by Kazy (@uraflt)
on CodePen.
左側のHTMLタブで表示されたテキストエディタ上に書かれた、「吾輩は猫である。名前はまだ無い。」という文章と、その下の一段落を、それぞれ＜p＞、＜/p＞というタグで囲んでいる。
これは「pタグ」、段落を指定するためのタグで、Paragraghの略。このタグで囲まれた部分は、ひとつの段落ということを示している。
その指示は、右側のResultタブの表示にも反映されており、「吾輩は〜」という文章とその下の文章の間にスペースができていて、それぞれ一段落だということがわかる。
これがpタグの役割だ。
改行のbrタグ
次は、この文章に新たなタグを入れてみよう。
See the Pen
no2_030222 by Kazy (@uraflt)
on CodePen.
真ん中辺に追加したbrタグは、改行するためのタグで、「Break」の略。
WordなどでReturnキーを押すと改行できるように、このタグで文書を改行できる。単独で使用でき、終了タグ＜/＞は不要。
上記CodePenのResultに表示されている通り、pタグによる段落変更は約1行分の余白が開くが、brタグによる改行は、余白は開かずに次の行頭へ移動する。
HTMLでの改行については、ネット上で様々議論されているが、現時点ではpタグとbrタグによる改行の意味を把握しておこう。
とりあえず、このたった2つのタグを覚えただけで、文章だけのHTML文書がスラスラ書けてしまう。
CSSの役割は装飾
次は、HTML文書の装飾や体裁を整えるCSS（Cascading Style Sheets）について。
CSSの記述場所
CSSの記述場所は、
- styleタグに書く
- インラインに書く
- 外部ファイルに書く
の3通りがある。
1は、同じHTML文書のhead内に、＜style＞＜/style＞タグで囲んで書くもの。
2は、文中のタグの属性として、「style=””」で指定する。
3は、HTMLファイルとは別にスタイルシートというファイルを設け、そこに書いていく。HTMLファイルとスタイルシートは、上述のhead内でリンクさせる。
通常は３の「外部ファイルに書く」のが一般的で、1、2については出来るだけ避けるべきとされている。
なぜなら、一つのHTML文書では、多くのCSSによって体裁を整えたり、装飾することが必要となってくる。それを、１や2の方法で記載していたら、HTML文書がゴチャゴチャしてしまうからだ。
一人でウェブ制作をしているならともかく、チームで制作している場合、あらかじめいろいろな共通ルールを決めておくもの。ゴチャゴチャした文書は誤解を生み、結果良いウェブサイトはできない。
CSSの具体例
上述の記載場所を意識しながら、以下具体例を見てみよう。
See the Pen
no3_030222 by Kazy (@uraflt)
on CodePen.
左側のテキストエディタ部分には、「HTML」と「CSS」タブが表示されているので、それぞれクリックして見ることが出来る。
「HTML」には、HTML文書の基本構造となる、
- doctype
- html
- head
- body
を入れておいた。実際にブラウザに表示されるのは、bodyダグで囲まれた箇所だけだ。
まず、新たにh1タグを追加した。
hタグは見出しタグで、headingの略。通常h1〜h6まであり、h1は大見出しタグ、つまり文書タイトルを示している。
次に、「CSS」タブをクリックしてみると、body、h1タグについて、CSSを記述してある。
bodyに指定したのは、font-family、つまりフォントを指定するCSS。
今までは何も指定していなかったので、上記の通り明朝体でブラウザ表示されていたが、ここでsans-serif（汎用フォントファミリーのゴシック体）を指定することにより、この章では、文書全体がゴシック体になっている。
h1に指定したのは、color。colorは、フォントの色を指定するもの。文書タイトルだけ、blue（青）に指定してみた。
CodePenでは「HTML」と「CSS」タブで表示されているが、実際はこの2つは別々のファイル、つまり記述場所3の「外部ファイルに書く」ことによって、CSSを別ファイルにしていると理解してもらいたい。
また、pタグで囲まれた「吾輩は〜」部分には、インラインでstyle属性でCSS（アンダーライン）を挿入した例。１箇所くらいなら問題ないが、あまりにインラインを多用すると、HTML文書がゴチャゴチャしてしまう。
まとめ
今回は、
- HTML文書は、様々なタグで囲みながら記述していく
- HTML文書の体裁を整えたり、装飾するときにスタイルシート（CSS）で設定する
- CSSはHTML内に記述することを避け、外部ファイルに記述する
を実践してみた。
現在のHTML5で使用されるタグは、実に多い。しかし、全てを覚える必要はない。
ネット上には、様々なタグ・リファレンスまたは一覧といったものが溢れている。それを検索できれば良いだけのこと。
参考までに、W3CのHTML Tag Referenceを紹介しておく。日本語に翻訳されており、それぞれサンプルソースが書かれているので、便利だと思う。
【本で学習したい人はコレ】
コメント