先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（アスペクト比が同じ場合、バグに気づきません）。 ※SVG伝道師の松田さんが「一概にバグではないと思う」とツィート されていたので参考までに仕様へのリンクを記事の最後に追記しておきました。 バグが発生する条件とデモ 実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。 デモはこちら このバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。 SVG 下の画像のようにサイズが132 x 160p
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
Thank you for being patient. We are doing some work on the site and will be back shortly.
ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る これまでFacebookはiOS向けのアプリをHTML5ベースで開発していましたが、起動が遅い、反応が重いなど不評でした。そこで方針を転換。8月にリリースされた新バージョンは性能を重視してネイティブアプリケーションとして開発されました。 ザッカーバーグ氏はこの、HTML5で開発するという方針を指して「HTML5に賭けたのは失敗」と発言したわけです。 ザッカーバーグ氏の発言のここだけを見れば、FacebookはこれからHTML5を捨ててネイティブアプリへ注力するように受け取れます。しかしザッカーバーグ氏のこの発言には続きがあります。そこまで聞くことで、本当は何を言いたかったのかがはっきりしてきます。 彼の発言を、TechCrunchで公開されているビデオから追ってみましょう（ビデオはこの記
(投稿直後に追記: この問題は既に解決しております…) ご無沙汰しております…。決算期が近づいて参りましたね。今期はほとんど売上立ってませんが… orz それはさておき、新しい仕事で使うことになりそうな技術の調査がてらプロトタイプ作りを進めようとしているのですが、HTML5 のインライン SVG を DOM から操作する際、 ID から要素を参照してその写像を表示する <use> 要素の扱いについて疑問点があったので、ちょっとメモしておくことに。 <use> エレメントについてはW3C の仕様勧告にサンプルがあるのですが (インライン SVG として簡略化して書くと以下のような感じ)、 <svg width="10cm" height="3cm" viewBox="0 0 100 30"> <defs> <rect id="MyRect" width="60" height="10"/>
HTML5 規格の策定について、これまでは WHATWG と W3C が協力して行ってきたが、このたび WHATWG の中心人物である Ian Hickson 氏が ML に投稿したメールによると WHATWG は WHATWG の路線を推進することになる (I Programmer の記事、本家 /. 記事より) 。 WHATWG はバグを修正しながら新たな機能を随時追加していくアプローチをとることになり、時間のかかるやり方を貫く W3C と比べてスピーディーで、「リビング・スタンダード」を作成することになるという。リビング・スタンダードとはつまり、決してどこかに落ち着くことはなく、常に新しい機能を追加しながら改良していくことを指し、対する W3C は、リビング・スタンダードの「スナップショット」であるとしている。 Mozilla Developer Street の記事によれば「プロジ
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
最近やっているJavaScript講座用にと、Girlsなんてちょっと中二病を催して付けた名前のJavaScriptアプリがあるんだけど、そいつのモックアップにクライアントサイドの動きを実装していた時の事。 ■ありゃ・・・GirlsのモックアップにHTML5的なドラッグアンドドロップで案件の移動を実装できたと思っていたはずだったが・・・Chromium18でしか期待通りに動かないなコレ。Fx11でも動いてくれないとカナシイなあ。 HTML5のドラッグアンドドロップAPIを使ってみた部分なので、ブラウザー間の実装差だろうかとうか思ってみた。しかし問題は新しいドラッグアンドドロップの為のAPIの使い方ではなくて、古くからのブラウザー間のイベントにおける座標取得なのでした。マウス関連のイベントを拾うとマウスの座標を読み取れる訳ですが、これがウェブブラウザー毎にちまちまっと違うんですよねー。 //
HTML5 の audio タグを使ってアプリケーションを作る際のメモのようなもの 前提: モバイル環境については考慮していない。 前提: というか Google Chrome のことしか考えていない。 HTML5 の audio タグの基本的な使い方は、 audio タグを作って、そいつに対して play() といいうメソッドを叩くと再生がはじまる、というものなのだが、 play() をいきなり叩いても再生がはじまったりはじまらなかったりする。 たぶんソースのロードがうまくいったりいかなかったりするんだろう。死ねクソが。 そこで play() を叩く前に load() というのを実行しておくと、ちゃんと再生が出来る。 load() を実行してから、ちゃんと再生可能になったタイミングで canplay というイベントが発火する。 ということなので var audio = document.
2011年12月15日20:00 カテゴリTipsiTech 備忘録 - 本blogをHTML5にするためにやったこと 正確には、「本blogをIEから見てHTML5に見えるようにするためにしたこと」ではありますが。 レシピ 二つだけ <!DOCTYPE html>を<html>の前に追加 <head>内に以下を追加 <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <![endif]--> 本来であれば1.だけでIE9はHTML5モードになってくれるはずなのですが、2.がないと駄目でした。実のところHTML5では2.はinvalidなのですが、重要なのはvalidityではなくブラウザーの挙動なので。Chrome Frameでも利用されているテクニックですし。 internet ex
The Polaris Dawn crew is back on Earth after a historic mission
ブラウザゲームの可能性が一気に広がりそうです 次世代のWebフォーマットとして注目され、徐々にいろんなところで使われはじめている「HTML5」。そんなHTML5で作られた「スーパーマリオブラザーズ」が公開され、話題となっています。 従来のHTMLに比べ、マルチメディア機能が大幅に強化されたHTML5では、今までのようにFlashなどの外部プラグインに頼らなくても、単体で複雑なゲームなどを動かすことが可能と言われています。今回紹介する「Infinite Mario Bros」も、ベースはあくまでJavascriptで、HTML5の高いポテンシャルを感じさせてくれるものとなっています。当然ながら、ブラウザがHTML5に対応していないと遊べませんので、古いブラウザを使っている人はご注意を。 パッと見はよくあるFlashゲームですが、もちろんFlashは一切使っていません 操作は方向キーで左右移動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
