開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました! 使い方は簡単!下記のコードを貼り付ければOK! まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします! 「HTMLファイ部」創立1周年! 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ!・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます! ツール系のサイト
手軽なHTML5アニメーションを作るならこれがベストかも 前回Adobe Edgeの雑感を書いたが、今回は実際にEdge Animateを使ってみる。アニメーション自体を作るのは簡単だが、クリックしたら再生など、ちょっとしたインタラクティブ性を加えるにはJavaScriptの記述が必要になる。手順としてまずAdobe Animateでアニメーションを作り、さらにJavaScriptで制御してみたいと思う。 今回作るサンプル 単純なサンプルではあるが、PLAYボタンを押したらアニメーションが開始し、ボタンの状態をPAUSEボタンに変化させるトグルボタンの実装と、アニメーションが一回再生されるごとにカウンターの数字が上がっていくサンプルを作る。 デモ Edge Animateで作られる要素 コンポジションとシンボルの2つの考え方で構成される。Flashで言うところのStageとMovieCli
No doubt HTML5 is the most dramatic step in the evolution of web standards. It is the latest and advanced version of Hyper Text Markup Language (HTML) supported by all major browsers with its functionality. HTML5 has some new and awesome features like the incredible ways to add videos <video> and audios <audio> by minimizing the lookup of external source that make it most popular among web designe
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。(ミスなどの指摘は @lowply までお願いします) もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
風邪をすっ飛ばして肺炎という診断をくだされて、3日間ほど寝込んでいたminamiです。皆さんも気をつけて! AdobeからWebサイト構築ツール&サービス「Edge Tools & Services」が発表されました。 その中のHTML5/CSS3/JavaScriptベースでアニメーションを作成できるEdge Animateというツールに、Fireworksで連携できてしまう拡張をご紹介します。 Edge Animate 上記拡張をインストールします。FW CS5でも問題なく動作しました。 Fireworks上で適当な矩形と文言をレイアウトします。 コマンド > Edge Animate > Export Edge が拡張によって追加されているので、選択します。 プロジェクトファイルを出力するフォルダを指定します。 フォルダに自動的にEdge Animateで必要なファイルが書きだされま
[速報]アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日(日本時間24日深夜)、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
最近の「HTMLとかCSSとかAPIとか」、CSSがより便利に使える「実践Sass」~HTML5 Conference 2012 セッションレポート 9月8日、慶応義塾大学日吉キャンパス協生館にてHTML5 Conference 2012が開催されました。4トラック20セッションの講演が行われたのですが、本稿では次のセッションを中心に本イベントをレポートします。 「HTMLとかCSSとかAPIとか -2012秋編-」 「実践Sass -10を超えるプロジェクト運用で得たノウハウ-」 注 公式レポートは@ITにて順次掲載されていますのでそちらをご覧ください。イベントの公式サイトでは、本イベントに関する記事を収集しているので、こちらを確認してみると良いでしょう。また、各登壇者の発表資料もイベントの公式サイトに掲載されています。 基調講演 昨年開催されたChrome+HTML5 Conferen
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか? 僕は大好きです。 Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています! 魅力的な画面遷移エフェクトのコード集! Cubic Transition ※「▶Play」ボタンをクリック!
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-(矢倉眞隆さん) HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
2. 尾崎 義尚 VB2005は.NETへの移行を加速できるのか!? http://www.atmarkit.co.jp/fdotnet/special/vb6tovb2005mig01/vb6tov b2005mig01_01.html 業務アプリ開発で失敗しないコツ http://www.atmarkit.co.jp/fdotnet/vblab/bizappbasic01/bizappbasic 01_01.html Visual Basic 2010の新機能 http://www.atmarkit.co.jp/fdotnet/chushin/vb2010features_01/vb201 0features_01_01.html Internet Explorer 10 Platform Preview レビュー http://www.atmarkit
デスクトップ通知(Web Notifications)とは デスクトップ通知を表示する〔プレーンテキスト、HTML〕 Chromeのデスクトップ通知設定 指定したユーザーの最新ツイート3件をデスクトップ通知する〔プレーンテキストタイプ通知例〕 指定したHTMLページをデスクトップ通知する〔HTMLタイプの通知例〕 HTML5 DESKTOP NOTIFICATION〔デスクトップ通知を実装するjQueryプラグイン〕 DESKTOPIFY〔デスクトップ通知を実装するjQueryプラグイン〕 Firefoxでデスクトップ通知を有効にする方法 デスクトップ通知(Web Notifications)とは 2011/6/22 Web Notificationsは、Webページの外、つまりデスクトップ上にユーザーへ通知を行うことができるAPIです。 まだドラフト段階で仕様は確定していません。 201
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか?</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
PBWEB.jp > ニュース > アドビ、HTML5+JavaScript+CSS3でアニメーションを作る「Adobe Edge Animate」のプレビュー7を公開
ご存じの方はご存じで、ご存じで無い方はご存じで無い、Flashについての重要なニュースが先週にありました。 Android版Flash Playerは明日以降、新規導入が不可能に 2012年08月14日 まあ、ネット系に少しでも携わる仕事をしている方には常識のようなニュースではありますが、ネットサーフしてみますとまだまだFlashを多用しているのがたくさんあります。以前もこのエントリー(こんなサイトは作ってはいけない・・・Flash「馬鹿使い」編)でちょっと説明しましたが、いよいよこれが現実となりました。 FlashはそもそもHTML5が本格導入されればいらない技術で、それが分かってるのでスティーブ・ジョブズはiOSで対応しなかったわけです。顧客にもウケない、ウケルのは素人の担当者だけと言われる(勝手に言ってる)Flashサイトは、再度書くと以下の大きな欠点が二つあります。 1 SEO的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く