s3Slider jQuery plugin 画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」。 次のように、画像に半透明のキャプションを付けつつクールにアニメーションさせられるjQueryプラグインです。 動きを実際に見てみましょう。かなりかっこいいです。 s3Sliderプラグインの使い方とダウンロードはこちら 実装のHTMLは次のように結構綺麗になってますので、安心して使えます。 ページのヘッダーあたりに置くとかなりのオシャレ感を出すことが出来ますね。
画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」:phpspot開発日誌
s3Slider jQuery plugin 画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」。 次のように、画像に半透明のキャプションを付けつつクールにアニメーションさせられるjQueryプラグインです。 動きを実際に見てみましょう。かなりかっこいいです。 s3Sliderプラグインの使い方とダウンロードはこちら 実装のHTMLは次のように結構綺麗になってますので、安心して使えます。 ページのヘッダーあたりに置くとかなりのオシャレ感を出すことが出来ますね。
うっとりしてしまうデザインのシングルページWebサイト30
2017年6月29日 Webデザイン シングルページのWebサイトはあまりコンテンツがない場合・ひとつの物を強調したい場合に効果的です。Javascriptを使っておもしろい動きをつけたシングルページもたくさんあり、1ページの中にたくさんのアイデアがつまっています！ここでは世界中のWebサイトの中から美しく個性的なデザインのサイトを紹介します。次のWebサイトデザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ シングルページのWebサイトギャラリー pikaboo http://www.pikaboo.be/ フルFlashのサイトかと思ったらJavascriptで滑らかな動きを表現していました！必見！ Think Green Meeting http://www.thinkgreenmeeting.com/ 車と飛行機のイラストがマウスオーバーで消えていきます！
web制作の現場で使うjQueryデザイン入門が激しくお勧めな件
『web制作の現場で使う jQueryデザイン入門』 jQueryを、プログラムとしてとらえるのではなく、デザインとしてとらえて解説している一冊。 つまりデザイナー向けの攻略本となっている。個人的に超お勧めの内容だったのでご紹介。 この作者は、西畑氏です。 何度か私のブログでもjQueryの記事かいてるのですが、そのときに色々教えてくれたto-Rのあの人です。 2010年2月15日発売予定で、書店では明日買えるようです。 「JavaScriptとしてjQueryに興味を持っている」という人よりも、「ウェブデザインをもっとクリエイティブに表現したい」という人のための一冊です。 目次 第1章 jQueryを始める前に。 ここでは、jQueryとは何なのか？あたりからきっちり説明されてます。 ある程度知ってる人は飛ばしちゃってもいいかも・・・。 第2章 サンプルで学ぶjQueryの基本 HTML
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
プログラマが楽しく読めるLink集 Vol.1 - 乱筆乱文お許し下さいorz
ネットサーフィン（死語）をしていて、プログラマなら誰でも楽しく読めるハズ！ と思ったサイトや記事を紹介して行きます。 とりあえず、Vol.1ッ！ ハッカーになろう (How To Become A Hacker） 実は、この5つすべて（Python, Java, C/C++, Perl, LISP）を勉強しておくのがいちばんいいのです。 これらはもっとも重要なハッキング用言語だというだけでなく、 それぞれプログラミングに対してまったく違ったアプローチをしているので、どれも非常に有益な勉強となるでしょう。 Rubyは？（´・ω・｀）ｼｮﾎﾞﾝ Fine Software Writings 特に僕が好きな記事を！ ホワイの(感動的)Rubyガイド (why the lucky stiff) どうしてプログラマに・・・プログラムが書けないのか? (Jeff Atwood) ソフトウェア開発者のた
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト 可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見や
60分間プログラミングが面白い - 未来私考
ニコニコ動画で人気のあるジャンルの一つに「描いてみた」というものがあります。イラストを制作する過程を高速再生して徐々に絵が完成していく様子を楽しむというものですね。合間合間に小ネタを挟んだりBGMに併せてみたり、人気のある動画は数十万再生を誇るものもありますね。 描いてみたとは (カイテミタとは) [単語記事] - ニコニコ大百科 人気の「描いてみた」動画 84,791本 - ニコニコ動画 個人的なお気に入りはこのあたり。 今回紹介する動画はそのプログラミングバージョンとでもいうべきもの。実況しながら約60分で実際に遊べるゲームをプログラミングをしてしまおうというもの。 第１弾はJavascriptによるオセロの作成。メモ帳でサラサラとコードを記述しながらみるみるとプログラミングが完成していくのがとても心地よい。 第２弾はWindowsアプリケーション環境でのテトリスの作成なのですが、これ
Web ブラウザに表示されている画面を直接編集する方法
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
アルゴリズムの紹介
ここでは、プログラムなどでよく使用されるアルゴリズムについて紹介したいと思います。 元々は、自分の頭の中を整理することを目的にこのコーナーを開設してみたのですが、最近は継続させることを目的に新しいネタを探すようになってきました。まだまだ面白いテーマがいろいろと残っているので、気力の続く限りは更新していきたいと思います。 今までに紹介したテーマに関しても、新しい内容や変更したい箇所などがたくさんあるため、新規テーマと同時進行で修正作業も行なっています。 アルゴリズムのコーナーで紹介してきたサンプル・プログラムをいくつか公開しています。「ライン・ルーチン」「円弧描画」「ペイント・ルーチン」「グラフィック・パターンの処理」「多角形の塗りつぶし」を一つにまとめた GraphicLibrary と、「確率・統計」より「一般化線形モデル」までを一つにまとめた Statistics を現在は用意して
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
JavaScriptで記事の追記を折りたたみ
JavaScriptで記事を折りたたむ方法を紹介します。以前紹介したものよりJavaScriptが簡潔ですがcookieが使えないので用途によって使い分けたらいいと思います。こちらは記事が長くなった場合などに使用すれば便利かと。別ページに移動する必要もないのでスムーズに表示されます。Yahooニュースみたいな感じですね。
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
jQuery公式サイト まずはｊQueryJavaScriptライブラリの入手。 jQueryの簡単な説明 Re：zapa氏 今更ですが、jQueryにはまりました ドキュメントとリファレンス 公式ドキュメントサイト（英語） jQuery 1.2 ドキュメント日本語訳 jQuery リファレンス 色々とデモがついているのでわかりやすい。 jQuery入門 (ver 1.2.1) jQueryの入門サイト。 こちらもサンプルデモが多く有り、わかりやすいです。 jQuery 開発者向けメモ - 基本・サンプル サンプルがたくさん有ります。すこし高度。 中級編 jQueryのパフォーマンス最適化に関するTips 軽量jQueryをもっと高パフォーマンスにする為のヒント。 [JS]jQuery 1.2リリース&変更点など jQueryを1.2以前から使っているユーザー向けのエントリ。 HTML/J
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳
去年一年間で多くのまとめエントリを書き上げてきました。 その中でも、ここにはお世話になったなぁと思えるweb制作向けサイトが、まとめエントリごとに分散されて、使いにくくなってきました。 そこで今回は、そんなまとめサイトの中で、私が定番化して使っているwebサービスや、エントリ、フリーソフトなどを、自分用にまとめます。 いつも通りのテーマですが、web制作の時間短縮と、無料をテーマに選んでおります。 プログラミング 944 + Ajax/Javascript/Dhtml examples and demos to download Ajax、JavaScript、Dhtmlの宝庫。 当時ブックマークしたときは、81個しかなかったライブラリが、一年で944ものライブラリを集めています。とんでもない成長のしかたを、今でもし続けています。 リンク先はあえてトップページではなく、ライブラリページです
ドロップダウンメニューの表示・非表示 [ホームページ作成] All About
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む ドロップダウンメニューを作ろう ドロップダウンメニュー（下図）を作ってみましょう。 ページの数が多いサイトなどでは、ドロップダウンメニューを使ってわかりやすくコーナーをまとめると便利です。 今回から数回に分けて、ドロップダウンメニューを実現するのに必要な方法を1ステップずつご紹介していきたいと思います。 第1回 表示・非表示を切り替える ドロップダウンメニューを実現するためには、メニュー項目の一部を表示させたり消したりする処理が必要です。 そこで、まずは「文字の表示・非表示を切り替える」方法をご紹介致します。 ドロップダウン
![ドロップダウンメニューの表示・非表示 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance