[Work/Class/Web基礎/css_basic]

HTMLの構造とスタイルシートの関連付け

HTMLの入れ子構造

以下に挙げるhtmlコードは，典型的なブログスタイルのものである．→ブログスタイルHTMLのサンプルを表示． 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./stylesheet.css" />
  <title>CSS基礎 サンプルその0</title>
</head>
<body>

<div id="header">
  <h1>CSS基礎 サンプルその0</h1>
  <p>
    <span class="copyright">Copyright ©Daichi Ando All rights reserved. </span>
    <span class="date">Last-modified: 2016-04-26 (火)</span>
  </p>
</div> <!-- end of "header" -->

<hr class="nodisp" />

<div id="menu">
<p>
  移動メニュー:
</p>
<ul>
  <li><a href="./web_site_0.html">サンプルその0</a></li>
  <li> <a href="./web_site_1.html">サンプルその1</a></li>
  <li><a href="./web_site_2.html">サンプルその2</a></li>
</ul>
</div>

<hr class="big_sep" />

<div id="content">

<div class="item">

<h2>5月10日の日記 / <span class="date">2010-05-10 (月)</span></h2>

<div class="text">

<h3>今日の出来事</h3>
    <p>
      今日は忙しかった．
    </p>
    <p>
      <a href="http://www.sd.tmu.ac.jp" title="首都大学東京システムデザイン学部Webサイト">
        これは首都大学東京システムデザイン学部へのリンクです．
      </a>
    </p>
  

</div> <!-- end of "text" -->
</div> <!-- end of "item" -->

<hr class="small_sep" />

<div class="item">

<h2>5月11日の日記 / <span class="date">2010-05-11 (火)</span></h2>

<div class="text">

<h3>今日の出来事</h3>
    <p>
      今日も忙しかった．
    </p>
    <p>
      <a href="http://industrial-art.sd.tmu.ac.jp" title="インダストリアルアートコースWebサイト">
        これはインダストリアルアートコースへのリンクです．
      </a>
    </p>
  
</div> <!-- end of "text" -->
</div> <!-- end of "item" -->

</div> <!-- end of "content" -->

<hr class="big_sep" />

<div id="footer">
  <p>
    全てのコンテンツの責任は，安藤大地にあります．
  </p>
</div> <!-- end of "footer" -->

</body></html>

このコードの構造をを図示すると，以下のようになる．

先に提示したHTMLのソースコードの構造

bodyタグが全体を包み，その中に，それぞれheader, menu, content, footerのidを振られたdivで各要素が構成されている．さらに各div要素はhr(横線)タグによる横線で区切られている．

このように，ほとんどのhtmlは，入れ子構造になっており，この入れ子構造が綺麗に整えられていることで，html全体が意味を持つ(例えば視覚障害者向け読み上げブラウザなどで，正確に把握され読み上げられる)状態になる．

また，このような意味的構造は，適切な検索などにも有効である．

このhtml全体が「意味的な構造」を持つこと重視する考え方を，「セマンティック・ウェブ」と呼称することが多い．

入れ子構造に対するスタイルシートの指定の仕方

基本的な入れ子引き継ぎの概念

このhtmlの入れ子構造を利用することで，CSSスタイルシート側でも柔軟な指定が可能になる．

例えば，body全体に適用するcssは以下のようになる． 

body {
    /* 汎用的なフォントの設定 */
    font-family:sans-serif;
    line-height:150%;
}

ここで，見出しタグh2の中では先のbody全体への指定であるフォントsans-serifをそのまま使いたいが，pタグの中ではフォントserifに変更したいとする．

CSSの場合，中で何も指定しなければ上位(その要素を包んでいる大きな要素)の要素の指定が引き継がれ，包まれている要素の方で新たに指定すれば，引き継ぎは起こらない．

従ってこの場合， 

body h2 {
    /* font-familyの指定なし */
}
body p {
    font-family: serif;
}

と指定してやることで，h2とpの中で別のフォントを扱うことができる．

また頭にbodyが来る場合(つまりbody要素に対し適用する場合)，bodyを省略し， 

h2 {
    /* font-familyの指定なし */
}
p {
    font-family: serif;
}

のように書くことができる．

div idとclassへの引き継ぎ

この入れ子引き継ぎを使い，idやclass指定されているdivやspanなどにも柔軟に引き継ぎや変更を指定することができる．

先のhtmlコードの中の<div id="header">の中のpタグに対して文字色を明るい灰色に変更したい場合， 

#header p {
    color: #777777;
}

と記述し，<div id=header">の中のpタグの中の<span class="copyright">の中の文字を斜体に変更したい場合 

#header p .copyright {
    font-style: italic;
}

のように指定する．

htmlタグにclass名をつけてそれをCSSファイルで指定する場合「CSSファイルの中でタグ名とclass名の間にスペースを入れない」と前に書いたが，「そのタグがidやclassを持つdivに包まれている場合はスペースを入れなければならない」ことに注意されたい．

このhtmlファイルの中で「本文」と呼べるのは「div id="content"の中の，div class="item"の中のdiv class="text"の中のpタグ」であるため，この部分をCSSファイルで装飾するために指定するには以下のように書く． 

#content .item .text p {
    color: #AAAAAA;
}

以上のように，入れ子構造を意識したhtmlファイルを書くことで，divタグ以外のタグにclassを指定しなくてもCSS側で柔軟な指定を行うことができる．