ボックスモデルのサイト作成.2

HTML5
    • 完成図


インデント
    • インデント : 文章の全体を下げたり、スペースを空ける。
      htmlの記述の際は必ず気にするようにする。
コメントアウト

注意書きのようなもので、実際のブラウザには表示されない。
<!-- コメントアウトしたい内容 -->

footer

本でいう奥付の部分

<footer>
   <small>COPYRIGHT (C) 1998-2013 Japan License Bank Corporation. ALL RIGHTS RESERVED.</small>
</footer>

smallタグの役割

  • <small></small>タグ HTML5では<adress></adress>が<small></small>になっている。
  • smallタグやadressタグは 会社の住所やコピーライトを使うときに使用する。
  • 正しいhtml構造のために、必ず<footer></footer>で囲う必要がある。

h1の役割

sectionタグ

  • <section></section> : 章のタグ

    入れ子構造を示すタグがなかったのでxhtml以前は見出しタグに頼っていた。それがsectionタグが出来た事で正しい入れ子構造が理解しやすくなった。
    現在も見出しタグはなくなったわけではないが、この場合必ずsectionを使用しなければならない。

＊sectionタグの利用

 <section>
        <h2>【html5使い所】</h2>
        <p>「これからはHTML5だ！」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p>
      </section><!-- 1章 -->
      <section>
        <h2>【W3Cの勧告】</h2>
        <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p>
      </section><!-- 2章 -->
      <section>
        <h2>【DTD宣言】</h2>
        <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Cのhtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7〜8に支障の無いタグにとどめておこう。</p>
      </section><!-- 3章 -->
      <section>
        <h2>【スマホサイト】</h2>
        <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p>
      </section><!-- 4章 -->
      <section class="last">
        <h2>【Media Queries】</h2>
        <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
        <section>
          <h3>【Respond.js】</h3>
          <p>IE6〜8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p>
          <section>
            <h4>【Respond.jsの問題点】</h4>
            <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
          </section><!-- 5章1節1項 -->
        </section><!-- 5章1節 -->
        <section>
          <h3>【html5shiv】</h3>
          <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript。</p>
        </section><!-- 5章2節 -->
        <section class="last">
          <h3>【条件付きコメント】</h3>
          <p>IEの独自仕様をhead内に記述。</p>
        </section><!-- 5章3節 -->
      </section><!-- 5章 -->