はてなブックマーク

ちょっと情報が古いですが、Flash8のコンポーネント「FLV Playback」にバグがあったらしい。YouTubeなどで使われているようなFLVのプレイヤーをオリジナルのデザインで作ろうと思ったときに「FLV Playback Custom UI」というコンポーネントを使うのだが、その中の「SeekBar(ビデオの再生位置の表示と移動)」と「VolumeBar(音量調整するところ)」を同時に使うと、どちらか片方しか使えなくなるという状態になってしまった。本来ならどっちもハンドルをドラッグして再生位置や音量を調節できるのだが、ステージ上で上にあるものしか調節できなくなってしまう。 といっても現在出荷されているものや、ダウンロード版のものは直ってるみたいです。正確な時期は不明ですが、初期にパッケージで買ったままのものとかはこのバグが残っているようで、会社のStudio8ではこのバグが残って

PostEditorというオンラインエディタがなかなか便利です。WYSIWYGではないですが、いろいろと便利なSnipetがあり、HTMLとJavaScriptのコードを書くのに特化している模様。mootools.jsのプラグインで、mootoolsは最新のSubversion版でないと動かないっぽいです。「language.FORUM.js」にSnipetの設定が書いてあり、これらを読み込んで使います。※SafariとFirefoxのみ対応らしいです。 <script type="text/javascript" xsrc="/js/mootools.js" mce_src="/js/mootools.js" ></script> <script type="text/javascript" xsrc="/js/posteditor.js" mce_src="/js/posteditor

Home > JavaScript > JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools） Newer Older web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。 Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。 使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflec

auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref

以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。 ・yakonyan：<span></span>はない… ・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。 ・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？ ・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。 ・makitani：んで空タグを推奨ってのは変でないかい？ ・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。 ・rusica：「画像置換」は

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で

かなり前にMovableType(3.2)からWordPress(2.0)へ移行した際の手順をメモ。 1.MovableTypeからテキスト形式でエクスポート 2.URLが変わらないように、MovableTypeのアーカイブマッピングとWordPressのURL設定を合わせる。 3.WordPressの管理画面からテキスト形式のファイルをインポート 4.「_」が「-」に変わっていたりするので、手動でURLを変更（DBを直接修正） 5.月別やカテゴリのアーカイブが表示されなかったので、.htaccessにRewriteRuleを追記 6.WordPressが出力するフィード(RSS等)のパスがMovabeTypeと違うのでリダイレクトさせる てな感じで、何とかMovableTypeからアーカイブ等のパーマリンクを変更せずに済みました。 エントリの移行は画像のパスとかに注意すれば、比較的簡単に

私webデザイナーとしてかれこれ4年以上働いている訳ですが、本日初めて <button type="button" name="my_button" value="normal_button">ボタンです</button> いやはや、htmlは奥が深いっすね。どっかで見た覚えはあるのだが記憶の彼方に追いやられていたようです。 <input type="button" name="my_button" value="normal_button">ボタンです</button> ボタンといえば<input>タグしかないもんだとずっと思ってました。まあ新しい方のタグらしく、Netscapeの4.xなど古すぎるブラウザでは使えないし、IEだとvalueがうまく送れなかったりするバグもあるみたいですが、知らんかった。 このタグの利点は主に、画像ボタンを使った時にボタンとしての動き（押すと凹む）がタグの

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま