スマートフォン対応、気をつけたいトラブル8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。Read less
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
50代でも分かったHTML5の基礎知識
おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは
たった一人でwebサービスを作るための、６つの技術と４つの知識
ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。 実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない！」的な迷える子羊達もちらほら。 そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。 だいじょーぶ、やりゃーできる！ webサービスを作るための技術と知識 技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。 その中でどこかに自分の強みが持てると尚良しですが、手始めであれ
HTML5でコーディングするときに役立つ10のオンラインツール
最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih
HTML5 のオフライン機能 - 強火で進め
Google Developer Day 2011に参加しました。 参加したセッションのメモを書いときます。 (追記 2012/01/14) Googleから動画が公開されました。 http://www.youtube.com/watch?v=MY06xnSZyaw:moive ※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。 (追記ここまで) HTML5 のオフライン機能(Eiji Kitamura) @agektmr 東京 - Google Developer Day 2011 http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html スライド 動的なデータの保存 Web Storage (localStorage / sess
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
ASSIOMA(アショーマ) » HTML5が新しいWebの世界を創る
最近テック系のブログやニュースなどでHTML5を取り上げられることが多くなり、目にされた方も多いと思います。人気ブログの「Techwave」でも以下のような記事でHTML5に言及しており、その注目の高さが伺えます。 ソーシャルの次の時代、「フリーミアム」が終わり「コンテンツがキング」になる Appleを脅かすFacebookの「プロジェクト・スパルタン」とは 日本のソーシャルゲームに追い風、日本はスマホソーシャルゲーム市場で世界を獲れる！ これらの記事の中で、HTML5をベースにしたWebアプリの可能性が非常に高く評価されており、今後のモバイルアプリの主流がネイティブアプリからWebアプリに移行すると予想されています。 そこで今回はこのHTML5およびWebアプリについて取り上げ、その可能性を探ってみたいと思います。 ■ HTML5とは 最初にHTML5とはどういうものなのか簡単に説明した
XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
FLASHをHTML5に変換できるGoogle swiffy公開、iPhoneやiPadにも対応
Adobeの「FLASH」やマイクロソフトの「Silverlight」といった既存のリッチコンテンツ配信プラットフォームに置き換わるものとして、GoogleやAppleは「HTML5」を推進していますが、ついにGoogleがFLASHコンテンツをHTML5コンテンツに自動変換できる「Google swiffy」を公開しました。 FLASHコンテンツをめぐってはiPhoneやiPadなどの自社製品での非サポートを貫くAppleと、Android 2.2以降から正式対応しているGoogleとで対応は分かれていますが、「Google swiffy」はiPhoneやiPadなどでも利用可能となっています。 Google Swiffy Googleが同社のエンジニアによる実験用サイト「Google Labs」で公開した新サービス「Google swiffy」はFLASHコンテンツをアップロードするだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌