News Links N.23: 2011-10-12 | Unformed Building
9月30日から10月11日までのまとめです。 ちょっと間が空いたのはアニメーションの記事書いててこっちのこと忘れてたからです。すいませんｗ HTML & CSS Space CaCSS – Animated CSS3 background patterns…. | simurai アニメーションする背景のデモ。ただ、これは CSS4 に延期された機能らしいです。 CSS shaders: Cinematic effects for the web | Adobe Developer Connection CSS shaders の紹介。使えるようになるのかどうかは分かりませんが、一応見ておいてもいいかと思います。 yahoo/debugCSS – GitHub HTML のよくないマークアップをハイライトで分かりやすく表示してくれるスタイルシート。 csswizardry/vanilla
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた
jQueryプラグインtinyTips このマウスオーバーしたらツールチップがふわっと出てくるのはskuare.netさんで紹介されていたjQueryプラグインのtinyTipsを使用しています。 jQuery利用の軽量吹き出しJavaScript「tinyTips」｜skuare.net skuare.netさんのjQueryプラグイン紹介記事は、設置の仕方がシンプルに紹介してあって、いつも重宝しています。特にwebcre8のような、JavaScriptに明るくないデザイナーさんが参考にするにはぴったりのサイトだと思いますのでオススメしておきます☆ このプラグインを選んだ理由はツールチップの中に画像を含めたりすることもできるからですね。若干実装の仕方は手間があったりするのですが、画像を出すこともあるだろうなーと思ったので。 CSS/JSの記事ごとの実装(HTML5の場合) で、このページ
![[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/90b1317c0d6b9c6ecf1438c0de247763c5305c45/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fsingle-page-css-150x150.png)
Google Chart Tools をもう少し簡単に使うJavaScript作った（のに忘れてた） | soplog(そぷログ)
2011.09.12 Web JavaScript Google Chart Tools をもう少し簡単に使うJavaScript作った（のに忘れてた） そらいっち（@soraiy）がGoogle Chart Toolsの記事をポストしたのを見て、少し前に調べていたのを思い出しました（そらいっちありがとう！）。 簡単にグラフを作れる Google Chart Tools を使ってグラフを作成する方法 Google Chart Tools はGoogleが提供している高機能なグラフを作ってくれるAPIです。 前に調べたときに「ちょっと使いずらいな～」と感じて、もう少し簡単に使えるようにしてみました。 サンプル ソース（円形グラフの場合） HTML <div id="GRAPH"></div> JavaScript <script src="http://www.google.com/jsap
Twitter-APIを使ってみました
「現在発売中の日経ソフトウエア2010年3月号に記事を書きました！Web APIに ついての特集で、今はやりのTwitterと、Google ChartのAPIを活用したPHPの アプリケーションを作成する内容になっています。ぜひ読んでみてください。 皆さまのご意見やご感想をお待ちしています！ 」By Katsuhiro Ogawa こんな序文を見つけました。 ブログネタに困っていた時だったのもあり、 また、現在担当しているプロジェクトで使うかもしれないということで、 TwitterのAPIをちょっと触ってみました。 まずは、APIの仕様について。 http://apiwiki.twitter.com/ ここで、原文で確認できるようです。 日本語に翻訳している方がいるようです。ありがたいですね。 http://watcher.moe-nifty.com/memo/2007/04/twitt
lab | simurai
umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good. For the above Rocker switches no JavaScript, images or extra markup is needed. Just a no
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」:phpspot開発日誌
speak.js: Text-to-Speech on the Web ? Mozilla Hacks ? the Web developer blog HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」。 テキストを音声に変えられるソフトがありますが、これをHTML5/JSで実現するためのライブラリです。 デモページ speak("hello world") のように使い方が超シンプルなのがいいですね ソースコードはgithubで公開されています ローマ字で書けば日本語も発音させられます 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery
HTML5.jsの中身を見てみよう
HTML5.jsって中でなにやってるの？ 自己紹介 かみやん (Twitter@kamiyam) システム開発会社 ほとんどWebのシステム Java・C# 最近はクライントサイド(HTML5・Javascript)の勉強をしてます。 HTML5.jsって何？ IE6/7/8でHTML5を使いたい時に便利なjavascriptライブラリ html5shiv - Google Code http://html5shiv.googlecode.com/svn/trunk/html5.js 使い方 HTML5.jsを読み込む IE9以前のIE6/7/8に適用させる <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 使い方 cssを定義する
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 正直話題としてはとっくに旬は過ぎていますがｗ 一度まとめておきたいと思い。 殆どのweb制作者達がこれまで頭を悩ませてきたであろうIE対応。web制作者の方々は「もうIE6対応なんかしなくていいじゃん」「対応するからいけないんだよ」という意見をお持ちの方も多いかと思います。 特にIE6に対するコーダーの方達の恨みつらみは相当なもの。一言言いたい場合はとりあえず「爆発しろ！」とでもこちらでぶつけてみてください☆ (´・ω・｀) ie6bot – 腐った牛乳と呼ばれたブラウザ が、しかし会社で制作をやっている方々はそうもいかないのが現実。私のブログでも今は対応が中途半端でしっかり出来ていないのですが…ｗこのブログにはなるべく早めに対策を施すつもりです。あと、これに関してはそのうち独自の対応をし
![[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5e28c757d14aa768526c879eb8c989dd43aa815/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F07%2Fjavascript-ie-correspondence-01-150x150.gif)
</gecko>：げことじ。：日常からWEBまで：
西新宿のWEB屋さんのなにか。【javascript】 webkitのデスクトップ通知APIのデモで気づいたことを追記。 デスクトップ通知をするものですがスクリーンセーバー（windows）の状態でもオーバーレイして表示されるようです。 chromeすごいな・・・ chrome.loadTimes().navigationTypeすると そのページがどのように開かれたかが帰ってくる。 アンカーから開かれるとLinkClicked ローカルのhtmlを表示するとOther location.hrefからだとOther ブックマークからだとOther リロードするとReload ほかにはなにがあるのかなー。 window.chrome csi: function () { native function GetCSI(); return GetCSI();} loadTimes:
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さらですけどｗ なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。 上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。 時間がたつと別のメッセージが表示されます。 キャプションの埋め方 $(document).ready(function(){ //Slides object with a time (integer) an
マウスホバーでキラッとするエフェクトいろいろ
Googleの+1ボタンが検索結果に反映されるようになりましたね。 あのボタン、検索結果アイテムにマウスホバーでキラッとするんですが、それを見ていて以前『jsdo.it』で作ったのを思い出したので、forkされたものも含めてまとめてみようかと思います。 作ろうと思ったきっかけは『AddyOsmani.com』の下記のエントリーでした。 ShineTime — A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects ギャラリー自体もすごいんですが、このエフェクトがかっこよかったので、とりあえず作ってみようと思ってやってみました。 キラッとするエフェクト デモ コードが色々とアレな感じですが、動きだけは実現できました。 その後、@GeckoTangさんがforkしてくれました。 こっちのほうが分かりやすいです。 fork
大电电片性影影:找不到页面 大电电片性影影| RDA.辉盛
Qingdao & Zibo Address : 山东淄博高新区柳泉��路创业火炬广场(居然之家)F座807 Phone : 0533.311.8581 Email : 3118581@163.com QQ : 460253295 (9am-18pm) Website : www.rdateam.com Wechat : RDA辉盛设计 Milan, Italy Paolo Cesaretti Architetto. Address: Milano, Via Settembrini 45 I-20124 Phone：+39.02.8718.9435 Email: contact@paolocesaretti.it Website: www.paolocesaretti.it Melbourne, Australia Michael Mackenzie Consultant. Address
日本の文章はやはり縦書きが読みやすい·tategumi.js MOONGIFT
tategumi.jsはJavaScriptを使って文章を縦書き、右から左に読ませる文章に変換するライブラリ。 tategumi.jsはJavaScript製のオープンソース・ソフトウェア。Webの文章は横書きが基本だ。日本語の場合は左から右に表示される。Webサイトは縦方向にスクロールするように作られているので、横方向が固定されて表示される方が見やすい。 表示例 だがそれは慣れの問題であって、日本語は本来縦方向、右から左に書かれるものだ。小説などの日本語文章を読ませるサイトではtategumi.jsを使ってみるといいだろう。 tategumi.jsはWebサイトに書かれた文章を自動的に縦書きに変換してくれるJavaScriptライブラリだ。サイト全体ではなく、指定された場所だけを変換する。クラスごとに文字の大きさや一行における文字数、行間、字間、段間、禁則処理の指定ができるようになってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css3-mediaqueries-js - Project Hosting on Google Code
https://www.fenrir.co.jp/blog/2011/08/bookmarklet-new.html
theta.ne.jp