[B! html][html5] y-idのブックマーク

HTML5 や CSS などのリファレンスサイト（未完成）を公開したよ

実はずいぶん昔に一回作ろうと思って途中で挫折した結果、しばらく放置状態だったんですけども、暇を見つけてはちょっとずつ進めていた Web 界隈の方々向けリファレンスサイトがとりあえず公開できそうな感じになったので晒してみますよ。作ってるのは下記です。 W3 Watch Reference ： Web クリエイターのための HTML5, CSS, jQuery... クイックリファレンスただし、なんとか形になってるのは HTML5 タグリファレンスの部分だけなんですけどね...... HTML5 タグリファレンス： W3 Watch Reference 未完成のまま晒すんじゃねぇという声が聞こえてきそうですが気にしない気にしない。かつ、巷には多くの優れたリファレンスサイトがすでにありますので、今さらなんですが、よく調べる内容について 1つのサイトにまとまってたら便利だし、自分のお勉強を兼

y-id 2013/06/28

リンク

HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌

Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。ライブデモ実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。関連エントリ CSS3を使った驚きのデモいろいろ２５種類画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript

y-id 2011/08/08

リンク

犯してはいけないHTMLタグの過ち10個

【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を

y-id 2011/04/19

リンク

HTML5とCSS3をページ全体or少しずつ導入するチュートリアル

デモページの全体のキャプチャ下記は各ポイントを意訳したものです。全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。ウェブページにHTML5を導入ウェブページにCSS3を導入ウェブページにHTML5を導入デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh

y-id 2011/03/02

リンク

わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr

HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート

y-id 2011/02/14

リンク

HTML5で進化したフォーム機能　ここが違う！サンプルで見るHTML5（5）

はじめにこの連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。過去の連載も読む第1回：HTML5が注目を浴びる理由とは？第2回：HTML4から変化したHTML5のマークアップ第3回：HTML5で再定義された要素と属性第4回：HTML5で実現できるマルチメディア系機能新たに導入されたフォームコントロールこれまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい

y-id 2010/12/27

リンク

前から気になってたHTML5について色々調べてみました - もとまか日記

先日、ドコモのAndroid端末である「GALAXY S」を予約したわけですが、そうなると気になるのが、ずーっと前から気になってたHTML5について。これからスマートフォンが普及するにつれて、無視出来ない技術であるのは誰の目にも明らかなのではないでしょうか。てことで、HTML5について調べてみたメモです。 HTML5の概要まずは難しいことは抜きにして、概要を読んでみると分かりやすいです。 HTML5, きちんと。この記事だけで十分です。長くもなく、文字も少ないので非常に入りやすいです。 HTML5仕様関連一応ですが、仕様について。 HTML5.JP - 次世代HTML標準 HTML5情報サイトHTML 5 ― HTML 4 からの変更点 (http://www.w3.org/TR/html5-diff/ 日本語訳) 必要に応じてみればいいので、細かくは見てません。基礎知識概要が理解出来

y-id 2010/12/18

リンク

HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなニュース

HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできることまずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「