jQueryを使って要素を並べ替えるサンプル | Web活メモ帳
「Sorting elements with jQuery」にてテーブルやリストのソートの作り方を紹介していました。 指定したエレメントを並べ替えたり、並び替えのルールを自分で作り込みができるため、実務で使う場合に良さそうです。 詳しくは以下 並び替え方法などの自由なカスタマイズが可能 jQueryでテーブルをソートさせるプラグインはいくつかありますが、デザインが入っていたり、並び替え方法のカスタマイズが難しかったりして実務で使えるものは少なかったと思います。 以下のような設定で実装できるようです。 htmlは単純なリスト要素で作成します。 <ul> <li>Banana</li> <li>Carrot</li> <li>Apple</li> </ul> 並び替えのルールは自前で構築する必要があります。 アルファベット順にする場合 $('li').sort(function(a, b){
技術系メディアの盛衰
［急落した TechCrunch のページビュー：chart］ 技術系ブログのメディアとしての発信力を占うのが Techmeme のランキングだ。 このところそのランキングに大きな変化が見られる。なかでも TechCrunch の急落が著しい。 TechCrunch、トラフィック急落で影響力低下の懸念が | メディア・パブ AOL とのゴタゴタで創設者の Michael Arrington が TechCrunch を去ったのをきっかけに、かつてのメンバー Paul Carr、MG Siegler、Sarah Lacy、Vaughn Brown、Heather Harde、Greg Kumparak、Robin Wauters、Jason Kincaid が次々に離脱していった。それでも足りず、Arrington の後を継いで編集長になった Erick Schonfeld まで辞めさせられ
第16回文化庁メディア芸術祭 エンターテインメント部門 新人賞
2004年の「Web2.0」宣言からはや8年が過ぎ、ウェブサイトからブログへ、ブログからツイートへ。私たちの社会（ソーシャル）はウェブの進化とともに小さく軽く進化してきた。そして今、超低解像度の情報しかもたないFacebookの「いいね！」ボタン（投稿されている内容に対して、このボタンをクリックすると評価を共有することができる）が、驚異的な生命力で繁殖しインターネット中に溢れはじめている。いいも悪いも義理もとっておきも全部まとめて「いいね！」したい。そんなあなたにお届けするこの『どうでもいいね！』ボタンは、ワンクリックで画面上に表示されている「いいね！」を自動でだいたい全部をクリックしてくれる、Google Chromeの機能拡張である。ウェブサイト 贈賞理由 ありとあらゆるページにFacebookの「いいね！」ボタンが配置され、皆がこぞって「いいね！」数を競い合う、この2010年以降のウ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
CSSキーフレームアニメーションを使ったバナーの作りかた
広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframesCSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画（パラパラアニメ）みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思い
Firefox5でCSSの@keyframesにクオートがあると動かない件について - Webtech Walker
Firefox5でCSSのAnimationsが実装されましたが、ちょっとWebkit系と違うところがあるみたいです。 どう違うかというと、@keyframesのアニメーション名にクオートを付けるとWebkit系は動くけどFirefox5は動かないみたい。 DEMO つまりこういうこと。（説明簡略化のためベンダプレフィックスは除いてます） /* Webkitは動くけどFirefoxは動かない */ @keyframas 'hoge' { /* ... */ } /* WebkitでもFirefoxでも動く */ @keyframas hoge { /* ... */ } で、仕様はどうなってるか見てみると CSS Animations Module Level 3 keyframes-rule: ‘@keyframes’ IDENT ‘{’ keyframes-blocks ‘}’; って
shukujitsuの開発ブログ : css3でアニメーションするバナー作ってみた - livedoor Blog（ブログ）
2010年11月25日02:42 カテゴリ css3でアニメーションするバナー作ってみた 2011/06/22 追記 firefox5に対応したよ！ おまけのバナーがWebブラウザのスクロールバーを勝手に動かしまくるバグを修正したよ。 コンテンツの修正に合わせて本文もいろいろ追加したよ。 2011/05/12 追記 今回のcssを貼り付ける方法を最後に追記したよ。 こんな感じになった ただしgoogle chrome、safari限定。google chrome , safari , firefox5以降で見てね。そしてなぜかハートキャッチ。 ハートキャッチプリキュア！ ←マウスオーバーでさらにアニメーション css3の実験としてanimations使ってバナー作ってみた。けどなんかできあがったらバナーにしてはサイズでか過ぎたよ。 あくまでもただのバナーなので、以下の制約条件をつけてみた。
[CSS] CSSで利用する画像をSpriteにするかBase64にするかを考察してみた - YoheiM .NET
こんにちは、@yoheiMuneです。 Webページを作る際に、CSSに使う画像をSprite化するのが良いのか、Base64エンコーディングしてCSSに埋め込むのが良いのか、 最近良く議論になります。 今回は、その議論をじっくりと考えてみた結果をブログに書きたいと思います。 背景 仕事でWebベースのゲームやSNSを作成することが多くあります。 HTML,JavaScript,CSS,画像を使って、画面を構成する仕組みです。 そんな仕事で、最近良く以下のような話題が聞かれます。 アプリケーションで利用するアイコンやボタン背景画像などを、Base64エンコーディングしてCSSに埋め込むべき？ それとも、Sprite画像にして読み込むべき？ この話題は、既に話しまくられている話題かもしれませんが、自分なりに考えて結論を出してみたかったので、今回考察しました。 考察した結論 結論から申し上げま
![[CSS] CSSで利用する画像をSpriteにするかBase64にするかを考察してみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d025f9ce3e0fffbd53497eff09d202f966b1646/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F187.jpg)
[JavaScript] CSS3のTransitionを使ったアニメーションが簡単に実現できるJSライブラリ - YoheiM .NET
jQuery Transitを使う際に注意すべき点 jQuery Transiは開発中のライブラリということもあり、tを使う上でいくつかの注意点があります。 GithubのIssueによるとjQuery1.8.2（執筆時の最新）に対応できていない。 Androidで動作しないものも多い。移動は動くけど、回転は微妙。拡大縮小も微妙。 Androidでは1つの要素に対して複数の変化をさせられない。このライブラリでは、この問題を吸収してくれません。 jQuery Transitで気に入った点 jQuery Transitで気に入った点として、アニメーションをメソッドチェーンで指定すると、 それを順に実行してくれるというアニメーションキューのような動きをしてくれる点がスゴく良いなと思いました。 具体的には、上記のサンプル集のような動きで、以下のような実装で実現出来ます。 $("#circle")
![[JavaScript] CSS3のTransitionを使ったアニメーションが簡単に実現できるJSライブラリ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/5d3d4ee42fec71ca1b78f4c0f10859f6411bd280/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F165.jpg)
[CSS] CSS3のTransition終了時にJavaScriptで処理を行う方法 - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、CSS3のTransitionで背景色やpositionなどを変化させた後に、JavaScriptの処理を行う方法をブログに書きたいと思います。 CSS3のTransitionについて CSS3 Transitionは、CSS3 Animationと並んで、Webに動きをつけることのできるCSSのひとつです。 スゴく簡単な設定で、楽しく動きます。詳細は、以下をご覧頂けると幸いです。 - [HTML5] CSS3のTransitionsでJavaScriptなしにHTMLに動きを@YoheiM.NET Transition終了をJavaScriptで検知する Transition終了時を表す「webkitTransitionEnd」イベントを補足する事で、 Transition終了時にJavaScriptを実行することが出来ます。 例えば、id
![[CSS] CSS3のTransition終了時にJavaScriptで処理を行う方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/54ef5dddef04057f1cd7aa04b49c1dfc48ff6190/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F130.png)
CSSで キャンドルの炎 | KSK-soft.com
確定申告も終えたので、久しぶりにコンテンツを追加しよう。 CSSで描いたキャンドル。 作成ポイントは以下の通り キャンドルを描くのに使ったhtml要素はdivが2つだけ 炎がチロチロと動くのはcssのanimation 画像の使用は無し。Firefox、Safari、Chromeに対応。IEは無視。 実は、ろうそく、ろうそくの芯、炎を描くだけならdivは1つで済む。afterとbeforeの疑似要素を使えば良いからだ。しかし、このエントリーを描いている時点のwebkitでは、疑似要素がanimationしないので、仕方なくdivを2つにした。 このブログで公開している作品の制作目的は、8割が自分の練習の為で、直接に現場で流用できるかどうかは考慮していない。とはいえ、ここで試したことを、自分の仕事に利用することは多い。純粋に「CSSで絵を描く」ならdivを100個でも200個でも使うのも有り
CSS3で作るボタンやバナーの決定版！グラデーションやストライプ、アイコンなどの自動生成可能なGrad3が秀逸すぎる｜すしぱくの楽しければいいのです。
CSS3で作るボタンやバナーの決定版！グラデーションやストライプ、アイコンなどの自動生成可能なGrad3が秀逸すぎる 公開日：2012年3月27日 カテゴリ：Web制作が捗るツール 先日、ブラウザ上でCSSのグラデーションを直感的に生成できるGrad3が登場しましたね。各種ブラウザ対応、角丸、フォント、ストライプ、アイコン、などなど、このジェネレーターがあれば全て完了しちゃう優秀ぷりですよ。 Grad3 CSS3のグラデーションを自動生成 全て直感的に操作できるから楽ちん。 3/24にGrad3としてバージョンアップされましたが、前回のGrad2もなかなかの高機能っぷりでした。 CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor- サンプルも豊富で、その生成された物を選んでカスタマイズすることも可能でした。作りやすかったですね。 先日
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
【Illustrator】焼き印表現 : BottleCube Designer's Blog
5月15 【Illustrator】焼き印表現 カテゴリ:2Dbc_harukiの記事 こんにちは、春木です。 以前、イラレで木目に挑戦！の記事で木目に焼き印を付けたんですが 今日はその焼き印風表現をご紹介したいと思います。 使用ソフトはもちろんイラストレーター！ 前回の木目を拝借し、今回は星マークの焼き印を付けたいと思います。 完成形はこんな感じ↓ それでは始めます！ ※画像はクリックすると拡大表示できます Step1. ベースとなる星のオブジェクトを木板の上に配置します。 このオブジェクト（※ここから先はベース星と呼ぶ事にします）は コピーして何度も使用するので常にレイヤ上に残しておきます。 Step2. ベース星を同位置にコピーしたものにグラデーションをかけ 効果＞ブラシストローク＞“はね”で質感をつけました。 焼き印っぽい雰囲気を出す為の一番大事なパーツになります。 Step3.
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる｜Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。 光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。 color:#fff; background: #000; font-size: 52px; font-weight: bold; text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #ffd700, 0px 0px 20px #ffd700, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700; 影を重ねて立体的に仕上げています。 color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Userguide - HybridAuth, Open Source Social-Signle-Sign-On Solution for authentication through Facebook, Twitter, Google, Yahoo, MySpace, LinkedIn, AOL, Vimeo, FourSquare, OpenID and other Identity providers