フォントビューアWebアプリを制作（その３）：miukumaukuの開発ブログ：SSブログ

	ブログをはじめるログイン

フォントビューアWebアプリを制作（その..｜フォントビューアWebアプリを制作（その.. ブログトップ

フォントビューアWebアプリを制作（その３）　[Webアプリ] [編集]

（その２）でスケッチしたフォントビューアWebアプリのUI画面レイアウトをHTML5で制作してみます。
HTMLファイルは、index.html、スタイルシートをstyle.cssとしてこの２つのファイルをテキストエディタで編集していきます。

まずは、画面レイアウトの構造を記述するためにindex.htmlを編集します。

HTML５のWebアプリをつくりますので、以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Font Glyphs Viewer</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
  </head>
  <body>
  </body>
</html>

とりあえず、これをHTML5のWebアプリのHTMLファイルのテンプレートにしてもよいかもしれません。

次にbodyタグ内の各ブロックを記述していきます。
まずは画面上部のヘッダ部分とフッタ部分を追加します。

  <header>
    Font Glyphs Viewer
  </header>

  <footer>
  </footer>

次は、ヘッダ部分とフッタ部分の間にコンテンツ部分を追加します。
コンテンツ部分の左側のグリフ一覧は、まずは上２行をとりあえずtableタグで書いてみます。

  <section id="contents">
    <section id="glyphs-table">
      <table>
        <tr><th></th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th></tr>
    <tr><td>U+002x</td><td></td><td>!</td><th>"</th><th>#</th><th>$</th><th>%</th><th>&</th><th>'</th><th>(</th><th>)</th><th>*</th><th>+</th><th>,</th><th>-</th><th>.</th><th>/</th></tr>
      </table>
    </section>
    <section id="preview">
    </section>
  </section>

index.htmlをまとめると以下のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Font Glyphs Viewer</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
  </head>
  <body>
    <header>
      Font Glyphs Viewer
    </header>
    <section id="contents">
      <section id="glyphs-table">
        <table>      
          <tr><th></th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th></tr>
          <tr><td>U+002x</td><td></td><td>!</td><th>"</th><th>#</th><th>$</th><th>%</th><th>&</th><th>'</th><th>(</th><th>)</th><th>*</th><th>+</th><th>,</th><th>-</th><th>.</th><th>/</th></tr>
        </table>
      </section>
      <section id="preview">
      </section>
    </section>
    <footer>
    </footer>
  </body>
</html>

この段階（HTMLファイルのみ）では、こんな感じにブラウザ（MacOS X版Chrome）で表示されます。