一から始めるWeb制作 #5〜とりあえずHTMLとCSSを書いてみよう

タイピング イメージ

今までは概論ばかりだったので、読むことに飽きてしまう人がいるかもしれない。

そこで、今回は難しいことは抜きにして、遊び感覚で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の記述場所は、

  1. styleタグに書く
  2. インラインに書く
  3. 外部ファイルに書く

の3通りがある。

1は、同じHTML文書のhead内に、<style></style>タグで囲んで書くもの。

2は、文中のタグの属性として、「style=””」で指定する。

3は、HTMLファイルとは別にスタイルシートというファイルを設け、そこに書いていく。HTMLファイルとスタイルシートは、上述のhead内でリンクさせる。

通常は3の「外部ファイルに書く」のが一般的で、1、2については出来るだけ避けるべきとされている。

なぜなら、一つのHTML文書では、多くのCSSによって体裁を整えたり、装飾することが必要となってくる。それを、1や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(アンダーライン)を挿入した例。1箇所くらいなら問題ないが、あまりにインラインを多用すると、HTML文書がゴチャゴチャしてしまう。

まとめ

今回は、

  • HTML文書は、様々なタグで囲みながら記述していく
  • HTML文書の体裁を整えたり、装飾するときにスタイルシート(CSS)で設定する
  • CSSはHTML内に記述することを避け、外部ファイルに記述する

を実践してみた。

現在のHTML5で使用されるタグは、実に多い。しかし、全てを覚える必要はない。

ネット上には、様々なタグ・リファレンスまたは一覧といったものが溢れている。それを検索できれば良いだけのこと。

参考までに、W3CのHTML Tag Referenceを紹介しておく。日本語に翻訳されており、それぞれサンプルソースが書かれているので、便利だと思う。

【本で学習したい人はコレ】

コメント