tipsとXHTMLに関するnaohorのブックマーク (6)
-
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト﹁BeautyTips﹂を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
-
さて趣味でプログラミングをしているわけですが最近は専らPHPのそれにかかりきりです︵1.4.0がリリース間近ということもあり︶。でも，たまにはJavaScriptのスクリプトも書いてみたくなります。 IMGタグにはALT属性がありますが，これは画像の代替テキストの役目を果たします。XHTMLでは必須の項目です。このALT属性なんですが，ホームページ作りに励んでいる方々はお気付きかもしれませんが，インターネットエクスプローラー(IE)とFirefoxでは，挙動が違います。IEでは，画像にALT属性があるとマウスのカーソルを重ねたときに，ツールチップ(バルーンヘルプ)が表示されます。でも，Forefoxでは何も表示されません。これはFirefoxのバグというわけではなくて，単にブラウザ間の実装(解釈)の違いに基づくものです。じゃ，Firefoxでもツールチップを出すにはどうしたらいいかというと
-
カテゴリ htmltitle属性のツールチップ内で改行 2004-01-03 14:38 更新 多くのウェブブラウザは、HTML のtitle属性の内容をツールチップとして表示する。内容が長い場合は適当に改行して表示することもある。では、任意の位置に改行を入れることはできないのだろうか？ WinIE ではtitle="1行目2行目" 実は、これで WindowsIEはツールチップ内で改行してくれる。つまり、改行コードを空白扱いせず、改行として扱ってくれるのだ。しかし、妙な位置で改行すると、可読性が落ちるし、気持ち悪い。もうちょっとマシな方法はないものだろうか。 Windows での改行コードは CR+LF で、10進表記コード番号はCRが13、LFが10だ。そこで、先程の例を次のように書き換えてみる。なお、 は数値文字参照で、先程の改行コードの番号に対
-
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素︵ボックス︶を含む親要素︵ボックス︶のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
-
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します︵通常の解除方法も併せて掲載しています︶。1．﹁回り込み﹂とは 例えば、画像の左︵または右︶にテキストを表示することを﹁︵テキストの︶回り込み﹂と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～︵略︶～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト ︵X︶HTMLでこのような表示を行う場合、先に出現する要素︵ここでは img 要素︶に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 ﹃モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？﹄ っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
-
1
[JS]これ最強かものツールチップスクリプト -BeautyTips
FirefoxでTITLE属性のツールチップ内改行を有効にしたい
小人さんへの置き手紙: title 属性のツールチップ内で改行
clearfixでfloatを解除 | d-spica
小粋空間: CSS の after 擬似要素で回り込みを解除する
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
