KAYAC Front End Engineer チームによるHTML5 iOS Android ActionScript Flash イベント デザイン ニュースのブログ
Chrome+HTML5 Conferenceのデザイナーズトラックで学んできたことを簡単にまとめてみました。 主にあとで自分が詳しく調べるとき用の備忘録です。 内容がすごく濃くて、HTML5初心者の私にとって為になるお話ばかりでした。 HTML5について (1) HTML5では何ができる? セマンティックなコンテンツプラットフォームの実現 ⇒Webページの中に記述された情報が何を意味するのかをソフトウェアが理解しやすくなる リッチなアプリケーションプラットフォームの実現 ⇒HTML5関連のAPI利用や、Canvas、WebGL、SVGなどで表現の幅を拡大。 (2) 使うとこんな良いことが…! 意味のあるマークアップによって、検索性が向上する。 ページの要素が整理され、視覚障害者、聴覚障害者の方にとって情報が伝わりやすくなる。 CanvasやWebGL、SVGなどの利用により、高度で多彩な
スタイルシート(CSS3)でDIV要素を回転して表示するサンプルを書いてみた。 JavaScript で DOM element の style プロパティ経由で transform や transformOrigin プロパティをセットしている。 ⇒ locating and transforming by JavaScript and CSS 以下のウェブブラウザで動作確認済み。 - Mozilla Firefox 6 - Google Chrome 13 - Apple Safari 5.1 - Microsoft Internet Explorer 9 - Opera 11.50 IE9 は Windows Vista 上で、それ以外は Windows XP 上で動作するのを確認。 サンプルコードの中身。 <!DOCTYPE html> <html> <head> <meta ch
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start! Hey everyone! Initializr is going to retire at the end of 2017. I'd recommend using H5BP or Bootstrap directly instead. It doesn't take that long to combine them together and you'll get more up-to-
Developers and designers out there keep releasing useful tools and resources for all of us to learn about front-end development. Dive into this article to find some time-saving resources to improve your skills. Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that mig
CSS Nite LP, Disk 13フォローアップ(8)比留間 和也さん 記事公開日:2011年6月 3日(金) 2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集(1)iPhone/iPad編」のフォローアップとして、比留間 和也さん(カヤック)の『教科書には出てこない!? iPhone のUIトリック表現』のスライドと音声をシェアします。 スライド 音声(MP3、43:40、21.0MB) 続編のLP16:Android編を6月18日に開催します。 メッセージ 参加されたみなさん、長い時間お疲れさまでした。アンケートを拝見させて頂きましたが、これから作るぞ!というような熱意にあふれた意見が見受けられてとてもうれしく思っています。 一点、OTONATIC中でスライド中でアプリケーションキャッシュを使ってオフライン機能を実装してい
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)AI-enhanced description The document presents slides from a presentation by Tomoya Asai at the Firefox DevCon 2011 in Osaka, covering topics related to HTML5 for designers, including the future of Firefox, CSS design, and mobile web animation. It includes various links to resources and discussions about rapid releases, web fonts, CSS gradients, responsi
What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Ideally, the HTML5 DOCTYPE should be used. It's suppor
CSSのアニメーションプロパティでキーフレーム指定が面倒なので、動的に指定するJSを用意しました。 動作確認環境は、Chrome、Safari、MobileSafariです。 直接記述して指定する場合 マウスオーバーすることで、赤色から緑色に変わります。 直書きなので動的に色を変更(キーフレーム指定)するようなアニメーションは出来ません。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo-1</title> <style> div#demo1 { width :50px; height:50px; border:1px solid #000000; background-color: rgb(255,0,0); } div#demo1:hover { -webkit-animati
Mercury is the first planet from the Sun and is also the smallest and densest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system. Venus is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar
What is this? Adapt.js is a lightweight (820 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed. A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetch
[韓国語(한국어) by @myjjulee] 2011年4月21日に開催された第16回HTML5とか勉強会にて Progressive Enhancement をテーマに登壇させて頂きました。講演に使ったスライドをここに公開しますので、ご興味のある方は、ぜひ、ご覧ください。 Progressive Enhancement ~すべての人に確実に情報を届けるために~ Progressive Enhancement という考え方は、決して新しい概念ではありません。何年も前から Progressive Enhancement は多くの著名なディベロッパーから提唱されてきました。しかし、残念ながら、これまでは大きく注目されることはなかったといえます。 これまで私たちが努力してきたことは、主に Regressive Enhancement と呼ばれるアプローチです。あらゆるブラウザーに同じデザイン、
× I’m Andy Clarke and this is my studio, Stuff & Nonsense, where ideas meet design, and websites don’t follow rules, they write them. For over 25 years, I’ve helped push web design beyond trends and templates. I’ve written books that shaped the industry and worked with businesses from global names to tiny independents. Some of my clients Who I’ve worked with Disney Store UK Greenpeace Poland Nozom
Get every type of asset for any type of project, and access to AI tools From $16.50/m
How to Print a Test Page on Epson Printer? What is a Printer Test Page? Printer Test Pages are used for checking several things with your printer for maintaining and resolving the troubleshooting issues with the ink cartridges on your printer or just in the general maintenance of your printer. What Problems will a Test Page Resolve? A printer test page will detect and […] Continue reading Document
Web development keeps getting better – there are more increasingly-standardized tools like HTML5 and CSS3, and their features let web designers and developers create advanced and good-looking websites more easily. But some browsers – mainly Internet Explorer version 6, 7, and 8 – don’t support many of these features, like: border-radius gradients text-shadow transparency CSS animations and transit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く