CSS: 製作の流れ

パーツごとボックスに

文書構造を元に、見出しや段落といったパーツをボックスとして考えます。

ボックスとボックスの間隔は、ボックスの余白部分を変更することで調整します。

複数のボックスをまとめてボックス化

複数のボックスをまとめて一つのボックスとして考えることも重要です。以下のような使い方があります。

• 複数のボックスをまとめて枠線で囲む・背景をつける
• 複数のボックスを横に並べる
• 縦や横に並んだ複数のボックスの幅や高さを揃える
• ページを複数のボックスに分割する（ヘッダー、メニュー、コンテンツ、フッターなど）

また、ページ全体も一つのボックスとして考えます。

構造ごとにHTMLタグでマークアップ

文書の構造に基づいてHTMLタグでマークアップします。見出し（h1〜h6）、段落（p）、引用（blockquote）、箇条書き（ul）といったブロック要素や、強調（em）、引用（q）といったインライン要素などを用いてマークアップしていきます。

書式はCSSを用いて行うため、フォント（font）や太字（b）といった表現方法に関するタグは使いません。

複数のボックスをマークアップ

ボックスとボックスの組み合わせなどをマークアップします。見出しと文章といった構造を持つ場合には、セクション（section）を用い、そうでない文書構造的な意味を持たない部分をボックスにする際には、ブロック化（div）とインライン化（span）を使ってマークアップします。

スタイルシートは、要素（タグ）を指定して書式を設定します。そのため、ボックス概念のサンプルにあった２つの段落のように、「同じ要素には同じ書式」が適用されます。

逆に、他の箇所と区別をしたい要素にはid属性またはclass属性をつけて区別する必要があるのです。

文書内の複数箇所に現れるものにはclass属性を、一箇所ならばid属性を使用します。

例えば、ページのコンテンツ部分を囲うならば、<div id="contents">などでボックス化することで他のボックスと区別ができます。

大見出し
段落
中見出し
段落
中見出し
段落

<h1>見出し</h1>
<p>文章</p>
  <h2>見出し</h2>
  <p>文章</p>
  <h2>見出し</h2>
  <p>文章</p>

<section>
  <h1>見出し</h1>
  <p>文章</p>
  <section class="h2" id="h2_1">
    <h2>見出し</h2>
    <p>文章</p>
  </section>
  <section class="h2" id="h2_2">
    <h2>見出し</h2>
    <p>文章</p>
  </section>
</section>

<div id="contents">
<section>
  <h1>見出し</h1>
  <p>文章</p>
  <div class="h2" id="h2_1">
    <h2>見出し</h2>
    <p>文章</p>
  </div>
  <div class="h2" id="h2_2">
    <h2>見出し</h2>
    <p>文章</p>
  </div>
</section>
</div>

CSSを付けるためのHTMLの記述方法は理解できたでしょうか。

この授業では、HTMLのマークアップはあまり行いませんが、自分でHTMLを書く際には、文書の構造、ブロック化、他のタグとの区別といったことを考えてマークアップする必要があることをよく覚えておいてください。