移転しました

サイト移転しました．http://clipfog.dyndns.org/

css&xhtml

• CSSで展開式メニューを実現する
• 日本語文章を両端揃えにする
• CSSでロールオーバーを実現する
• Win・Mac共通のフォント
• ブラウザパスフィルター
• JavaScriptによるCSSの切り替え
• サイトロゴのWeb標準化

CSSで展開式メニューを実現する

メインメニューにマウスを当てるとサブメニューが開くという、ドロップダウンメニューをCSSだけで実現します． ただし、IEに限り:hover擬似クラスがa要素にしか適用できないのでメインメニューしか表示されません． IE7ではこの問題が解決されることを願いつつFirefoxなどの新世代ブラウザをターゲットにします． ・・・Operaでは正常に表示されないっぽいです．汗．

HTMLおよび必要最低限のCSSは以下です．

<!-- DropDownMenu XHTML Ex ************************************************--> <div id="ddmenu"> <ul> <li><a href="#">menu1</a> <ul> <li class="sub"><a href="#">1-1</a></li> <li class="sub"><a href="#">1-2</a></li> <li class="sub"><a href="#">1-3</a></li> <li class="sub"><a href="#">1-4</a></li> </ul> </li> <li><a href="#">menu2</a> <ul> <li class="sub"><a href="#">2-1</a></li> <li class="sub"><a href="#">2-2</a></li> </ul> </li> </ul> </div> /* DropDownMenu CSS ----------------------------------*/ #ddmenu { overflow: hidden; height: 10em; margin-bottom: -8em;} #ddmenu li { display: block; float: left; height: 2em; margin: 0; padding: 0; list-style-type: none;} #ddmenu li.sub { clear: left; position: relative; top: -10000px;} #ddmenu li:hover li.sub { position: relative; top: 0;} #ddmenu a { display: block; width: ~px; line-height: 2em;}

#ddmenuでメニュー全体の枠を作ります．この場合、サブメニューが最大4つなので2×(4+1)=10emの幅を取ってあります（1はメインメニューの分）．margin-bottom: -8emでもとの高さに戻しています．position: relativeとし、平常時は-10000pxで見えないところへ飛ばしていますが、ポインタを重ねたときにもとの位置に戻ってくるようにしています．position: relativeは重要です．line-height: 2emとすることによって文字の縦位置を中央に持ってきています．

CSSが少々（かなり？）まどろっこしい感じですが、これでもスッキリさせたほうなのでカンベンしてください．汗．基本構造は上記のものだけで、見た目を良くしようとするともっとコテコテになります．見た目の改良は正しく動作するのを確認をしてから記述することをお奨めします．

日本語文章を両端揃えにする

まだ新しいプロパティなので対応しているブラウザは限られますが、IE6とFirefox1.5などでは対応しています．

『両端揃え』とは、右図のように左端（文章折り返し部分）に余分なスペースを作らずに揃えることを言います（印刷物のような見栄え）．これは一文字一文字の間隔を微小にブラウザが調整してくれているからです．

text-justifyプロパティはW3C（Wirld Wide Web Consortium）で審議中のCSS3のプロパティですが、それをIEが独自に実装し、今ではFirefoxでも正常に動作します．

text-align: justify; text-justify: inter-ideograph;

上記の2行をセットで記述します．text-alignプロパティがjustifyでないとtext-justifyは効果をなしません．inter-ideographは日本語を両端揃えにしてくれる値です．

CSSでロールオーバーを実現する

CSSで画像の切り替え（ロールオーバー）を実現します．JavaScriptでロールオーバーさせる方法が一般的ですが、CSSでも意外に簡単にできます．

CSSでのロールオーバーには色々な方法がありますが、ここではJavaScript同様に複数の画像を使うやり方を説明します． ただ、IE6とFirefoxでしか動作確認していません．他のブラウザでどうなるかは不明ですが、最近のブラウザなら大丈夫だと思います．

<a href="#cxcr" id="roll"></a>

HTMLで上記のように記述した場合、CSSは下記のように記述します．

/* RollOver CSS -------------------------*/ #content a#roll { display: block; width: ~px; height: ~px; background: url(img-before.gif); } #content a#roll:hover { background: url(img-after.gif); }

”display: block”でインライン要素のaをブロック要素に切り替えています（重要）．widthとheightには画像のサイズを入れます．上記の記述は必要最低限のものなので、あとはお好みで．

Win・Mac共通のフォント

Web標準でデザインする際、問題の一つはフォントです．WinとMacの両方で標準インストールされているフォントでないと、Winで意図したとおり表示されてもMacだと全く違ったり、その逆のことも起こります． 下の画像はWinとMacで共通に標準インストールされている主なフォントです．

Arialはゴシックフォント、Courier Newは等幅フォント、Georgiaは明朝フォント、Verdanaはゴシックフォント． ArialよりはVerdanaがポピュラーです．ソースコードなどを記述するときはCourier Newが使われるのが普通のように思います（見やすいため）．

なお、CSSのfont-family指定は最後に”sans-serif（ゴシック）”、”serif（明朝）”、”monospace（等幅）”などで定義しておくのがWeb標準準拠です．

/* CSS font-family Ex */ p {font-family: "Verdana",sans-serif;} pre {font-family: "Courier New",monospace;}

ブラウザパスフィルター

CSSでサイトをデザインする場合、古いブラウザだと表示が崩れることがよくあります．ユーザーが最新のブラウザを使っていれば一番いいのですが、最新のバージョンを使っていないユーザーもいるので、逆に古いバージョンのブラウザにはCSSを適用しないようにする方法も一手です．古いバージョン独特の欠陥を利用してフィルターを作ります．

パスフィルターは色々ありますが、うちのサイトで使用しているものだけ．

<!-- Netscape 4.x を弾く --> <link rel="stylesheet" type="text/css" href="read.css" media="all" />

head内に上記のような外部CSS呼び出しコードを記述するとき、「media="all"」を記述することによってNetscape 4.xを弾きます．read.cssを呼び出します．

/* IE 4.x 以下を弾く */ @import "read2.css";

次にread.cssに上記のように一行だけ記述しread2.cssを呼び出し、さらに

/* Mac版IE 4.5　を弾く */ @import url("main.css");

read2.cssの中に上記の一行を記述し、メインとなるCSSを読み込みます．この場合、外部CSSファイルは3つ（read,read2,main）必要になります．やり方によっては2つでもできます．

なお、ここで弾いたブラウザのみに特定のメッセージを表示したいのであれば

<div id=message> <p>最新のブラウザで閲覧してください．</p> </div> /* main.css ----------------------------*/ div#message {display: none;} 試してはいませんが汗、これで弾いたブラウザのみに「最新のブラウザで閲覧してください．」というテキストが表示されるはずです．

JavaScriptによるCSSの切り替え

有名ウェブクリエーターらが執筆しているWebデザインに関するオンラインマガジンA List Apartからの出展．FirefoxなどのブラウザではツールバーからCSSのスタイルを切り替えることが可能ですが、それをページ上から可能にするというもの．JavaScriptを使います．

Working With Alternate Style Sheetsからstyleswitcher.jsという外部JavaScriptファイルをダウンロードします．

<link rel="stylesheet" type="text/css" href="~/main.css" media="all" title="default" /> <link rel="alternate stylesheet" type="text/css" href="~/style1.css" title="otherstyle1" /> <link rel="alternate stylesheet" type="text/css" href="~/style2.css" title="otherstyle2" /> <script type="text/javascript" src="~/styleswitcher.js"></script>

上記のようなものをhead内に記述．

<div id="style"> <a href="#" onclick="setActiveStyleSheet('otherstyle2'); return false;" title="style B">~</a> <a href="#" onclick="setActiveStyleSheet('otherstyle1'); return false;" title="style A">~</a> <a href="#" onclick="setActiveStyleSheet('default'); return false;" title="default">~</a> </div>

上記のようなものをbody内に記述．リンクをクリックしてCSSが切り替われば完成．jsファイルはcssファイルと同じディレクトリに入れるほうが無難だと思います．

サイトロゴのWeb標準化

サイトロゴの標準化にはいくつかの方法がありますが、音声ブラウザで困ったことにならない最適と思われる方法．

/* site logo CSS ----------------------------------*/ div#header{width: 100%;} div#logo { width: ~px; height: ~px; background: url(logo.gif) no-repeat top left; } div#logo h1 { text-indent: -10000px; } <!-- site logo XHTML *********************************--> <div id="header" title="Site LOGO"> <div id="logo"> <h1>Site Title</h1> </div> </div>

width,heightにはそのロゴのサイズを入力する．

「text-indent: -10000px;」という大げさな値で”Site Title”を見えないところに飛ばし、CSSで背景画像としてロゴを表示する．このとき、必ず「-（マイナス）」であること．この方法でロゴを表示した場合、音声ブラウザでもしっかりと”Site Title”が読まれます．

うちのサイトの場合、<div id="header">で挟んでこのようにしないとIEとFirefoxでmargin,paddingの表示に違いが出ました．こうしておいたほうが無難かもしれません．

ajax

• はじめに
• DOMを使う

はじめに

筆者もまだAjaxを学び始めたばかりで偉そうなことは語れないのですが、筆者がAjaxというものを勉強していく過程で自分の知識の定着もかねてメモをしていき、それを公開することでどなたかのためになれば一石二鳥です．

Ajaxについて、ここを見ている方は、いくらかの知識を持っていることと思います．Ajaxを知ったきっかけがGoogle Mapだという人も多いはずです．

ご存知の通り、Ajaxというものは新しいツールではありません．主によく言われるのがJavaScript＋XMLというものですが、必ずしもこの二つ以外のものを使ったらAjaxではない、ということではありません． PerlだってPHPだって使っていいのです．

しかし、AjaxというテクニックにJavaScriptは無視できないものです．今回はJavaScriptの開発環境を紹介するに留めます．

『Aptana: The Web IDE』
Aptanaという統合開発ツールを使います．EclipseがベースなのでJavaで書かれています．

『[IDE]Aptana StandAlone版の日本語化』
日本語化が必要な場合はこちらを参考に．

また、勉強を始めたばかりと書きましたが、当サイトではある程度のプログラミングの知識はあるものとして話を進めていきます． （それはつまり筆者の都合上です．汗）　よって、Javaなどのオブジェクト指向言語が全く分からない方は厳しいこともあるかもしれませんが、ご了承ください．

もちろん、CにしてもJavaにしてもJavaScriptにしても筆者はぺーぺーなので、そこまでハードルの高いことはできません．なので、熱意のあるチャレンジャーであれば問題はないかもしれませんね．汗．

DOMを使う

DOM（Document Object Model）はAjax開発を行ううえで重要な部分となるでしょう．JavaScriptにおけるDOMの実装意義はドキュメントの構造変更が行えることにあります． 現時点では「JavaScriptを使ってHTMLを書く・リアルタイムに変更を加える」などのように考えてしまってかまわないと思います．しかし、言葉でいくら説明するよりも実際に感覚で覚えてしまうのが一番早いでしょう．

以下にサンプルプログラムを示します．

<!-- index.htm --> <!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> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <script type="text/javascript" src="main.js" charset="utf-8"></script> </head> <body> <form onSubmit="func(this.box.value); return false;"> <input type="text" size="40" id="box" value="Write a text." /> <input type="submit" value="Push The Button" /> </form> <p><span id="result"></span></p> </body> </html> /* main.js */ function func(value){ var span = document.getElementById("result"); span.innerHTML = value; }

サンプル

このプログラムはフォームに入力したテキストをそのままspan要素に放り込むというプログラムです．これ自体はAjaxとはもちろん言えません．しかし、DOMはAjax開発をするうえでとても重要なテクニックになります．

head要素終わりまでの部分はHTMLの基本的な部分ですので説明は省きます．

onSubmitを使って関数funcにテキストボックスの中の値を渡しています．この値の指定の仕方は、thisつまり”この”フォームのboxというidのvalueの値を指定しているということです．（なお、return falseは必ず必要になります．） この値が関数funcに渡ると、spanという変数にresultというidの（ここではspan要素）オブジェクトが入り、そのオブジェクトの中に取得したvalueの値を入れるという仕組みです．

文字で説明するのは非常に難しいのですが、このシンプルなプログラムを目で追って見ていけばそれほど理解に苦しむことはないと思います．

以上のことから分かるようにAjax開発にはJavaScriptだけでなくHTMLの知識も充分に必要になりますのでやっかいですね．

appendix

• behaviorの便利な使い方

behaviorの便利な使い方

behaviorプロパティはIE独自の拡張機能ですが、これを使うとSafariやFirefoxにはできてIEにはできない問題を解決することができます．

IEは擬似クラスの:hoverをa要素にしか使えないのに対し、SafariやFirefoxはa以外の要素にも:hoverクラスを使えます．その問題点をbehaviorプロパティで解決できます．

Peternedというサイトからcsshover.htcをダウンロードし、自前のCSSに以下の記述をします．

/* behavior CSS ----------------------------------*/ body { behavior: url("csshover.htc"); }

たったこれだけで、IEでa要素以外にも:hoverを適用させることができます．
参考サイト：WEBFACTORY

about

当サイトはWeb標準に準拠したサイトを作るうえでのXHTML&CSSのテクニックを研究、実践したサイトです．
※リンクフリー & バナー直リンクOK!!!!

IE 6.0、Firefox 1.0、Opera 8.0、Netscape 7.1で正常動作確認済み．IE 4.x以下およびMac版IE 4.5、Netscape 4.xにはCSSが適用されないようにしています．最新のブラウザであれば意図した外観をご覧いただけます．
Get Firefox !!

site name	clipfog (clipfog.org)
author	Tee （ティー） / 男 / A型 / 学生
favorite	川上弘美、長嶋有、音、本、木
love	Rock'n Roll
hate	Rock'n Roll
character	トロい

A mouse may help a lion.