HTML and CSS Coding

Web上の静的コンテンツは基本的に、HTMLとCSSから構成されています。

HTML (HyperText Markup Language) では文章そのものと、その文書構造 （論理構造）を指定するタグ”<tag>”から構成されています。一方で装飾はHTMLには含めずに、CSSと呼ばれるカスケードスタイルシート（Cascading Style Sheets）に書くことが推奨されています。そして実際のサイトの作成・管理の観点からも、HTMLファイルと外部ファイルのCSSを使い分ける方が便利で、SEOの観点からも、HTMLには装飾は含めずに、文書構造のみにした方がよいでしょう。

HTMLとタグ

さてHTMLとは、「タグ」というものを文章の中に埋め込んで（マークアップして）、文章の構造をコンピューターにわからせるためのファイル形式（表記方法）です。タグは “<” と “>” で囲まれた半角文字からできています。

例えば、見出し（ヘッドライン・headline）を表すときは、<h1>見出し</h1>のように見出しの内容をタグで囲みます。見出しは大きな見出し（1番目の見出し）から順に、<h1>、<h2>、<h3>、・・・と、6番目まであります。

段落（パラグラフ・paragraph）は、以下のようになります。

<p>ここは段落です。そしてなんちゃらかんちゃら・・・　それでもって、ここまでが段落です。</p>

このように<p>と</p>で囲みます。このように文章の構造を表す「タグ」は、「開始タグ」と「終了タグ（閉じタグ）」の2個セットで用います。

箇条書き等を書くときは、リストを使います。番号付リスト<ol>と番号無しリスト<ul>があります。他にも取り消し部分を表す”<del>”タグ（delete）、追記・挿入箇所を表す”<ins>”タグ（insert）等があります。他にも表<table>などがあります。

このように、HTMLでは、文章がどのような構造になっているかを、機械にわからせるためのファイルになっているんですね。

装飾（デザイン）を指定するCSS

さて、文章の構造を表すのがHTMLでしたが、見た目のデザインを指定するのがCSSです。

例えば、2番目の見出しは青色で、フォントサイズは24ポイントで、背景は白にする場合は、次のように表記します。

h2 {
color: blue;
font-size: 24pt;
background: white;
}


たったこれだけで、<h2>タグは全て、このデザインになります。

外部CSSファイルを使う場合、HTMLファイル内には、「この外部ファイルのCSSファイルを読み込んでください」ということを意味するタグを書きます。このタグはたった1行ですみます。全部のページを同じデザインにする場合、用意するCSSファイルはたった1ファイルでO.K.なんです。これが外部CSSファイルの一番の強みです。

現在ではHTMLファイル内に装飾目的のタグを入れることは非推奨となっていますが、昔はそのような装飾目的のタグを入れることが多用されていました。その頃のコードは、例えば以下のような感じでした。

<h2><font size="4" color="blue">見出し </font></h2>

いちいち、<h2>タグが出てくるたびに、その中に入れ子構造で<font>タグを入れていました。しかも、背景色は指定できません。こんなこといちいち打ち込むのって、とっても大変ですよね。それが、ただ単に<h2>と</h2>で囲むだけで、全ての<h2>に適用できるわけです。とっても便利だと思いませんか？

部分部分で装飾を変える場合

でも、部分部分で装飾を変えたい！ってこともありますよね。それも、HTMLとCSSを使ってできます。「class」と「id」を使うことにより実現できます。例えば、この段落だけは文字の色を変えたいという場合は、次のように書きます。

HTMLでは

<p class="red" >この段落だけは、文字の色を変えることにします。そのために、classに「red」を指定しました。</p>

CSSでは

p.red {
color: red;
}


このように、個別に装飾を変えることもできます。classで指定した場合は「p.red」のようにタグの後ろに間を空けずにドットを挟んでクラス名を書きます。idで指定した場合は、「div#content」のように、タグの後ろに間を空けずにシャープを挟んでアイディー名を書きます。

内側のタグを一括で指定

他には、ページの上部に並ぶ各ページへのリンクの部分と、本文中のリンクとで、色を変えたいってこともあるでしょう。そういう場合は、外側のタグに指定したclassやidを使って指定することもできます。

例えば、ページ上部のリンクを囲む<div>タグに「page_top」というidを指定している場合、その内側のリンクのタグ (<a>タグ) に、一括して指定することができます。

HTML

<div id="page_top">
...
...
<a href="http://hogehoge.jp/site.html">サイトについて</a>
<a href="http://hogehoge.jp/html.html">HTMLについて</a>
<a href="http://hogehoge.jp/css.html">CSSについて</a>
...
...
</div>


CSS

#page_top a {
font-size: 12pt;
color: green;
}


このように、あるidやclassのタグの内側に入っているタグを一括して指定する場合は、外側のclassやidを書いて、スペースを空けてから、後ろに内側に入っているタグを書きます。classのときはクラス名の前に「.」を付けて、idの場合はアイディー名の前に「#」をつけます。

とまあこんなわけで、CSSを使えば、とっても便利にデザインを作っていくことができるんですね。便利なこともあって、HTMLで装飾を行うことは廃れて、今ではHTMLと外部ファイルCSSが主流になっています。またSEOの観点からは、HTMLファイル内がシンプルな方がよいとされています。SEOの観点からも、余計なことはHTMLファイル内には書かずに他のファイルに書いちゃいましょうってことです。

<h1>タグや<h2>タグを使って表す見出しの幅を、コンテンツを書いている部分よりも狭くデザインすることも多いでしょう。見出に背景色を設定している場合などは、その方が見出しっぽくなりますよね。

さて、見出しには<h1>タグや<h2>タグを使いますが、コンテンツ部分には様々なタグを使います。例えば、こんなのがあるでしょう。

• <p>タグ：段落（paragraph）
• <ol>タグ：番号付き・順番付きリスト（ordered list）
• <ul>タグ：番号無し・順番無しリスト（unordered list）
• <dl>タグ：定義リスト（description list）
• <blockquote>タグ：ブロックレベルの引用（quote）
• <del>タグ：訂正等の削除箇所（delete）
• <ins>タグ：追記・挿入箇所（insert）
• <div>タグ：汎用の括り・部分（division）
• <img>タグ：画像（image）
• <form>タグ：入力フォーム（form）
• <table>タグ：表（table）
• <figure>タグ：図や画像など（figure）
• <code>タグ：コード（code）

なんか、いっぱいありますよね。HTML5で加わったblock-level要素は他にもありますし、その全てについて左右方向の設定をするのは大変ですよね。具体的には、左右の幅の設定（width）や、左右の余白の設定（margin）です。これをいちいち全部しているか、あるいは重複や漏れがないかなど、大変になりますよね。そこで、楽する方法をご紹介します。

親要素にパディングを指定して、見出しはマイナスマージンを指定

これが、楽して一気に左右方向の設定ができる方法です。まずは見出しのことは置いておいて、見出し以外に合わせて、外側の要素（親要素）のパディングを指定して、見出しのことは後から設定します。

見出し以外に合わせて外側のパディングを指定

今内容を書こうとしている部分の外側のタグ、例えば<div>や<article>ですが、これら外側のタグ（親要素）に左右方向のpaddingを設定します。これでどんなタグが来ようと、左右方向のpaddingはこれで一括でO.K.です。

div#hoge {
padding-right: 20px;
padding-left: 20px;
}


そして見出しはpaddingより外まではみ出します。

パディングからはみ出して左右に長くする

パディングを乗り越えて外側まで広げる方法は、marginにマイナスを指定することで実現できます。今回は見出しなので、<hx>タグの左右のmarginにマイナスを入れます。マイナスのマージンを指定すると、その数値の分だけ外側にはみ出すようになります。

h1 {
margin-right: -20px;
margin-left: -20px;
}

h2 {
margin-right: -12px;
margin-left: -12px;
}


このように、一括で外側のpaddingを指定して、見出しがpaddingの外にはみ出す方法は、何かと便利なので、使ってみるといいでしょう。例えば、paddingと同じだけマイナスのmarginを指定した場合、borderまで幅が広がります。一番上の<h1>タグでこれを使うと、ちょっとかっこいいデザインにすることもできます。再掲しますが、下の図のようなデザインです。

marginにマイナス値を指定すると、その分横幅は広くなります。なので同じ量だけ、widthとpaddingの合計を増やす点に注意が必要です。マージンにマイナス値を指定するテクニックは何かと便利なので、覚えておいて損はないでしょう。