「(X)HTML」カテゴリーの記事一覧

最近、Google カスタム検索エンジンのコードが変更されたみたいです。それも大幅に。
以前までは HTML ソースを直接貼り付ける方法だったんですが、新しいコードは JavaScript を使って HTML を呼び出しています。

前まではこんな感じ↓だったんですが、

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

新しいコードはこんな感じ↓。

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'ja'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchboxOnly("http://google.com/cse?cx=XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY");    
    customSearchControl.draw('cse-search-form', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

（※「XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY」は検索エンジン ID）

え……。何これ……。
と思わず言いたくなる変わりっぷりですね。
この記事の続きを読む

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます（色や距離やぼかし具合もコントロール可）。
ただし、IE 以外ですが。例に漏れず。

IE9 からは CSS3 にもある程度対応するそうですが、現行の IE8 までは完全に無視されます。

で、IE でも CSS3 を使えるようにしたり、ドロップシャドウを擬似的に実現する方法が幾つかあるらしく、色んなところで紹介されています。

• IEでもCSS3　その１（ie-css3） | ダリの雑記：WEBプログラム版
• IE6-8でもCSS3に対応するライブラリまとめ:phpspot開発日誌
• IEでCSS3を使う | Coder's Note
• IEでCSS3のドロップシャドウを使いたい
• IE に なんちゃって text-shadow: を実装する試み – latest log

ただ、なぜか上記の方法ではうまくいかず、結局「IE の独自拡張を直に書く」というベタ（？）な方法に辿り着きました。
なぜ他の方法が使えなかったのか、詳しい経緯は覚えてません。
ひょっとしたら、「本当はうまくいってたけど設定が間違ってて出来ないと勘違いした」なんてケースもあるかも……。
ちゃんと履歴は残しとかないとダメですねすいません。
この記事の続きを読む

えぇっと、色んなサイトを見ていて「あれ？　意外とみんな知らない？」と思ったことがあるので、サラッと書いておきます。
「んなことくらい知っとるわ！」という方は優しくスルーしてください。

一つ前の階層とルート

まずはおさらい。

HTML で一つ前の階層を指定するときは「../（ドット ドット スラッシュ）」と書きます。
例えば、

<a href="../index.html">一つ前の階層のトップページへ</a>

みたいな。

また、ルートのパスを指定するときは「/（スラッシュ）」のみを書きます。
例えば、

<a href="/index.html">トップページへ</a>

でトップページに戻れる訳です。

この2つは、どのサイトでもよく使われています。
特に前者は使わないワケにはいかないですからね。
（たまに全部を絶対パスで指定してるサイトもありますが）

同一階層

で、意外に使われていないのが「./（ドット スラッシュ）」。
これは、同一階層を指定する書き方です。
例えば、

<a href="./index.html">同一階層のトップページへ</a>

と書けば、同一階層のトップページへリンクできます。

しかし、このように書いているソースを見かけることは稀です。
その理由を考えてみると、恐らく最も大きいのは「書く必要がないから」。
つまり、

<a href="index.html">同一階層のトップページへ</a>

で問題なく動作します。
一つ前の階層を指定する場合（「../」）とは違い、「書かなくても良いんだから書かなくて良いじゃん」となってるんではないかと。

実際、僕も以前まではそうでした。

ただ、今となっては「書いたらいけない場合を除けば、書いた方が良い」という考えになっています。

「./（ドット スラッシュ）」を使おう！　の理由

僕の考えが変わった理由は、大きく二つ。

一つは、見た目に分かりやすいこと。
ソースをザーッと眺めていて、どこが同一階層でどこが別の階層か、ということを判別しやすくなります。
まぁこれは慣れとか気分的なものでしょうから、個人的なものかも知れません。

もう一つは、検索／置換がやりやすくなったこと。
これが個人的には非常にデカい！
DreamWeaver などのソフトを使っていれば気にすることではないのかも知れませんが、基本的にエディタで手打ちの僕にとって、検索／置換のしやすさは全体の作業効率に関わります。

例えば、「一つ下の階層にファイルをコピーして使う」場合、<a>タグのリンクから画像のリンクから js ファイルや css ファイルなんかのパスについても、（相対パスを使用していれば）一つずつ階層を追加してやる必要があります（「../」は「../../」に、等）。
こんなとき、同一階層の指定に「./」を使っていれば、一括で検索／置換できるので非常に楽なのですね。
もし「./」を使っていなかったら、「src=”」で検索したり「href=”」で検索したりしないといけなくなるワケです。
これはしんどい。だけでなく、ヌケやミスの原因にもなります。

注意点としては、「./」から「../」への置換は最後にすること。
「../」を「../../」にしようとしたとき、カブってしまうからです。
（もちろん「../../」がある場合は、そちらを先に「../../../」にしましょう）
（っていうかここまで深い階層を指定することがあんまりないか）

まとめ

サラッと書くつもりが結構長くなってしまいましたが、要するに、「./」って書いた方が実はハッピーになれるんじゃね？　ってことが言いたかっただけです。

もし「書かない方が良い理由」とかがあったら教えてください。

yuga.js という非常に便利な JavaScript があります。

多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例をご紹介。
この記事の続きを読む

Wikipedia には度々お世話になってます。
信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。

で、（やっぱり）こんなものまであったのか！　というページを発見。
»Unicode一覧表 – Wikipedia

はてブに登録したんですけど、他に登録している人は居ませんでした。
意外と使われてないんですかね。
それとも個別ページを登録してるとか？
まぁ何にせよ、便利です。

ついでに、よく使う Wikipedia のページをご紹介。
主に文字参照の調査用です。

• 文字参照 – Wikipedia
• ギリシア文字 – Wikipedia
• 丸数字 – Wikipedia
• ローマ数字 – Wikipedia