とあるLPの制作現場 - Qiita
やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom
simpl.info
George Floyd October 14, 1973 – May 25, 2020 This site aims to provide simplest possible examples of HTML, CSS and JavaScript. There are shortcuts for many of these pages (see full list). For example, simpl.info/v redirects to simpl.info/video. A list of web development resources is available from bit.ly/webdevres. Submit bug reports, requests and comments at github.com/samdutton/simpl.
HTML6 でも CSS4 でもない Web 技術のゆくえ - WCAN 2015 Winter に登壇してきました
@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。（リアルにセッション終了後、1時間くらい胃痛がズキズキしてました） 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
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コーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
HTML5のvideoとcanvasで動画のキャプチャを取る | Web | position: absolute;
このエントリーはGraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012の19日のエントリーになります。 先日CSS Nite LP, Disk 25：Webデザイン行く年来る年（Shift6）に参加しました。その時にこのAdvent Calendarを起こしたoyamadaさんにもう「ひとつエントリー書いて」と言われましたので、ちょっと小ネタですが19日めとして登録しておきます。 動画のキャプチャを取る方法は様々ありますけど、HTML5でも手軽な方法でできますよということで。 サンプル ※動画はW3Cのサイトで利用されていたものを拝借しました。 「snapshot」というボタンを押すと再生中の動画のキャプチャを撮ってHTML内に挿入します。imgタグで入ってますので大抵の環境であれば右クリックで保存できます。 コードの解説ですが ca
Re:64bit版はどうなった？ (#2798848) | Thunderbird 38.0ベータ版とFirefox 38.0ベータ版がリリース | スラド
IEでは昔からあったルビ機能に対応するみたいですね。 それはよいニュースなのですが、Firefox 37から対応するという話もあった64bit版はどうなったのか気になる。 窓の森の記事には触れられていないので、延期になっているのかなあ。 仕様通りにまともにrubyを実装したのはむしろFirefoxが最初。 ChromeはHTML rubyをサポートする(ruby要素などを認識する)が、CSS rubyは一切サポートしない(組み込みのruby要素以外をルビ表示できないしルビの見栄え調整などは一切できない)。 IEはバージョン5から独自拡張でrubyをサポートして、バージョン8から当時の草案にもとづいてdisplayプロパティ値を追加したけど、ruby-position、ruby-alignなどはIE11でも独自拡張時代の仕様のままで、CSS rubyは完全無視している。HTML rubyはほ
Fullscreen API と 闇 - Browser
Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。 iOS Safari と Opera Mini, Android Browser 以外のモダンブラウザで動作するようです。 Can I use... Support tables for HTML5, CSS3, etc サンプル 下のボタンを押してみたください。 フルスクリーン対象は真ん中の DIV タグ部分となっています。 Fullscreen API 使い方 document."プレフィックス"FullscreenEnabled で Fullscreen API が使えるかどうかを調べて、 document."プレフィックス"RequestFullscreen() でフルスクリーン表示を開始します。 今回使っていませんが、"プレフィックス"ExitFullscreen() でフルスクリーン表
Yahoo!ニュース月100億PVのジレンマ～マイナーブラウザとどう付き合うか
写真：アフロ こんにちは、「Yahoo!ニュース」のHTMLやCSSのコーディングを担当している吉澤です。 今回は、「Yahoo!ニュース」ブラウザ版のコーディングをするにあたって気をつけている点などに触れてみたいと思います。 まずは、現在、PC版「Yahoo!ニュース」にアクセスしている方々がどんなブラウザを使っているのかを紹介します。 ご覧のように、Internet Explorer 11からのアクセスが一番多く、次いでGoogle Chrome、そしてInternet Explorer 8といった順番となっています。 1年間の主要ブラウザシェアの大まかな推移はこのようになっています。 Windows XPのサポート終了の影響で大きな動きがあったものの、ここ数ヶ月は安定した推移で動いているのがわかります。Internet Explorerについては最新版へのアップデートが緩やかに進行し
ウェブ関連仕様 日本語訳（ www.hcn.zaq.ne.jp/___/WEB/ ）
このページ は、 Web プラットフォーム関連の いくつかの仕様の日本語訳の一覧と，それらの日本語訳に共通する事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、日本語訳は公式のものではありません。 （実際に誤りが見つかることも時折あります。 それらについては見つかり次第修正され，加えて用語の対訳や言い回しなども時折修正されるので、これらの翻訳が「完成」する日は決して来ないとも言えます。） 一部の仕様は日々改訂され続けているので（特に WHATWG によるもの, あるいは W3C の編集者草案（ Editor's Draft ））、日本語訳は最新版と一致していないことがあります。 また、原文の更新に伴う，訳の更新の際に取り込み漏れがあるかもしれません。 その完全性は保証されませんが、ツールを利用して不定期に検証されてはいます（多数の更新
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
iOS 8 に Apple の HTML5 への愛を見た « 株式会社ゼノフィ
先週アップルが発表した iOs 8 のリリースに、私たちは非常に興奮しております。iOS 8 の正式リリースを手にして数日しか経っていませんが、いち早く世界中の Web 開発者コミュニティに最新のアップルのリリースについて徹底的にお伝えしたいと思っています。もちろん数週間、数ヶ月後にはここではカバーできなかった項目が発覚するのは承知ですが、既に分かっていることを少しでも共有できたらと思っています。 この記事は、今後iOS 8 がアップルのデバイスのベースラインとなることを見越して、HTML5 の現状を技術解析したものです。去年 iOS 7 にも似たようなレビュー記事を Web 開発者のために書きましたので、気になるかたはそちらもご覧ください。 iOS 8 の新機能は HTML5 開発を進めます 今回のアップグレードで加えられた機能について見ていきましょう。 Source: caniuse.
Private Presentation
Private content!This content has been marked as private by the uploader.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで固定比率レイアウト - @yoshiko_pg
GitHub - raphamorim/origami.js: Powerful and Lightweight Library to create using HTML5 Canvas
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Web制作 W3G
https://demo.agektmr.com/dialog/
http://breach.cc/
真面目なアニメーション (html5j 2013, Web Animations)
