タグ

htmlに関するEhrenのブックマーク (81)

  • HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

    安定した基盤上で、次世代のウェブテクノロジーを構築 Read below what W3C Members have to say about HTML5 2014年10月28日(アメリカ): ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ=リーは、「ビデオやオーディオをブラウザ上で見たり、ブラ

    HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
  • Easel

    Easel is an in-browser, high-fidelity web design tool aimed at designers and developers on small teams.Design For the Web Easel is an in-browser, high-fidelity web design tool that lets you mockup, share and implement your ideas with ease. Design Design accurately with built-in web fonts and true-to-browser rendering. Start quickly by importing your existing styles with our chrome extension. Share

  • data URI scheme

    The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple H

  • 画像などを埋め込み可能にする data URL スキーム (RFC2397) - seclan のほえほえルーム

    ウェブブラウザには、RFC で定義されている URI を処理するためのルーチンが組み込まれています。Mozilla Firefox や Opera は、そのうちの一つである RFC2397 で決められている data URL スキームを処理できます。このスキームは、html などのファイルの中に、通常リソースへのリンクを指定する場所に、直接データを埋め込むためのスキームです。そのため、複数のファイルを扱う必要がなくなるという利点が生まれます。具体的な書式は次のとおりです。 data:[MEDIATYPE][;base64],DATA ここで、MEDIATYPE は、インターネットでよく用いられている image/png や text/plain;charset=US=ASCII などで表現されているメディアを指定する文字列です。;charset=US=ASCII などのオプションも指定可能

  • [JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms

    画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル:Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量(14Kb)のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js

  • HTMLについて半角カナをテーブルのTD内で自動改行したい。

    Ehren
    Ehren 2011/06/28
  • IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

    IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー!」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含

    IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
    Ehren
    Ehren 2011/06/05
  • colgroup / col 要素を活用してみる | WWW WATCH

    table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 (縦方向) のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で

    colgroup / col 要素を活用してみる | WWW WATCH
    Ehren
    Ehren 2011/05/14
  • Easy HTML5 Template

    I’ll be the first to admit that when I see a default template like HTML5 Boilerplate, it brings about a swirl of emotions. On the one hand, I’m ridiculously intimidated by the incredible amount of knowledge and experience that’s been collected into one place for the benefit of front-end developers. So much so, that I wonder what I’m even doing in this industry, because it reminds me of how far beh

    Easy HTML5 Template
  • HTML5の先、HTML.nextを議論し始めたW3C

    W3Cは11月1日から5日まで、フランスのリヨンで行われていたTPAC2010(Technical Plenary / Advisory Committee Meetings Week)の中で、HTML5のさらに先のバージョンにあたるものをHTML.nextとして議論をしていたと、マイクロソフトのIEBlogのエントリ「Standardizing HTML6 through the W3C – My Trip to TPAC 2010」が伝えています。 HTML.nextについてのディスカッション HTML.nextがテーマになったのは、3日目に行われたTechnical Plenary Dayの3番目のセッション。Technical Plenaryとは、ワーキンググループの垣根を越えて幅広い話題についてディスカッションをする場です。 このセッションでは、マイクロソフトのPatrick D

    HTML5の先、HTML.nextを議論し始めたW3C
    Ehren
    Ehren 2010/12/03
  • ブラウザベンダーが勢ぞろいでHTML5について本音をぶつけ合った日

    ウェブ標準化という大きな流れの中で、「HTML5」というキーワードはバズワード化するほどに浸透してきた。しかし、その仕様自体はまだ策定中であるため、ブラウザベンダーの思惑でHTML5の実装が進んでいるのが現状だ。各ブラウザベンダーが今後どう足並みをそろえていくつもりなのかが気になるところだ。 11月2日にヤフーと技術評論社が開催した「ブラウザカンファレンス2010」では、Mozilla Japan、Opera Software、マイクロソフト、グーグルの各担当者たちが語る「ブラウザベンダーーに聞くHTML5対応の音と未来」と題したパネルディスカッションが開かれた。参加者はピクセルグリッドの外村和仁氏、Mozilla Japanの加藤誠氏、Opera SoftwareのDaniel Davis氏、マイクロソフトの春日井良隆氏、グーグルの北村英志氏、ヤフーの継岩直充氏。モデレーターは「WEB

    ブラウザベンダーが勢ぞろいでHTML5について本音をぶつけ合った日
  • HTML5でマインドマッピング·Mind Notes MOONGIFT

    Mind NotesはGoogle App Engine/Java上で動作するマインドマッピングシステム。 MOONGIFTはこう見る マインドマッピングをオンラインサービス化しているサービスは幾つか存在する。Mind Notesの利点はオープンソース・ソフトウェアである点になるだろう。またHTML5で実装されているので、iPadのようなスマートフォンからでも操作できるのが利点だ。恐らくそのこともあってキーボード主体ではなくマウス主体になっているのだろう。 現状では他のサービスに比べると機能的に見劣りするが、今後に期待したいところだ。ノードへのデータ追加がうまくモジュール化されれば、他のサービス(WikipediaFlickrなど)とも連携しやすくなるはずだ。 Mind NotesはGoogle App Engine/Java用のオープンソース・ソフトウェア。日々多数のアプリケーションが

  • HTML5への傾倒が進むアドビ

    アドビシステムズのイベント「Adobe MAX 2010」がロサンゼルスで行われたのは、先週10月25日(日時間25日深夜)。同社CTOのケビン・リンチ氏の基調講演では、モバイルデバイスの盛り上がりというIT業界全体のトレンドに触れた後、アドビ製品の最初の話題として登場したのがHTML5/CSS3によるマルチスクリーン対応でした。 一方でFlashとAIRが主役として登場したのは後半。セットトップボックスで動作する「AIR FOR TV」の発表と、ゲームプラットフォームなどに使えるGPU対応のFlashの発表などにおいてです。 [速報]Adobe MAX 2010。HTML5とjQueryに対応したWebアニメーションツール「EDGE」などを発表 - Publickey アドビのイベントで、HTML5/CSS3/JavaScriptがFlashよりも先に紹介される。これはアドビがHTML

    HTML5への傾倒が進むアドビ
  • JavaScript+HTML5で作られたゲーム「Canvas Rider」が面白い - 強火で進め

    Canvas Rider http://canvasrider.com/ 「Canvas Rider」は手描きの絵をMTBのコースしたゲームです。 こちらのベットルームをコースに見立てたものは難易度が高めでお勧めです。 Canvas Rider - 3D Bedroom by moose_man http://canvasrider.com/tracks/29472 操作方法はこちら。一度、ゲーム画面をクリックしてフォーカスを当ててからキー入力をして下さい。 enterキー : リトライ カーソルキー : アクセル/ブレーキと体重移動 Bキー : バイクの種類を変更 Fキー : フルスクリーン Zキー : 進行方向の変更z スクロール : 画面の拡大・縮小サイトの上部に有るタブで全てのコースの中からやランダムにコースを選択する事が出来ます。

    JavaScript+HTML5で作られたゲーム「Canvas Rider」が面白い - 強火で進め
  • 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で、6502MPUが動いている様子をビジュアルにエミュレートする「The Visual 6502」

    HTML5で、6502MPUが動いている様子をビジュアルにエミュレートする「The Visual 6502」 6502といえば、Apple IIやPET 2001など、パソコン黎明期のマシンに搭載されていたCPU。当時はMPU(Micro Processing Unit)とも呼ばれていました。1975年に発表され、今年で35周年を迎えるそうです。 6502の内部回路をHTML5とJavaScriptで再現 下記は、その6502MPU内部のチップ写真ではなく、トランジスタのレベルでCPUの内部回路をHTML5とJavaScriptによりビジュアルに再現した「The Visual 6502」(の縮小画面キャプチャです)。 右側のプレイボタンを押すと実行が始まり、回路内に電気が流れる様子までビジュアルに再現されます。動作中でも回路の拡大、縮小などが可能。ステップ実行もできます。 まるで動作中のC

    HTML5で、6502MPUが動いている様子をビジュアルにエミュレートする「The Visual 6502」
  • @rem @ > 140 characters - Hold off on deploying HTML5 in websites?

    This is my place that doesn't fit in 140 characters, but doesn't fit in to a blog post, so I'm dropping it here. [Please note that this post is intentionally unedited. It’s a raw rant that would probably go down better in a pub. Since we’re not in a pub, this medium will have to do.] So, go read this equally link baiting article on why you should hold off HTML5. Then come back and let’s talk. I’ll

  • HTML5でWebページをマークアップするための基礎知識

    最近よく目にする「HTML5」という言葉。JavaScriptAPICSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします 5からHTMLの“文法”が変わるって知ってた? 連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。 HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。

    HTML5でWebページをマークアップするための基礎知識
  • HTML5活用の現時点での落としどころ

    HTML5完全準拠をうたったIE(Internet Explorer)の新バージョン「IE9」ベータ版が2010年9月15日に一般公開になった。Webブラウザーシェアの約6割を占めるIEであるが、現バージョンであるIE8は、HTML5対応の点でFirefoxやGoogle Chromeなど主要なライバルWebブラウザーに大きな遅れをとっている。ベータ版とはいえ、HTML5に対応したバージョンがリリースされたことで、HTML5に対する注目度は一気に高まっている(関連記事1)。 HTML5の大きな特徴の一つは、Webアプリケーションのプラットフォームとしての機能強化である。現在のHTML4はHTMLのタグの仕様を規定するものだ。そのためHTML4をベースとしたWebブラウザーでは製品ごとにJavaScriptプログラムの挙動が異なることがあり、それがWebアプリケーション開発者にとって悩みの種

    HTML5活用の現時点での落としどころ
  • Webブラウザ用Twitterクライアント·twicli MOONGIFT

    twicliはHTML/JavaScript製のオープンソース・ソフトウェア。Twitterクライアントは無数に存在する。WindowsMac OSXLinux用からはじまり、iPhoneAndroidWindows Phone向けにも多数ある。さらにブラウザ機能拡張として提供されるものも多い。 タイムライン そんな中、異色とも言えるのがWebブラウザ上で提供されるTwitterクライアントだ。元々TwitterWebサービスだが、クライアントしての機能に特化させることで魅力的になる。その一つがtwicliだ。 twicliはOAuthを使っているのでパスワードを保存する必要もなく、さらにデータベースもいらない。JavaScriptHTMLのみで動作する。タイムラインはもちろん、MentionやDM、検索結果を見ることもできる。お気に入り登録やReplyもできるので必要な機能は

    Webブラウザ用Twitterクライアント·twicli MOONGIFT