SHOWZINE | Nakagawa Showjin’s Weblog

Thickbox3でhtmlページを表示する

thickbox3を利用して他のページ（htmlファイル）をthickboxウィンドウ内に表示するためのメモ。（jquery1.2.6を使ってIE6と7とFx3で確認）

thickbox3やjqueryのdownloadは「ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示」で、まとめて解説されているので参照のこと。

とくに難しいことは全然ないんだけど、写真画像を表示するのと違ってhtmlページを表示する場合はインラインフレームを使用した以下のような記述がベターっぽい。

<a href="ウィンドウ内に表示するhtmlページへのパス?TB_iframe=true&width=幅&height=高さ" class="thickbox" title="">

ファイル名の後に「?height=縦サイズ&width=横サイズ」を追記しただけだと、そのページでCSSを使用しているときに、なんかとんでもない表示崩れが起こる。（少なくとも俺の環境では）

なので、前述のような記述でインラインフレームを使おう、と思った。

Add comment 8月 20th, 2008

手書き風日本語のプロポーショナルフォント『ミウラLINER_jr』

コリスさんとこで知ったフリーフォント『ミウラLINER_jr』。

手書き風日本語のプロポーショナルフォント。Mac、Winどっちも用意されている。

フリーフォントでも漢字が440字（小学生三年生くらいまでで習うものに限定して、ってことらしい）も入っていてグレイト。

記号とかプラスアルファが加わった『ミウラAI』と『ミウラBlock』もあり。（こちらは有償でDEX WEBで購入可能らしい）

個性的なフォントなんで使い場所、用途は限定されるし注意が必要だけど、ちょっとしたバナーとか、アクセントにグイグイ使えそうで、とてもいい感じ。

フォントだけじゃなくて、サイトの世界観、テイストなんかも魅力的でナイス。

http://www.mopstudio.jp/

Add comment 8月 13th, 2008

CSSでリモートロールオーバー

リモートロールオーバーをJavaScriptじゃなくてCSSで。（こういうのをそう呼ぶって今日ググってて初めて知った）

キャプチャ画像にあるように、小さいサムネール画像の上にポインタをのせると左側のでっかい表示部分にそのサムネールの拡大画像が表示されるっていうやつ。

ちょっと変則っていうか反則っていうかトリッキーっていうか、あんまり威張って使えないような内容の気もするけど必要だったので。（あとでもうちょっとスマートに出来ないか考えてみよう）

このソースを元にツールチップの表示なんかにも使えそう。

CSS

dl{
    position: relative;
    /* マウスオーバーで出現する画像の位置を指定するときに基点となる */
}

a span{
    display: none;
    /* マウスオーバーで出現する部分で通常は隠れている */
}

a:hover{
    display:block;
}

a img{
    /* サムネール画像のサイズ */
    width: 80px;
    height: 60px;
}

a:hover span{
    /* マウスオーバーで出現する画像の場所を指定 */
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

a:hover span img{
    /* マウスオーバーで出現する画像のサイズ */
    width: 300px;
    height: 225px;
}

(x)html

<dl>
<dt><img src="./img/sampleBread1.jpg" width="300" height="225" alt="" /></dt>
<dd>

<div>
<a href="#"><img src="./img//sampleBread2.jpg" alt="" />
<span><img src="./img//sampleBread2.jpg" alt="" /></span></a>
</div>

<div>
<a href="#"><img src="./img//sampleBread6.jpg" alt="" />
<span><img src="./img//sampleBread6.jpg" alt="" /></span></a>
</div>

</dd>
</dl>

実行サンプル

Add comment 7月 30th, 2008

CSSによる背景画像のロールオーバー

メニューボタンが画像で、それをCSSの背景画像で制御してロールオーバーさせるやつ。よくあるあれ。仕事でもけっこう使うのに、毎回思い出すのにちょっと時間をロスっているのでメモ。

マウスのロールオーバーで切り替わる画像は同一の画像で作成。いわゆるCSS SPRITEというやつ。（実際のそれはもっとたくさんの画像を一つにしてるけど）背景画像の表示位置を変化させることでロールオーバー効果を得ている。

CSS

#globalNavi a{
    display: block; /* こうしてblock要素に指定しないとa要素は背景を表示しない */
    width: 108px; /* 背景画像と同じサイズを指定して表示領域の確保 */
    height: 40px;
    text-indent: -200px; /* テキストはマイナスインデントで表示領域外へ */
    overflow: hidden; /* 表示領域外のものはhidden */
}

#globalNavi a.home{
    background: url(/statics/pc/btnGlobalNaviHome.gif);
}

#globalNavi a:hover.home{
    background-position: 0 -40px;

}

(x)html

<ul id="globalNavi">

    <li><a href="#" title="ホーム" class="home">ホーム</a></li>

<#-- /globalNavi --></ul>

Add comment 7月 2nd, 2008

サイトロゴを背景画像で表示した上でリンクを張る

ヘッダ部で表示するサイトのロゴを画像で。それをクリックするとホームへ、っていうよくあるやつ。SEOのことを考慮して、背景画像を表示するけど、ソース内にはテキストがあって、CSSをdisableにするとそのテキストが表示されるっていう、よく使うやつ。（h1をリンクで囲ってその中にサイト名やキーワードも記述）

xhtml

<a href="#" id="homeLink">
    <h1><span>sitename/keyword</span></h1>
</a>

CSS

a#homeLink{
    background: url(siteLogo.gif);
    display: block;
    width: 200px;
    height: 40px;
}

a#homeLink h1{
    margin: 0;
}

a#homeLink span{
    margin: -1000px;
}

Add comment 6月 19th, 2008

JavaScriptでtexareaの高さを自動調整

404 Blog Not Found さんのエントリーで面白い＆有用なものを見つけたのでメモ。
javascript - 勝手に添削 - textareaの高さを自動調節 より

JavaScript

function resize_textarea(ev){
    //if (ev.keyCode != 13) return;
    var textarea = ev.target || ev.srcElement;
    var value = textarea.value;
    var lines = 1;
    for (var i = 0, l = value.length; i < l; i++){
        if (value.charAt(i) == '\n') lines++;
    }
    textarea.setAttribute("rows", lines);
    // window.status = lines;
}

実行サンプル

Add comment 5月 21st, 2008

jqueryで要素からclassを削除するremoveCss

jqueryを使って要素からclassを削除するremoveClassについて自分用メモ。
※他にも、逆にclassを追加するaddClassというのもある。

しかし、やれることは分かっても、実際にどういうケースで使ったりするのか、あまり具体的にイメージできなかったので「身についた」とは感じていなかった。今回たまたま、あぁ、こういうときにも使えるなと気づいたので、それと一緒にここにメモ。

左図のように、ページアクセス時には最上部の一段だけ画像サムネール等の内容を表示しておき、どこかをクリックすると残りの全ての内容物を表示するというもの。

このサンプルでは、とりあえず一番上の見出しh3要素をクリックするすることで結果が得られるようにしてあるけれど、aやimg等をクリックする、とかでも勿論オーケー。

イベント発生前（クリックする前）は、CSSで決めたサイズ（この場合は高さ）ぶんだけ表示するようにしておき、イベントが発生したときにjqueryのremoveCssを使って、表示領域を限定しているclassを削除する。

見える部分を制限していたclassを削除することで、実際に内包している内容物全てが見えるようにするということ。

クリックするたびに表示、非表示を繰り返すのだとtoggleとかを使えばいいのだけど、今回はその必要はないケースだったのでこの「classを削除する」removeCssを使ってみた。（同じような結果を得るには、他にもたくさん考えられる）

CSS
（hideというclassによって、イベント発生前にユーザに見えている部分を制限）

#appear{
	width: 200px;
	background-color: #333;
	color: #fff;
	margin: 0;
	text-align: center;
}
.box{
	width: 200px;
	background-color: #eee;

}
.hide{
	height: 1.2em;
	overflow: hidden;
}
.box ul{
	margin: 0;
}

JavaScript

$(document).ready(function(){
    $("h3#appear").click(function(){ // このid名appearのh3をクリックすると
        $("div").removeClass("hide"); // hideというclassが付与されているdiv要素からhideが削除される
        });
});

実行サンプル

Add comment 4月 24th, 2008

CSSで画像をmouseoverでフルサイズ表示＆小さく折り畳む

水平方向に並んだ画像をmouseoverでフルサイズ表示＆小さく折り畳む。そのCSSとhtmlをメモ。

※画像はキャプチャ（実際の実行サンプル）

CSS

/* width320px height240px がフルサイズ width28pxが畳まれた状態 */
#galleryh{
	padding: 0;
	list-style: none;
	overflow: hidden;
	width: 495px; /* 全体のボックス幅 */
	height: 240px; /* 全体のボックスと各画像の高さ */

	background: url(./img/cssSlidingPhotoBg.jpg);
}

#galleryh li{
	float: left;
}

#galleryh li a{
	display: block;
	height: 240px;
	width: 28px;
	float: left;
	border-right: 1px solid #fff;
	cursor:pointer;
}

#galleryh li a img{
	width: 28px;
	height: 240px;
	border: 0;
}

#galleryh li a:hover{
	width: 320px;
}

#galleryh li a:hover img{
	width:320px;
}

html

<ul id="galleryh">
    <li><a href="#"><img src="./img/cssSlidingPhoto1.jpg" alt="#1" title="#1" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto2.jpg" alt="#2" title="#2" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto3.jpg" alt="#3" title="#3" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto4.jpg" alt="#4" title="#4" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto5.jpg" alt="#5" title="#5" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto6.jpg" alt="#6" title="#6" /></a></li>
    <li><a href="#"><img src="./img/cssSlidingPhoto7.jpg" alt="#7" title="#7" /></a></li>
</ul>

Stu NichollsさんのCSS Playを参考にさせていただきました。ありがとうございました。

Add comment 4月 14th, 2008

YUIを利用して展開する水平のメニュー

YUI(Yahoo! User Interface Library)を利用して、下と横に展開する水平のメニューを実装するためのメモ。

実行サンプル（外部リンクにしてあるjsやCSSファイルはサンプル内ソースを参照のこと）

※外部リンクで読み込んでいるyui_menu01.jsを編集することでメニューの数、内容を変更することが出来る。

Add comment 4月 7th, 2008

CSSで横に広がるテキストボックス

JavaScriptは使用せず、CSSとだけで実装できるので軽快でシンプル。レッツFC2ブログさんのところで紹介されていたものをちょっと改造して自分用にメモ。

CSS

ul#openWide a{
    text-decoration: none;
    cursor: pointer;
}

ul#openWide li{
    margin-bottom: 0.6em;
}

ul#openWide a{
    position: relative;
    width: 140px;
    display: block;
    border: 1px solid #333;
    background : #666;
    color: #fff;
    font-weight: bold;
}

ul#openWide a span{
    position : absolute;
    top: -2000px;
    left: -2000px;
    display: block;
    width: 200%;
    background: #eee;
    border: 1px solid #333;
    border-left: none;
    padding-left: 23px;
    text-indent: 16px;
    color: #666;
}

ul#openWide a, ul#openWide a span{
    padding: 5px;
    height: 30px;
}

ul#openWide a:hover{
    background-color: #fff;
    color : #333;
}

ul#openWide a:hover span{
    top : -1px;
    left : 120px;
}

XHTML

<ul id="openWide">
    <li>
        <a href="#">Lef Zeppelin<span>レッド・ツェッペリン</span></a>
    </li>
    <li>
        <a href="#">Jimi Hendrix<span>ジミ・ヘンドリクス</span></a>
    </li>
    <li>
        <a href="#">FUGAZI<span>フガジ</span></a>
    </li>
</ul>

実行サンプル

Add comment 4月 4th, 2008