HTMLの最近のブログ記事

実際にガシガシと書く仕事とは少しはなれて、ソースを1から書くことはなくなった。
僕はcssでレイアウトする頃にwebを始めたから昔からあるコードなんか分からない。
どうやらW3Cでは91個htmlタグってあるみたいですね。

半分くらいしか分かりませんでした。
完全に自分の癖が分かります。コーディングに関わっている人は是非お試しを！

How Many HTML Elements Can You Name in 5 Minutes?
http://www.justsayhi.com/bb/html_quiz

42

こんな便利なタグがあるのは知りませんでした。
まずは、パスの指定のおさらい。

絶対パス

<a href="http://www.google.co.jp/">

みたいな指定の方法です。URLを直接記述する方法。
外部リンクのときにこの記述をするのが一般的。

相対パス

1.<a href="../../index.html">
2.<a href="/index.html">
3.<a href="/>

相対パスはいろいろな指定の方法がある。
ファイルのある場所を基準での相対指定のこと。
上記例の解説すると、

今のファイルを基準に上の階層を２つ上がったフォルダのindex.html
基本的にこの指定方法が一般的。

同じドメインの中で一番上の階層からファイルをたどる指定。
階層が深くなったりするときにこの指定を覚えておくと便利。

htmlファイルに限り、フォルダで指定すると、そのフォルダ内のindexファイルが最初に表示される。
システム化をして.htmlが.phpになったりすると結構面倒。
そんな時「/（スラッシュ）」
で指定を切ると、サーバー上のindexを探すので.php .html .aspなど拡張子が変わっても問題なく表示される。
しかし、リダイレクトや、htmlファイルをphpファイルとして扱う方法も存在する。

少々前書きが長くなってしまいましたが本題。

baseタグは、相対パスの基準を変えてしまうタグ。
１から構築のときはあまり使わないけれど、
構築後とか、htmlファイルのみを触る時なんかはファイルをそろえなくて済むので結構便利なものかもしれない。

あんまり意味がないけど、Apacheを入れたらローカルでも以下のように指定が可能。
<base href="http://localhost/----------pathtobase" target="_self">
逆にそんなことしたら消し忘れなんかがありそう…。

という事で、意外と知らないことが多いWEB業界ですね。

flashの埋め込みスクリプトをどうされていますか？

いろいろ海外のサイトを見て回っていると、
当たり前のようにフラッシュは、
SWFObject

というjsを使って埋め込まれています。

adobeからIEのアクティブ化を防ぐためのものが出されていますが、
これもその一種で、よく、Ajaxに関連するものなんかに使われています。

幅・高さ共に100%に指定する方法や、
adobeのサイトに飛ばなくとも、新しいバージョンをフラッシュ内でアップデートできるasも参照できます。

あるブログで翻訳されている方がいました。
結構使っている価値はあるかもしれませんね。

trick7.com blog: SWFObjectのドキュメントを日本語に翻訳してみたよ
http://www.trick7.com/blog/2006/06/15-135235.php

本家:
deconcept › SWFObject: Javascript Flash Player detection and embed script
http://blog.deconcept.com/swfobject/

僕が思うに、うまくCSSを書ける人はもちろんhtmlソースもうまく書ける。
で、簡潔に書いてあるソースっていうのは、実際まとまりで考えたオブジェクト指向である事が多い。
html
css

よく使うソースで以下のようなものがある。

<!--html-->

<div id="hoge">
<ul>
<li><a href="#">linktext</a></li>
<li><a href="#">linktext</a></li>
<li><a href="#">linktext</a></li>
<li><a href="#">linktext</a></li>
<li><a href="#">linktext</a></li>
</ul>
</div>

/*css*/
#hoge{
}
#hoge ul li{
}
#hoge ul{
}
#hoge li{
}
#hoge li a{
}
#hoge li a:hover{
}

<!--html-->
<table class="hoge">
<tr>
<th>title</th>
<td>item</td>
</tr>
<tr>
<th>title</th>
<td>item</td>
</tr>
<tr>
<th>title</th>
<td>item</td>
</tr>
</table>

/*css*/
.hoge{
}
.hoge td, .hoge th{
}
.hoge td{
}
.hoge th{
}

flashのネタを最近書いたばっかりだけど、gifアニメも面白い。使い方によったらcssの背景にも効くしね。あまり使わないかもしれないけど、ナビゲーションのマウスオーバー時の背景としたら、結構おもしろい効果が狙えそう。

こんなページを見てたらふとそんなことを思った。

http://www.ajaxload.info/

http://gigazine.net/index.php?/news/comments/20061111_web20_design/