タグ

HTML5に関するwavementのブックマーク (31)

  • ちょっとこの辺でHTML5のタグを全部確認してみようぜ!!

    HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますw 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの? ― #HTML5のタグは百八つまであるぞ …? ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き@kazuhi.to: 巷(何処)で話題のmain

    ちょっとこの辺でHTML5のタグを全部確認してみようぜ!!
  • Google Swiffy

    Swiffy converts SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player.

    wavement
    wavement 2011/06/29
    Flash SWF files to HTML5
  • HTML5の可能性を体験できる、すごいサイトのまとめ

    HTML5を実際にうまく取り入れてるサイト、HTML5の実験的なコンテンツを紹介します。 Antoine Wette GO-UP [ad#ad-2] Cultural Solutions Media

  • | blog.ryow.net

    HTML5がほぼIE以外のブラウザで動く時代になっているので、IEユーザが少ないサイトではそろそろ積極的に使っていくべきだと思ってます。YoutubeやTwitterやnanapiHTML5に振り切ったというのは、ユー […]

  • 【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

    HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL(zip:12kb) HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi

    【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
  • HTML5とは何かを簡単にまとめてみた

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括部 制作部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた

    HTML5とは何かを簡単にまとめてみた
  • HTML5でつまずきやすいasideとsectionの使い方

    HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします! 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を

  • HTML5/CSS3に関する便利ツールやチーとシート、リソース25:phpspot開発日誌

    25 Useful HTML5/CSS3 Tools, Cheat Sheets and Resources HTML5/CSS3に関する便利ツールやチーとシート、リソース25。 HTML5やCSS3に関する勉強用や効率化に役立ちそうなエントリのご紹介です。 以下に一部をご紹介。 CSS3 Selectors Test CSS3のどのセレクタが効いているかテスト Web Browser CSS Support ブラウザごとのCSS対応状況をテーブルで表示 HTML5 Security Cheatsheet HTML5に関するセキュリティのチーとシート HTML5 Gallery HTML5で書かれたいい感じのサイトギャラリー HTML5 CheatSheet HTML5のタグのチートシート CSS3 Please! クロスブラウザでCSS3を動かせるためのプロパティジェネレーター CSS3

  • 「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave(テックウェーブ)

    [読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。(以下参照) 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを

    「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave(テックウェーブ)
  • W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP

    一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日語訳は、私が理解を深めるために、自分なりに日語化したものです。語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL:http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル:HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日:2011/05/26 最終更新日:2011/05/26

  • 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた - 音楽方丈記

    主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた » 音楽ネタ全般  [編集] このブログを iPad の Safari でもそこそこ見れるように埋め込みの mp3 プレイヤーとか Flash 関連の扱いを前からコツコツといじっているのですが、いろいろやるついでに主要ブラウザの HTML5 の audio 要素の再生ファイル形式がどこまで対応しているのか調べてみました。 HTML5 の audio 要素について» 基構文 <audio src="音声ファイルのURL" >ここに未サポート時のメッセージ</audio> » 属性 属性 値 用途 src 再生する音声ファイルの URL controls 再生/停止ボタンなどのインターフェイスを表示する autoplay ロード後に自動再生する loop ループ再生する preload none meta

  • HTML5を実際に使用しているサイトを集めたHTML5専門のWebギャラリー5つ - かちびと.net

    ふと、HTML5を実際に使用しているサイトの 現状が気になって調べ物をしたので、ついで にシェアします。HTML5を使っているWebサ イトのギャラリーを5つほどご紹介します。 実例からIEへの対応なども学べるので導入 予定の方はチェックしてみては如何でしょう。 日でもHTML5で作られたサイトを稀に見かけるようになってきました例えばローソンのサイトはHTML5ですね。Twitterでも一部のユーザーに人気のie6botのサイトもHTML5です。 海外では結構な数になってきているようですので実例を見て学びたいと思い、ギャラリーから探しました。 101 Best HTML5 Sites HTML5で出来たサイトのベスト100を掲載しているサイトです。サムネイルも中くらいのサイズで見やすいのでお勧め。 このサイトはシリーズ化していて、他にもTwitterアプリ、iPhoneアプリサイト、An

  • Ajaxページへのパーマリンクを#!なしで実現する - yamasaのネタ帳

    TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場 Ajaxを多用しつつパーマリンクも提供しているサイトのURLは、「#!ほげほげ」のような形式になっていることがよくあります。上の記事に書かれているように、これにはちゃんと理由があるわけなんですが、やっぱり「#!なんてのが含まれるURLは格好悪い」と感じる人も多いようです。 そこで、「#!ほげほげ」なんてURLを使わなくてもAjaxの画面遷移を実現する、Session HistoryというHTML5の機能を紹介します。 Session history demo ChromeやSafariで上のページにアクセスし、地図をドラッグしてみてください。地図を動かすたびにURLが変化しているのに気づくでしょう。そこでブラウザの戻るや進むキーを押すと、地図の移動履歴を辿

    Ajaxページへのパーマリンクを#!なしで実現する - yamasaのネタ帳
    wavement
    wavement 2010/10/16
    Session History
  • 連載インデックス「HTML5“とか”アプリ開発入門」 - @IT

    連載インデックス 「HTML5“とか”アプリ開発入門」 JavaScriptAPICSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします。 Webの3つの問題を解決する「HTML5」とは何なのか HTML5“とか”アプリ開発入門(1) 最近よく目にする「HTML5」という言葉。JavaScirptのAPICSS3、SVGなどを含め、全体的な概要と、その意義をお伝えします

    連載インデックス「HTML5“とか”アプリ開発入門」 - @IT
  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • 【レビュー】HTML5 VideoまとめとMediaElement.js | エンタープライズ | マイコミジャーナル

    Technology and web development in curly bracket languages {Javascript, C#, ActionScript} HTML5 Videoはそのコーデックまでは規約では規定されていない。現在のところH.264、OGG、WebMという3つのコーデックが有力視されており、ブラウザにおけるサポートもさまざまだ。IE9以前のIEのようにHTML5 Videoをサポートしていないブラウザに対応することも考えると、FlashやSilverlightのサポートも必要になってくる。こうした現状に対応するためいくつかのテクニックとJavaScriptフレームワークとプレーヤが登場している。実現方法はさまざまだが、そのほとんどがHTML5 Videoをサポートしていればそれを使い、そうでなければ最終的にFlashを受け皿に使うといった仕組みを採用し

  • iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」:phpspot開発日誌

    Tile5 | Tile5 - HTML5 Mapping and Tiling iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」。 iPhoneでも使うことができてなかなか便利です。Androidにも対応予定 地図のドラッグ&ドロップが可能。 地図だけではなく、Flickrの写真を検索して並べてみたもの。 GitHub上にてオープンソースで公開されています。 関連エントリ 見ておくべきHTML5サイト集 HTML5のポテンシャルを感じられる48のサンプルサイト CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」

  • サーバー不要で保存できる「Web Storage」の使い方 (1/5)

    HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力

    サーバー不要で保存できる「Web Storage」の使い方 (1/5)
  • HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)

    スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。

    HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
  • HTML5 Video Player Comparison

    * See What Sucks O hai.We’ll help you choosing the best HTML5 based video player for your next project. Last update: 2017-08-10 Feedback on Twitter.Let’s use the simple and easy-to-remember hashtag #videosws for feedback and news. See you there! Information.Made by Philip Bräunlich and Gerrit van Aaken. New players and updates? Demo video by Visuelle Zeiten. Still missing some players:Accessible H