Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
[JS]かわいい猫画像になごんでしまった、指定範囲をフォーカスするスクリプト -Gallery Focus
オプションもリアルタイムに適用 Gallery Focusの実装 HTML フォーカスを与える画像を「#gallery」で内包します。 「#gallery」はjQueryのセレクタで指定できるものであれば、何でも可です。 <div id="gallery"> <img src="images/01.jpg"> <img src="images/02.jpg"> ... ... </div> JavaScript 「jquery.js」と当スクリプトを外部スクリプトとして指定し、下記のスクリプトを記述します。 $('#gallery img').galleryFocus(); スクリプトのオプション オプションでは、範囲のサイズ、フェードの量、適用範囲、反転、オーバーレイの有無を指定できます。 $('#gallery img').galleryFocus({ 'radius': 800, '
jQueryを使って閲覧中のWebサイト自体をその場でプレゼンするサンプル・Screen Presenter
似たようなのがどこかにありました が。閲覧してるWebサイトそのもの をユーザーにプレゼンする、という インターフェースをjQueryで作った デモ。サンプルはダウンロード出来る のでお暇ならぜひ触ってみてください。 アイデアがちょっと素敵だなぁと思いました。Embedded Help Systemと目的は一緒ですかね。IE6以外は問題なさそうでした。cssでなんとかなるかな・・ 左下に矢印があるのですが、これでプレゼンを進めます。プレゼンは、閲覧中のWebサイトの解説をツールチップを出しながら進めていく形となります。 先にデモご覧になったほうがピンと来そうですね。 デモ※別窓 ハッシュチェンジイベント ハッシュチェンジイベントでブラウザの戻るボタンにも対応されています。 動作も軽快で気持ちいいですね。 綺麗に終わります。 Webサービスの使い方とか、CMSの管理画面の使い方のレクチャーに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
