Flash呼び出しのobjectタグに
<param name="wmode" value="transparent" />を加える。あとはz-indexプロパティの調整など。
Category Archives: Web Design
HTML4.01 のコメント記述について
White space is not permitted between the markup declaration open delimiter(“<!”) and the comment open delimiter (“–“), but is permitted between the comment close delimiter (“–“) and the markup declaration close delimiter (“>”). A common error is to include a string of hyphens (“—“) within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.
3.2.4 Comments – HTML 4.01 Specification から引用
コメント内に二つ以上の連続するハイフン（-）を含むことは避けるべき、というのは割と有名な話。Validationでひっかかりますからね。
ここで目から鱗なのは、コメント開始の <! と -- の間に空白文字を含むことは許されないが、コメント終了の -- と > の間に空白文字を含むことが許される、というところ。ということは
<!--
コメントだよ！！
-- >みたいなコードが仕様上はOKということ。
では実際のユーザーエージェントはこのコメントをどう解釈するんでしょう。 -- > みたいなコードをコメント終了とみなしてくれるのでしょうか。
手元にあるいくつかのブラウザで表示確認したところ
| IE6 / 7 | × |
|---|---|
| Firefox3 | ○ |
| Safari3 | × |
| Opera9 | × |
という結果に。ダメだこれは。。
しかも、大抵のエディタは -- > をコメント終了とみなしてはくれないようで、編集画面のシンタックスハイライトがおかしくなってしまいます。ということで、コメント終了は --> とするのが正解・・・。
ネガティブマージンによる段組みレイアウト
web creators 2008年10月号の巻頭特集に寄稿したネタの中から、サンプルを紹介してみよう企画、第1弾。
ネタ概要は本を買って誌面で見てね＾＾
ポイントは、ある要素の上marginをマイナスにすることにより、レイアウトをずらして直前の要素に重ねているところ。
サンプルでそれをしているのは、見出しとリンクボタンが横並びになっているところなのですが、サンプルを見れば分かる通り、両方とも画像です。
上にレイアウトをずらしているに過ぎないので、テキストなどの縦幅が可変の要素が中に入っていると、フォントの異なる環境での閲覧や、文字サイズ変更などによって、後続のレイアウトに影響が出ます。そんなわけで、縦幅可変になる要素のレイアウトにはあまり向いてません。
何だかここまで書くと、絶対配置でいいような気がしますね＾＾；floatも絶対配置も使いたくない、けれども段組にしなきゃならない、というレアなケースで活躍する・・・かもしれません・・・。
[XAMPP]WinXPローカル環境で複数ドメイン管理
XAMPPを使うと、ローカル環境でサイトの動作確認ができて大変便利です。
複数のサイトを制作・管理する場合、ローカル環境に複数のドメインがあったら便利だと常々思っていました。実際にやってみたところ、うまくいったのでその方法をご紹介します。
- 環境：
- Windows XP SP2
- XAMPP for Windows Version 1.6.6a
- XAMPPのインストールディレクトリはデフォルト設定のまま（C:\xampp）です。
- C:\xampp\apache\conf\extra\httpd-vhosts.confをテキストエディタで開き、
#NameVirtualHost *:80となっているところの先頭の#を取り除きます（コメントアウトを外す）。 仮にD:\htdocs\hogeというディレクトリをhttp://hoge.localhost/というサブドメインで参照したい場合、同ファイルに以下のように記述を追加します。
<VirtualHost *:80> DocumentRoot "C:/xampp/htdocs" ServerName localhost </VirtualHost> <VirtualHost *:80> DocumentRoot D:/htdocs/hoge ServerName hoge.localhost </VirtualHost> <Directory "D:/htdocs/hoge"> order deny,allow allow from ALL </Directory>他にもドメインを追加したい時は、同ファイルに続けて以下のように書きます。
<VirtualHost *:80> DocumentRoot D:/htdocs/fuga ServerName fuga.localhost </VirtualHost> <Directory "D:/htdocs/fuga"> order deny,allow allow from ALL </Directory>ファイルの修正が終わったら上書き保存します。
同ファイルに
<VirtualHost>の書き方のお手本がコメントアウトされた状態で書いてあります。それを見ると、ServerAdminやらErrorLogといった項目が書いてありますが、動かすだけならこれらを省略しても支障はないようです。C:\WINDOWS\system32\drivers\etc\hostsをテキストエディタで開き
127.0.0.1 localhostとなっているところを次のような感じに修正し、保存します。
127.0.0.1 localhost 127.0.0.1 hoge.localhost 127.0.0.1 fuga.localhost- apacheを再起動します。XAMPPコントロールパネルから「停止」ボタン→しばらく待ってから「開始」ボタン で再起動になります。そもそも起動していないなら、「開始」ボタンを押して起動させます。
- ブラウザでhttp://localhost/やhttp://hoge.localhost/にアクセスし、正常な表示ができるかどうかを確認します。
LineNumberWriter開発メモ
LineNumberWriterを作るに当たって気づいた点やその他補足など。自分で書いていて改めて気付きましたけど、かなりの欠陥品です…orz
基本設計
行番号を振るための処理は、基本的にsyntaxhighlithter.jsとほとんど同じ。というか、syntaxhighlighter.jsを参考にして作りました。
処理の流れとしては、
- まずページ内に<pre><code>とマークアップされている部分を取得します。
それら個々を<ol><li>番号順リストのマークアップに変換します。それら個々を<ol><li>番号順リストのマークアップに変換したものと、そのままのもの（プレーンテキスト）、それぞれ二つづつを生成します。プレーンテキストの方はデフォルトで非表示にします- 奇数行と偶数行のli要素それぞれに別のclass属性値を設定します。
- 変換後のコードとプレーンテキストとを切り替えるヘッダー部分を生成します。
最後にdiv要素で包みます（後でスタイルを整える都合）。最後にこれらをdiv要素内に書き出し、元の<pre><code>部分と差し替えます。
<pre><code>function sample() {
alert("sample");
}</code></pre>これが
<div class="LNW">
<div class="header" style="display:none">
<a href="#" class="ctrl1">with line number</a>
<span class="ctrl2">plain text</span>
</div>
<div class="header">
<span class="ctrl1">with line number</span>
<a href="#" class="ctrl2">plain text</a>
</div>
<ol>
<li class="odd">function sample() {</li>
<li class="even"> alert("sample");</li>
<li class="odd">}</li>
</ol>
<pre style="display:none"><code>function sample() {
alert("sample");
}</code></pre>
</div>こうなります。