振り仮名を自動的に入れる | Accessible & Usable
公開日 : 2010年3月23日 (2015年11月23日 更新) カテゴリー : ユーザビリティ ウェブページのフォーム (「お問い合わせ」や「申し込み」など) に氏名を入力する際、振り仮名の入力を求められることがあります。先の記事「振り仮名のカタカナ入力」では、「ウェブフォームの振り仮名入力は、基本的にはひらがなにすべきではないか」と提言しましたが、さらに踏み込んで考えると、氏名 (漢字表記) の入力と同時に、振り仮名 (ひらがな) も自動的に入力されると、より便利と言えそうです。 以下、試しに実装してみました。 このインタラクションの優れているところは、「お名前」欄に入力すると「ふりがな」欄にも自動的に入力されることと、即座に「ふりがな」欄を修正できることです。最近は難しい読みかたのお名前も多く、必ずしも振り仮名の自動入力がスムーズに機能するとは限りませんが、それでも、振り仮名をゼロ
hCalendar を使って予定を公開しよう！ - IT戦記
はじめに みなさん、こんばんわ！ さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです！ ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！ この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン
inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript
時間に余裕ができたのでyuga.jsに新機能を追加しました。追加した機能は以下です。 親ディレクトリへのリンクにクラスを設定と画像の変更 簡易タブ機能の追加 そのほか、スクロール周りのソースの整理などを行いました。 yuga.js 0.6.0 ダウンロード 最低限の使い方 XHTMLのhead要素内で次のように読み込みます。これで各機能が有効になります。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
CSS+JavaScriptで画像に柔軟なレイアウトを作る。（日本語訳） - Trans
著者: Aaron Gustafson件名: If I Told You You Had a Beautiful Figure...日付: 2007年9月25日URL: http://www.alistapart.com/articles/figurehandler訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[s]. If I Told You You Had a Beautiful Figure... 率直に言って、画像というのは本当にイライラさせる。OK、ところで、たぶん画像自体が問題なのではない。しかし、画像をデザインの中でかちっとレイアウトするのは難しい。画像を使って、うまくコンテンツの意味を訪問者に知らせたいときは、特にそうだ。 もちろん、ちゃ
javascript タブUI導入の参考になるサイト - WEBデザイン BLOG
JavaScript でタブ切り替え UI を実装する | WWW WATCH(http://hyper-text.org/archives/2007/09/javascript_tab.shtml) のエントリーをみていいなコレっと思ったので、タブUI導入で参考になるいいサイトなんかを紹介してみたいと思います。 以前のエントリーブログGTD WEBデザイナー独立するために（その１） - WEBデザイン BLOG「jQuery・javascriptを使ってのさまざまなアプローチ方法を実践する」の中でとWEB標準でのC O U L D長谷川様の「解体Apple.com」のPDFを見て、ユーザーアプローチに使えるってことで紹介しようと思っていたネタです。実際に、自分サイトを立ち上げる時もタブの実装は考えていましたので今日の勢いで。 タブでもさまざまなタイプがあって、導入してみたいものと実際に使
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
[JS]jQueryで動作するlightboxのプラグイン -jQuery lightBox plugin
jQuery lightBox pluginは、画像の拡大表示ができるlightboxを実装できるjQueryのプラグインです。 jQuery lightBox plugin jQuery lightBox pluginの実装は、「jquery.js」と「jquery.lightbox-0.3.js」を外部ファイルとして参照し、その後に下記を記述します。
SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
fillinメッセージギミックを実現するjQueryの拡張プラグイン
【カカアコ ファーマーズマーケット2022】訪問記録まとめ！野菜・果物・美味しいパンにフレッシュチーズ♪【おすすめ】
[JS]フラッシュみたいな動きをする画像ギャラリー -jqGalView.js
jqGalView.jsは、フラッシュの画像ギャラリーにインスパイアされたスクリプトで、jQueryのプラグインです。 jQuery: jqGalView (Photo Gallery) jqGalViewは、Flash Image Galleryにインスパイアされて作成したもので、一度に大量のサムネイル一覧を切り替えることができます。 Flash Image Gallery
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
ライブドアブログ｜無料で豊富な機能が充実
【カカアコ ファーマーズマーケット2022】訪問記録まとめ！野菜・果物・美味しいパンにフレッシュチーズ♪【おすすめ】
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript minmax.jsはIE6以下でmin-width,max-width, min-height , max-heightのプロパティを利用可能にするjsライブラリになります。 CSS2では以下のプロパティが定義されているがIE6には実装されていない。 max-width - 要素の横幅の最大値を指定する min-width - 要素の横幅の最小値を指定する max-height - 要素の高さの最大値を指定する min-height - 要素の高さの最小値を指定する minmax.jsはこれらのプロパティを利用可能にするjsライブラリです。 設置方法 設置方法はダウンロードしたminmax.jsをhead要素内などで読み込むだけです。 <script type="
![min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
jQuery超初心者にありがちな6つの間違い - あじゃぱー
顔に見える？最近「送水口」が気になるという話 「送水口」が気になる今日この頃 最近街中で気になる存在、それがこの「送水口」です。地上のフロアが7階以上あるビルなど、一定の条件を満たした建築物には設置が義務付けられているもので、火事が発生したフロアにただちに水を送るために使われるものです。ポンプ車…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://javascript.zudolab.net/ja/
https://www.ruzee.com/files/shadedborder/test.html
http://www.andreacfm.com/examples/jQpanels/