Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
スマホアプリをHTML5＋CSS3＋JSだけで構築しアプリへのコンテンツ配信や解析もできる「App Cloud」をブライトコーブが日本で展開 | Web担当者Forum
ブライトコーブは、クラウドを活用したコンテンツ配信関連のサービスを日本で拡充し、4月12日より販売を開始した。 今回発表されたのは、モバイルアプリ関連と動画関連の2つのクラウド型サービス。 スマホ・タブレット向けアプリをHTML5＋CSS3＋JavaScriptで構築し 管理・配信する「Brightcove App Cloud」アプリ関連では、スマホ・タブレット向けのアプリケーションを構築・管理・配信・更新できるプラットフォーム「Brightcove App Cloud」を日本語版としてサービス開始した。 すでに提供されていた英語版では、米国国務省やFOXニュースなどが利用している。 App Cloudは、iPhone・iPad・Androidなどのスマートフォンやタブレット向けのアプリケーションを企業が提供する際のプラットフォームとなるサービス。アプリケーションの構築や公開、その後の運用
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
32. //set Full Screen without StatusBar var ua = navigator.userAgent.toLowerCase(); $.browser.android = /android/.test(ua); $.browser.iphone = /iphone/.test(ua); var portraitHeight,landscapeHeight; window.onload = function(){ ! $("html,body").height("1000px"); ! if($.browser.iphone){ ! ! $("body").css("position","relative"); ! } ! setTimeout(function(){ ! ! scrollTo(1,0); ! ! setTimeout(function()
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
2012/01/20 2012年のHTML5、CSS3、JavaScriptはこうなる～実際のサービス事例で考えるHTML5の近未来 #html5semi
nakamura001 @nakamura001 ”2012年のHTML5、CSS3、JavaScriptはこうなる～実際のサービス事例で考えるHTML5の近未来”、このイベントの補欠数がハンパ無いw 最近はHTML5の名前の入ったイベントはどこも人気だなぁ http://t.co/j0m3yDZr 2012-01-18 18:35:57
『2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来』に参加してきた #html5semi - Diary of absj31
2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 : ATND 2012/01/20 2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 #html5semi - Togetter (写真：神保町駅改札前) HTML5関連ネタはやろうやろうと思いつつ個人的にはリーチ出来てない分野でして、ちょっくら拝見してきました。ちなみに上記の募集サイト、凄い人気で200人の定員に一時は倍の400人が登録すると言う事態に。HTML5人気は凄いですね〜。 開催開場は株式会社オプト１F大会議室＠神保町。この日は朝から雪が降るなどして天候が崩れていましたが、夕方〜開催の頃には問題無く止んでおりました。しかし外は寒かった！(>_<) 入場時の状況で5分程遅れて本編スタート。以下メモです。 基調
ブラウザで動くリアルなPhotoshop [HTML5][CSS3][jQuery/Javascript]:DDN JAPAN
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
![ブラウザで動くリアルなPhotoshop [HTML5][CSS3][jQuery/Javascript]:DDN JAPAN](https://cdn-ak-scissors.b.st-hatena.com/image/square/f3fe9affa123b42755613da081c65bf65795a0a3/height=288;version=1;width=512/https%3A%2F%2Farticleimage.nicoblomaga.jp%2Fimage%2F12%2F2012%2F9%2Ff%2F9f5362d3aba635f6f437bb43d3bc30644e0c97711326606606.jpg)
あの機能が使えるかどうか。HTML5/CSS3の機能単位の判別ライブラリ·Modernizr MOONGIFT
ModernizrはHTML5/CSS3を機能単位で実装状況を判断するJavaScriptライブラリ。 ModernizrはJavaScript製のオープンソース・ソフトウェア。数年前まではブラウザによって動く機能、動かない機能というのがあった。それらを吸収するライブラリとしてPrototype.js/jQueryなどがもてはやされた。今、時代はHTML5に変わろうとしているが話はさらにややこしくなっている。 テスト WebKitはブラウザバージョンという概念さえ持たない。Google Chromeが日々バージョンが変わっている。IEもバージョンが増えており、ブラウザによってHTML対応具合が細かく違っている。そんな中でHTML5を進める際に使ってみたいライブラリがModernizrだ。 Modernizrはブラウザごとの判断ではなく、機能ごとに使える/使えないを判断するライブラリだ。例え
ハンズオンレポート | gihyo.jp
本稿では、Chrome+HTML5 Conferenceで開かれた２つのハンズオンについてレポートします。 HTML5/CSS3/JavaScriptのブラウザ実装が進化してきて、リッチなWeb UIを実装することが可能になってきました。特に大きな特徴として、プラグインを必要としないアニメーションを実装できるCanvas/SVGや今まで画像頼りであった綺麗なボタンなどを画像もプラグインもなしで実装できるCSS3があります。これらをはじめて使う方々向けの2つのハンズオンが行われました。なお、両ハンズオンとも講演中の映像や資料は公開されておりません。 JavaScript初心者のためのSVG/Canvasアニメーション入門 １つ目のハンズオンは、羽田野太巳さんによるSVG/Canvasアニメーションについてです。 まず最初にCanvasとSVGの、次の2点の違いを言及しました。 Canvasは
【レビュー】サイト制作をかんたんにするテンプレートキットHTML5 Boilerplate登場 | エンタープライズ | マイコミジャーナル
HTML5 Boilerplate - A rock-solid default for HTML5 awesome. Webを取り巻く技術開発や仕様の策定、ブラウザの実装などの進展はとても早い。新しいデバイスが登場すれば適用する技術のスポットも変わるなど、日々めまぐるしい勢いで状況が変化している。こうした技術をキャッチアップし、いち早くテクニックやティップス、ベストプラくティスとして発表するブログの更新もとても早い。 HTML5やCSS3、最新のJavaScriptに関するティップスやテクニック記事はすでに数多く登場している。こうした技術を活用し、HTML5をベースにベストプラクティスを組み合わせていけば、最初からそれなりにできのいいものを開発することができる。しかし、話題はさまざまなサイトのブログやTwitterメッセージに分散しており、そうした情報を年間単位でさかのぼりながらまとめて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chrome-life.com
HTML5 Boilerplate: The web’s most popular front-end template
http://html5snippets.com/