●フォームのテキストに吹き出しを
GIGAZINEに
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ という記事がありまして、そこで、
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ という記事がありまして、そこで、
ってのが面白そうだったので、試してみました。入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms
Download tooltip for forms
から、form-field-tooltip.zipをダウンロード、解凍すると、
フォルダ構成になっているので、
自分のサイト構成にあわせて、サーバーに設置します。
自分の場合は、
/js
/css
/images
に各々のファイルを設置しました。
次に、ファイルの修正。
js/form-field-tooltip.jsの55行目にイメージパスへの指定があるので、必要に応じて書き換えます。
そしたら、フォームを設置するHTMLファイルに、以下のコードを追加します。
まず、HEADブロックに
次に、BODYブロックに
というように追加しておきます。
最後に、フォームのテキスト部分に
というように、追加すれば終了です。
AmazonWebServiceを使ったコメント付き一覧ページ作成に実装してみましたので、興味のある方は試してみてください。
結構、簡単に使えますね。
IEとOperaだと、角の表示状態が違うのがなんともいえません。
フォルダ構成になっているので、
自分のサイト構成にあわせて、サーバーに設置します。
自分の場合は、
/js
/css
/images
に各々のファイルを設置しました。
次に、ファイルの修正。
js/form-field-tooltip.jsの55行目にイメージパスへの指定があるので、必要に応じて書き換えます。
そしたら、フォームを設置するHTMLファイルに、以下のコードを追加します。
まず、HEADブロックに
次に、BODYブロックに
というように追加しておきます。
最後に、フォームのテキスト部分に
というように、追加すれば終了です。
AmazonWebServiceを使ったコメント付き一覧ページ作成に実装してみましたので、興味のある方は試してみてください。
結構、簡単に使えますね。
IEとOperaだと、角の表示状態が違うのがなんともいえません。
Comments
コメント入力は停止しています
海外からと思われるコメントスパムが横行しているため、全記事のコメント入力を停止しています。メッセージのある方は、ホームページの一番下に連絡欄がありますので、そちらからお願いします。