HTMLの最近のブログ記事

iTunes でおなじみの検索ボックス スタイル

勉強しないとだめなのについ掃除を始めちゃう、そんな気分なので、こんなの preview.png を CSS で再現しちゃう。

こうしちゃう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>検索ボックス</title>

    
    <style type="text/css">
      #search input.word
      {
        margin: 0;
        padding: 0.4em 0.4em 0.4em 24px;
        width: 16em;
        border: 1px solid silver;
        background-color: white;
        background-image: url("search.gif");
        background-position: 4px center;
        background-repeat: no-repeat;
      }

      #search input.active
      {
        color: black;
      }

      #search input.passive
      {
        color: gray;
      }
    </style>
    
    <script type="text/javascript">
      this.onload = function ()
      {
        var word = this.document.forms.search.word;
        
        word.onfocus = function ()
        {
          if (this.value == this.defaultValue)
          {
            this.value = '';
            this.className = 'word active';
          }
        }
        
        word.onblur = function ()
        {
          if (this.value == '')
          {
            this.value = this.defaultValue;
            this.className = 'word passive';
          }
        }
        
        word.onkeydown = function (event)
        {
          var e = event || window.event;
          
          if (e.keyCode == 13)
          {
            if (this.value != '')
            {
              this.form.submit();
            }
          }
        }
        
        word.onfocus();
        word.onblur();
      }
    </script>
  </head>

  
  <body>
    <form id="search" action="#dummy">
      <p>
        <input type="text" name="word" value="検索キーワードを入力して下さい" class="word" tabindex="1" accesskey="F" />
      </p>
    </form>

  </body>
</html>

こうなった

サンプルはこちらです。

問題点

  • CSS のサポートが控え目なブラウザでは控え目なスタイルに。
  • JavaScript を切ってたら Firefox 等で送信できない。これは type="submit" な INPUT 要素を追加して CSS で見えなくするべきかしら?

更に問題点

間に合わなくなった。

現在の状態

UL, OL 要素は入れ子にする事が出来ます。この時、項目数や入れ子が多くになるにつれて、項目同士の親子・兄弟関係が見辛くなるかもしれません。
fig1.png

親兄弟関係を表す線を入れる

そこで、項目同士の関係を表すを入れます。線の表現は CSS でやりたいと思います。その為にルートとなるリスト要素に treeView というクラス名を付け、各リストの最後の LI 要素にも last というクラス名を割り振ります。
fig2.png

<ul class="treeView">
  <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      <li>11月</li>
      <li class="last">12月</li>
    </ul>
  </li>
  <li class="last">2006年
    <ul>
      <li>1月</li>
      <li>2月</li>
      <li>3月</li>
      <li>4月
        <ul>
          <li>1日</li>
          <li>3日</li>
          <li>4日</li>
          <li>20日</li>
          <li class="last">28日</li>
        </ul>
      </li>
      <li>5月</li>
      <li class="last">6月</li>
    </ul>
  </li>
</ul>

適用する CSS は以下の通りです。

.treeView
{
  background-color: white;
  
  font-family: "ヒラギノ角ゴ Pro W3", Osaka, Tahoma, Verdana, "MS UI Gothic", "MS Pゴシック", sans-serif;
  font-size: small;
  color: black;
}

.treeView,
.treeView ul,
.treeView ol
{
  margin: 0 0 0 20px;
  padding: 0;

  background-image: url("line_vertical.png");
  background-repeat: repeat-y;
}

.treeView li
{
  margin: 0;
  padding: 0;
  
  background-image: url("line_diverge.png");
  background-repeat: no-repeat;

  text-indent: 20px;
  line-height: 160%;

  list-style-type: none;
  list-style-position: outside;
}

.treeView li.last
{
  background-color: white;
  background-image: url("line_terminal.png");
}

項目最後の要素にクラス名を振るのが大変

更新が多い部分で用いる場合、クラス名を手作業で振り直すのはかなりの作業量です。許されるなら JavaScript でクラス名を割り振ります。

function setTreeViewStyle(list)
{
  list.className = "treeView";
  
  setTreeViewItemStyle(list);
}

function setTreeViewItemStyle(list)
{
  var items = list.childNodes;
  var marked = false;
  
  for (var i = items.length - 1; i >= 0; i--)
  {
    var element = items[i];
    
    if (element.tagName && element.tagName.toLowerCase() == "li")
    {
      if (!marked)
      {
        element.className = "last";
        marked = true;
      }

      var subItems = element.childNodes;
      
      for (var j = subItems.length - 1; j >= 0; j--)
      {
        var element = subItems[j];
        
        if (element.tagName)
        {
          switch (element.tagName.toLowerCase())
          {
            case "ul":
            case "ol":
              setTreeViewItemStyle(element);
              
              break;
          }
        }
      }
    }
  }
}

実際に利用する場合は以下のようにします。

<body onload="setTreeViewStyle(document.getElementById('tree'));">
  <ul id="tree">
    <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      ...後略

要素と属性の読み方

| | コメント(2)

HTML のこの要素はなんて読む?と聞かれて、はたと困った。
いつも人に伝える時は英単語ならそのままの発音で、頭字語ならアルファベット読みで言っていた。TD 要素をわざわざテーブル データ要素と言う人にあった日には、その人の幼少期時代に何があったのか想像してしまう。きっと筆箱のエンピツが背の高い順に並んでないと落ち着かないし、給食のパンにぬるジャムもかならず最後の一口分まで均等に振り分けられる人なんだ。残しすぎて甘すぎる事も、逆に味気なくなってしまう失態も犯すまい。なんて几帳面な人なんだ。
でも本来の読みを覚えておくのは、要素を覚えるのに都合が良いそうだ。確かに。イイクニツクロウ(1194)鎌倉幕府 とかとか。

HTML については W3C が仕様を策定している。そこから HTML 4.01 仕様書 を辿る。索引としてそれらしい文章が用意されていた。これでいいのかな?
要素の表は Description カラム、属性の表は Comment カラムから読み方が取れそう。

要素
http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html
属性
http://www.w3.org/TR/1999/REC-html401-19991224/index/attributes.html

また、DTD を参照するといいかも知れない。DTD とは文書型定義の事で、どれどれの文章はこう書くべきを示したような物。
HTML 4.01 Strict の DTD は http://www.w3.org/TR/html4/strict.dtd にある。これを適当なテキスト エディタで開いてみると、全ての要素の定義とコメントが書かれている。
例として P 要素を定義している部分を抜粋してみた。

<!--=================== Paragraphs =======================================-->
<!ELEMENT P - O (%inline;)* -- paragraph -->
<!ATTLIST P %attrs; -- %coreattrs, %i18n, %events -- >

コメント部分 (<!-- -->) で囲まれた部分に、Paragraphs と書いてある。P 要素の P とはこの事かも?と憶測できる。
また、他のバージョンや XHTML についても DTD が用意されていれば一度見てみるのもいいかもしれない。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちHTMLカテゴリに属しているものが含まれています。

前のカテゴリはCSSです。

次のカテゴリはJavaScriptです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

HTML: 月別アーカイブ

Powered by Movable Type 4.12