HTMLのレイアウトについてメモ

恥極まる話ですが、今までもっぱらHTMLのレイアウトはtableタグを使ってました。
ごめんなさい><
反省というか自戒の為、記録。


tmp1.htmlが今まで通りtableタグでレイアウトを構成したもの。
tmp2.htmlがtableタグを使わないようにしたもの。でも、多分もう少しうまくやればリテラルが減らせるんじゃないかな、と思ってます。

tmp1.html・・・tableタグを使ったもの


<html>
  <head>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      table.buttonlayout {
        margin: 50px;
      }
      table.buttonlayout th {
        color: white;
        background-color: blue;
        border: 1px solid blue;
      }
      table.buttonlayout td {
        background-color: skyblue;
        border: 1px solid green;
      }
      input {
        background-color: beige;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <table class="buttonlayout">
      <tr>
        <th>input-1</th>
        <td>
          <input type="text" value="txt1" size="10" />
          <input type="text" value="txt2" size="10" />
          <input type="text" value="txt3" size="10" />
        </td>
      </tr>
      <tr>
        <th>input-2</th>
        <td><input type="text" value="txt4" size="30" /></td>
      </tr>
    </table>
  </body>
</html>

tmp2.html・・・tableタグを使わないよう頑張ったもの

<html>
  <head>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .input1 {
        margin-top: 50px;
        margin-left: 50px;
        width: 580px;
      }
      .itemname1 {
        float: left;
        color: white;
        background-color: blue;
        border: 1px solid blue;
      }
      .itembutton1 {
        float: none;
        margin-left: 100px;
        background-color: skyblue;
        border: 1px solid gray;
      }
      .input2 {
        margin-top: 4px;
        margin-left: 50px;
        width: 580px;
      }
      .itemname2 {
        float: left;
        color: white;
        background-color: blue;
        border: 1px solid blue;
      }
      .itembutton2 {
        float: none;
        margin-left: 100px;
        padding: 4px;
        background-color: skyblue;
        border: 1px solid gray;
      }
      input {
        background-color: beige;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
      <div class="input1">
        <div class="itemname1">input-1</div>
        <div class="itembutton1">
          <input type="text" value="txt1" size="10" />
          <input type="text" value="txt2" size="10" />
          <input type="text" value="txt3" size="10" />
        </div>
      </div>
      <div class="input2">
        <div class="itemname2">input-2</div>
        <div class="itembutton2">
          <input type="text" value="txt4" size="30" />
        </div>
      </div>
    </table>
  </body>
</html>

という訳で、今日は自分の不勉強を鬱々と呪っておりました、とさorz

JTwitter・・・何日目?ワカンネ

ふと気付くと

id:itengineerさんに導入体験ブログを書いただきました!

サイトを移転しました。

って取り上げて頂いていたのを発見しまして、思いだしたようにメモ。


とりあえず、未だ0.9.1を使っております。
タイムラインで語られている事はだいたいこんなところですね。

  • 愚痴(と言ってもかなりソフトな奴)
  • お勧めURL
  • 挨拶(おはようBotが徐々に形成されつつあるw
  • 開発に対する思想のガチバトル(今日は開発時に使うブラウザについてとか
  • 進捗報告w

これまでMLで進捗報告とかしていた人たちが、JTwitterに流れてきたのは良かったですよ。なんせ進捗状況をかなりマメに書いてくれますから。それまでは、MLにメールを投げるという事もあってか、長文になってしまったり、状況をまとめて一気に出そうとしたりだったのですが、JTwitterのおかげで、極端な事を言うと「ファイル単位」に進捗状況が発表される、という感じです。

「メール以上、チャット未満」って感じでしょうかw


これは状況を知りたがっている管理者的な人にとって良いことだと思いますが、それ以上に「正直なところの進捗状況」を気軽に書いて発表出来るようになったというのが、一番でかいと思ってます。

「実はこれでひっかかっててさー」といった懸案を抱えていても帰る間際にMLにPOSTするまで誰にも言わなかったり(だから他の人がその懸案に気付けるのは最短で翌日><)、「終わりましたー」なんて思っていても「これ、足りてなくね?」みたいなものがあったり(他の人がそれ(ry

こういったことに素早く気付けるような環境は、座席が分散して内線で呼ばないと声も聞けないような環境で仕事をしている人間にとって、そうとうメリットがあると思います。「テストだりー」なんてPOSTに対しても、「テストコード書いた方が返って楽だよ」なんて話で盛り上がれる、ってだけでも生産性に寄与してるんじゃないでしょうかね(ノイズが無いとは言わないので正直微妙なとこですがw。


そういう意味ではBTSなんかと連携が出来ると楽しいのかな?
なーんて思いましたが、それはURLでも貼り付けておけば*1済むのでいらないかな、と思いました。
POSTがもくもくと埋もれていってしまうので、重要なステータス(たとえば仕様を詰めるような奴)だったらどうしよう><
という点も、別にArchiveから辿ってURLをそれこそBTSにでも貼り付けておけば良い訳で。

onBrowserというプラットフォーム上なので使い手側でなんとでも出来るし、むしろJTwitterはあくまで喫煙所という位置づけに留めておいた方が良いんだと思います。その為にも、やはり何でもPOSTしとく、というスタンスを僕自身徹底させないと駄目ですね(あ、もうやってる)。


唯一の問題は、僕の使ってるPCにインストールして運用を開始しちゃったことですかね。(共有させられるようなマシンがほかになかった><)どっかのタイミングでどかさないと、僕はいつまで経ってもPCの電源を落とせない。

*1:ちなみに0.9.1だと貼り付けられたURLの先頭に無条件にJTwitterのドメインが付いてしまっていたような。。。明日確認してみよ。