HTML基本

HTML

Webサイトで使われる言語

グラフィックツール

  • Illustrator
  • PhotoShop
  • Fireworks (CS6で開発中止)　← スライスツール等優れている面があるため、未だ需要がある。

[HTML5]ボックスモデルのサイト作成.1

    • 完成図


header

    <header>
      <h1>HTML5の使い所</h1>
      <p>W3Cの勧告までカウントダウン！さてIEは追従できるか否か！？</p>
    </header>
  • header直下に<h1></h1>を置く。
    HTML5の仕様
  • <p></p>は<h1></h1>を補足するもの。

nav

    <nav>
      <ul class="global">
        <li>1章：html5使い所</li>
        <li>2章：W3Cの勧告</li>
        <li>3章：DTD宣言</li>
        <li>4章：スマホサイト</li>
        <li>5章：Media Queries</li>
      </ul>
    </nav>
  • nav : グローバルナビゲーション
    Webサイト内の各ページに共通して設置される。
    サイト内の各コンテンツを案内するためのメニュー。

入れ子構造

<h2>【Media Queries】</h2>
        <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
          <h3>【Respond.js】</h3>
          <p>IE6〜8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p>
            <h4>【Respond.jsの問題点】</h4>
            <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
  • htmlのコーディングの際は、必ず入れ子構造を意識する。
  • 文章のまとまりは入れ子に出来る。 : 章<h2>→節<h3>→項<h4>