前にも同じことで悩んだ記憶がある…と自分のブログを探しまわったんですが、全然情報が無い…。何でだろうと思って良く見てみると、ただの HTML の打ち間違いでした。

1
2
3
4
5
6

<div class="list admin_list" action="/new/list" method="post">
   <form class="data_form">
      <input type="text" class="title" name="title" />
      <input type="submit" class="submit" value="新しくリストを作成する" />
   </form>
</div>

正しくは以下でした。

1
2
3
4
5
6

<div class="list admin_list">
   <form class="data_form" action="/new/list" method="post">
      <input type="text" class="title" name="title" />
      <input type="submit" class="submit" value="新しくリストを作成する" />
   </form>
</div>

こんなアホなミス、どおりでメモしてない分けです。
ブラウザのバグか！？とか考えて本当に申し訳ない。

皆さんもちょっとしたミスかもしれないので、同じことで悩んでいたらまずは HTML を見てみましょう！

input のラジオボタンとかチェックボックスとかに使う checked。XHTML では checked=”checked” と書かなきゃいけないらしい。ラジオボタンとかチェックボックスなんてめったに使わないからかなり戸惑った。

1
2

<input type="radio" name="foo" value="bar" checked="checked" />
<input type="checkbox" name="bar" value="foo" checked="checked" />

以上のような感じで頑張ろう。それと、最近システム構築を担当させていただくことになりました。嬉しいです。やっぱりデザイン方面よりシステム方面が向いてるのだと思う。向いてるっていっても結局は Web 関連じゃないと面白くないから PHP とか CGI とかその辺が良いかなぁ。

例えばお問い合わせフォームを作る時、以下のようになることがあると思います。

1
2
3
4
5

<form method="post">
<table>
<tr><th>名前</th><td><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10">

これは問題の無い場合です。しかし以下のようになると問題が発生します。問題が発生するというか、本来これは間違った書き方になるので問題が発生するしないに関わらずダメなんですが、通常どのブラウザでも問題なく表示されてしまうのでミスだということに気付けません。

1
2
3
4
5
6

<table>
<tr><th>名前</th><td><form method="post"><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10"></textarea><br />
<input type="submit" value="メール送信" /><input type="reset" value="クリア" /></form></td></tr>
</table>

しかし、上記のような間違った書き方をしているファイルを、Ajax.Updater で部分的に更新させるために別で読み込もうとすると IE Chrome Opera Safari などのブラウザでは問題なく表示されますが、Firefox ではレイアウトが崩壊するようになります。おそらく CSS が上手く適用されなくなるのが原因だと思われますがあくまで推測です。Firefox は真面目で本当に良い奴ですね。

Firefox にバグがあるわけではなく、Firefox が Ajax に上手く対応できていないわけではなく、自分が間違っているので　Firefox に怒らないでください。私は(Firefox にもバグあるじゃないか！と)怒ってしまったので後悔しています……。

1
2
3
4

<form method="post" name="form">
<input name="array[]" type="hidden" value="100″ />
<input name="send" type="submit" />
</form>

form から二次元配列を post できるなんて知らなかったー最悪だ。
JB_Plus » HTMLのFORMから２次元配列をＰＯＳＴする方法
POSTの値を配列として受け取ってソースを効率的にしたい。 – 教えて！goo

ファビコンとは、いわゆる「お気に入りアイコン」のことです。
サイトをお気に入りに追加した時に左側に出てくる画像、アドレスバーのアドレスの左側にある画像、タブなどに表示されている画像。あれがファビコンです。
ファビコンには、普通の画像「gif」や「png」などは使用することができず、代わりに「ico」という独自の形式の画像を用意する必要があります。

ファビコンの作成はとても簡単です。誰でもできます。
このページでは画像を作成・変換し、設置するところまで順を追って説明しています。参考にしてもらえれば幸いです。
(続きを読む…)

よく http から始まるものを絶対パスと呼んでいるサイトを見ますが、本来 http から始まるものは絶対URIというものらしいです。

そして実は、/から始まるパスのことを、絶対パスというそうです。

絶対URIの例

http://c-list.net/category/index.html

http://kezy.org/2008/12/265.html

絶対パスの例

/index.html

参考にさせていただいたページ

/から始まる絶対パス – TAG index
絶対 URI, 絶対パス < 02 < September < 2006 < nulog, NULL::something : out of the headphone

.htaccessに次の一行を追加することで、簡単に設定することができます。

1

AddType application/x-httpd-php .htm .html

PHPの隠蔽 – Manualを参考にさせていただきました。

ただこの方法だと、サーバーに負荷がかかるそうなので、注意が必要だそうです。

ちなみに、私は.htaccessに上記の一行を追加したのですが、うまくいかず次のような文が出てきました。

1

Parse error: syntax error, unexpected T_STRING in /virtual/user/public_html/example.com/index.html on line 1

一瞬XREAだからダメなのかと勘違いしてしまいましたが、そうではなくて一行目にエラーがあるということみたいです。一行目を修正することでうまく表示させることができました。

今回は私がHTMLを書く上で良く訪れるページベスト3位を紹介します。
(続きを読む…)