Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

studistory | イテレーション1 | HTML基本フォーマットの作成

概要

HTML基本フォーマットの作成

内容

HTML基本フォーマットの作成をします。
今後の工程でJavaScriptにより動的にタグを出力する際のテンプレートとなります。

仕様

HTML5のタグを利用してマークアップする
CSSでの見栄え調整は後のイテレーションで行う

HTML構成

・タイトル
・要約
・検索メニュー
・年月での絞込
・検索ボタン
・リスト
・ヘッダー
・各リスト

ソースコード

studistory.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>studistory</title>
</head>
<body>
  <header>
    <h1 id="title">studistory</h1>
    <p id="summary">学習履歴管理を行います</p>
  </header>
  <section id="search">
    <form name="studistoryform" id="studistoryform">
      <p><input type="month" /></p>
      <p><input type="submit" value="search" /></p>
    </form>
  </section>
  <section id="list">
    <table id="list" border="1">
      <thead>
        <tr>
          <th>todo date</th>
          <th>subject</th>
          <th>summary</th>
          <th>estimate</th>
          <th>start</th>
          <th>end</th>
          <th>total</th>
        </tr>
        <tbody>
          <tr id="2013091">
            <td id="tododate1">20130905</td>
            <td id="subject1">準備</td>
            <td id="summary1">日次 作業準備 アクティビティの割り当て メールチェック</td>
            <td id="estimate1">0.5</td>
            <td id="start1">2013/09/06 01:32:20</td>
            <td id="end1">2013/09/06 01:48:40</td>
            <td id="total1">0:16:20</td>
          </tr>
          <tr id="2013092">
            <td id="tododate2">20130905</td>
            <td id="subject2">アルゴリズム</td>
            <td id="summary2">アルゴリズム クイックソート</td>
            <td id="estimate2">2</td>
            <td id="start2">2013/09/06 01:48:42</td>
            <td id="end2">2013/09/06 02:00:24</td>
            <td id="total2">0:11:42</td>
          </tr>
        </tbody>
      </thead>
    </table>
  </section>
</body>
</html>

画像