伊那谷で働くWebデザイナーの日記

（別ウィンドウで開きます）

Webサイト制作においてこれからの主流になると思われるHTML5+CSS3を積極的に用いてサンプルサイトを制作しました。

サンプルサイトはトップページのみで、サイト内リンクをクリックしてもリンク先に移動しません。

最新技術を学ぶために制作したサイトなので、一部の古いバージョンのブラウザでは正しく表示出来ない場合があります。

その場合は是非以下の最新ブラウザをご利用ください。

Google Chrome（BETA）

Safari 4

また、一応HTML5のMarkup Validation Serviceはパスしたものの、正しくない文法や改善点があるかもしれません。その時はご指摘いただけると大変ありがたいです。  続きを読む

よみうさ先生にビジュアル系バンドの歌詞を提供してもらいました。

Visual Style Lyrics Generator


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
タイトル　闇の十字架と歯医者

張りつめた静寂に包まれた
約束の信州でオマエを待っているんだ
祈りの歌はまだ止まない
オマエにまだ届いていない

騒音(ノイズ)と白い吐息がただよう希望の見えない信州で見失った
どんなに答えを探してみてもかじかんだ手のひらにオマエをつかめずに

※両手を広げて空に祈りを
「オマエへ届くように」
モノクロの色彩で描く未来
進むべき信州へ

張りつめた静寂に包まれた
約束の信州でオマエを待っているんだ
祈りの歌はまだ止まない
オマエにまだ届いていない

(※くり返し)


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－


なんぞこれ？と思うかもしれませんが、ブログペットなどを開発した友人が新しく作った自動歌詞作成サービスです。

Visual Style Lyrics Generator  

インターネットエクスプローラーのバージョン6（IE6）では、透過PNGという半透明の画像をそのまま表示させることができません。通常は画像の背景が灰色で塗りつぶされてしまいます。

しかしIEシリーズにはfilterと呼ばれる独自のメソッドがあり、その中のAlphaImageLoaderを使うとちゃんと透過PNGが表示されます。

ですので、前回のjQueryで作るロールオーバーで作成したメニューを改良して、IE6でも表示できる半透明のメニューを作りました。

注意点はli要素とimg要素にwidthとheightを同じに設定するところです。チュートリアルをちゃんと読んでいなかったがためにこの設定を見逃し、メニューが何も表示されないまま小一時間ほど悩んでしまいました。  続きを読む

おっさんホイホイのブログパーツを見つけたのでご紹介。

←（サイドバー上部）にある「STEAL」をクリックしてください（音が出るのでご注意下さい）。消したので以下のリンクからご確認ください。

SPECIAL BLOGPARTS スペシャルブログパーツ
（音が出るのでご注意下さい）

  

ロールオーバーとはリンク画像などにカーソルを乗せた際、別の画像と置換することをいいます。

cssでも背景画像を換えることによって実現できますが、画像に文字が埋めてある場合はリンクテキストをindent:-9999pxなどで画面の外に出さなければなりません。

最近まではよくある方法だったのですが、どうもgoogleはこの方法を悪く評価するらしい、と噂で聞いたのでロールオーバーはｊQuery(Javascript)を利用する方法が多くなるかもしれません。  続きを読む

今回はリンクや画像にカーソルを載せたときに表示される「ツールチップ」作成しました。

2種類作りましたがそれぞれ作り方が違います。

1つ目はリンクの後にツールチップの内容を書きます。スクリプトを工夫することにより、リンクとツールチップを後から増やしてもスクリプトを変更しなくてもいいようにしました。ただし、Javascriptがオフの環境ではレイアウトか崩れ見た目が悪くなります。

2つ目はツールチップを最後に置いてあります。これによりJavascriptがオフの環境でもレイアウトは比較的キレイで見やすいです。ただし、ツールチップを増やすのにかなり複雑なスクリプトになる・・・と思います。  続きを読む

前回製作したアコーディオンパネルと同様に、限られたスペースを有効に使えるタブパネルを作りました。

難しかった場所はスクリプトに出てくる、

li:not("+$("ul.tab li a.selected").attr("href")+")

という部分でした。訳すと「クラス"tab"を持つul要素以下のli要素以下のクラス"selected"を持つa要素の属性値と一致しないli要素」になります。

これでまずselectedが設定されているa要素意外に対応するpanelを指定したことになり、それをhide()で隠しています。

あと今回は、メニューリストの部分にCSS3を使ってグラデーションをかけてみました。
safariやgoogle chromeで見ると綺麗なグラデーションがかかっています。  続きを読む

webサイトの限られたスペースを有効使うことができる「アコーディオンパネル」をチュートリアルに沿って作ってみました。

その中で分からなかったことが一つ。スクリプトで出てくる

$("+dd",this).slideDown("slow");

上記のthisがよくわかりませんでした。

全体的に「現在参照されている要素の次のdd」というセレクタであることはわかるのですが、セレクタのあとに,thisなんて使い方をはじめて知ったので、そんな使い方もあるんだなと。

こういうのはgoogleでも検索しにくいんですよね。this自体がありふれた単語なので。  続きを読む