HTML5で作るルービックキューブがすごい！「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」
HTML5で作るルービックキューブがすごい！「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」 HTML5という言葉が世に出てから、暫くたって多くのプロジェクトが発信されてきましたが、今日紹介するのはHTML5+CSS3+javascriptで作るルービックキューブ「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」です。 こちらはただ単にキューブを作って描画するだけではなく、ボタンやスマートフォン上でのフリック、マウスなど様々な方法でルービックキューブが遊べるようになるというものになっています。 詳しくは以下 原文には制作過程が順を追って公開されており、解説も英語にはなりますが、ソースコードともに詳しく記載されています。 WEB制作に携わっている人には面白いチュートリアル
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト
img要素でalt属性の内容がポップアップしない img要素のalt属性に値を設定しておくと、 その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、 またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、 このような考え方は間違いです。 alt属性の仕様 img要素のalt属性の説明を仕様書から見てみましょう。次のように書かれています。 alt = text [CS] この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、 代替テキストを指定する。代替テキストの言語は、lang属性で指定する。 非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、 当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定
ちょっとしたメモ - alt要素？
alt要素なんて、もちろん今の仕様には存在しないわけだけれど、それらしきものが検討された様子がある…という話を、何かのページの一部に書いたような気がするのだが、消してしまったみたいなので、思い出しながら書き記しておこう。検討の痕跡が残っているのは、XHTMLモジュール化仕様のDTD実装ページだ。 このページのF.2.5. XHTML Qualified NamesのセクションBは、「XHTMLの全要素型の名前空間修飾名を提供するためのパラメータ実体を宣言する」とされている。つまり、このセクションでxxx.qnameという形の定義があれば、xxxはXHTMLの要素型名として用いられる（と想定されている）ことをあらわす。このセクションの最後には、次のような記述がある。 <!-- Provisional XHTML 2.0 Qualified Names ....................
ＨＴＭＬ文法的に正しいＳＮＳボタンの設置方法 その２ ｜ タナウツネット雑記ブログ ｜ 田中芳樹を撃つ！
設置することで情報拡散に使用でき便利だが、標準仕様ではＨＴＭＬ文法的に正しくないタグで構成されているＳＮＳボタン。 Twitterツイートボタンとmixiチェックボタンについて解説した前回に引き続き、今回はFacebookとGREEのいいね！ボタンのＨＴＭＬ文法的に正しい設置方法について少し。 FacebookとGREEのいいね！ボタンは、ＳＮＳボタンの中でもかなり特殊なタグで構成されています。 Twitterツイートボタンとmixiチェックボタンは、一般的にも多用される＜a＞のリンクタグで構成されていたため、カスタマイズも比較的容易だったのですが、FacebookとGREEのいいね！ボタンでは＜iframe＞（インラインフレーム）というタグが使用されています。 Facebookいいね！ボタン ＜iframe src="http://www.facebook.com/plugins/lik
意外と多い HTML Validation チェックが通らないブログパーツ（正しい HTML4 or XHTML）） - digital 千里眼 @abp_jp
HTML5 移行前に確認しておきたい HTML4 or XHTML の典型的な間違い 2010-08-15 23:30 追記 id:satoshi351017 さんにコメント欄でご指摘頂いた間違いを修正しました（参考：エスケープする文字 - 雑記帳） 前提 DTD の読み方はここでは解説しないので DTDの読み方 参照のこと そろそろ「IE6」の「非標準」を考慮しなくてもよいのではというスタンスで書きます The W3C Markup Validation Service で自分のブログ（Doctype: HTML 4.01 Transitional）をチェック ...orz よーく見てみると、エラーはブログパーツに多い ちなみに はてなトップページ（Doctype: XHTML 1.0 Strict）は... 大惨事っ！！（当然こちらの原因はブログパーツじゃないが） 共通の間違い：ＵＲＬ
Microformats Wiki
初めての方は、Microformats の手引きからどうぞ。編集を始める前に、how-to-play-jaを読んでください。 はじめに この wiki は microformats コミュニティの中心的なリソースです。発表済みの microformats 仕様、仕様ドラフト、発表パターンの現在のバージョンを見つけることができます。新しいフォーマットのプレインストーミングページや、認められたフォーマットや開発中のフォーマットの問題追跡ページといった開発用のリソースもあります。 スタートするには Microformats を始めるには… まず、自分のページやアプリケーションで、意味的に豊かで説明的で、'POSH' な HTML を書くことに慣れましょう。 「microformats について」のページ、ブログ、メディア紹介例やプレゼンテーション、microformats に関する書籍、ポッドキ
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
HTML5関連の情報源のまとめ（2012年4月版）
こんにちわ。HTMLファイ部のふちがみです。 HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。 ソーシャルブックマーク キーワード「HTML5」を含む新着エントリー - はてなブックマーク キーワード「CSS」を含む新着エントリー - はてなブックマーク キーワード「javascript」を含む新着エントリー - はてなブックマーク コミュニティー html5j.org | Google グループ ニュースサイト HTML5/CSS3の情報をクリップ！ :: dotHTML5 dotHTML5のtwitterもフォローしておくとGOOD ゲーム・ガジェット系 Kotaku JAPAN｜ザ・ゲーム情報
HTML5の基本的なシンプルテンプレート「HTML5 Reset」
ブラウザなどの制約によってまだまだ全ての現場で利用できるとは言いがたい状況ではありますが、国内でも徐々に利用されてきているHTML5。そろそろ手をつけようと思っているWEBクリエイターの皆様も多いと思います。そこで今回紹介するのはHTML5+CSS3を利用した汎用テンプレート「HTML5 Reset」。 こちらのテンプレートは基本的なCSS、リセットCSSなど非常に分かりやすい構成で組み込まれており、カスタマイズして利用したり、構造を学んだりすることができるようになっています。 詳しくは以下 こちらのテンプレートは2010年から公開がスタートし、バージョンアップが続けられれ、現在はV2としてリリースされています。 本を読み解いて覚えるのは確実ですが、時間がかかりますし、HTMLの基礎ができている方であれば、習うより慣れろで、こう行ったテンプレートを触っていったほうが、遥かに学習効率がよさそ
HTML5を使うためのチートシート「HTML5 Cheat Sheets」
今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。 HTML5 Tags Cheat Sheet HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。 詳しくは以下 HTML5 Event Handler Content Attribute Cheat Sheet HTML5 Browser Support Cheat Sheet タグのチートシートではHTML4とHTML5とタグと併記されており、こちらを見ればコーディングの際に迷う事も少なくなるはずです。新年からHTML5を覚えていこうという方は是非どうぞ。
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
古い感じがしてかっこわるいと思うコードの書き方10例
ホームページを作り始めて8年近く経ち、たくさん作った方が上達するという思いもあって、今まで数多くのサイトを作ってきましたそんなサイトたちを改めて見直してみて、「何か古い感じがするな～」と思ったコードを挙げてみます。 完全にこれがダメと言っているのではなく、個人的な好みもあるので、温かい目で見てもらえればと思います。 1. フレームを使っている ホームページを作りはじめの頃、サイドにあるメニューが１つ増えるたびにすべてのページで変更しなくてはならず、すごい手間でした。 で、サイドのメニューとメインのコンテンツをフレームで分けて表示していました。 しかし、HTML4.01ではフレームは非推奨で、設定する場合の条件として、文書型宣言（DTD）にFrameset を指定しなくてはいけません。
ブラウザやウェブについて知っておきたい20のこと - ネタフル
ちょっと前に公開されたGoogleのコンテンツなのですが、もしまだご覧になっていない方がいたらぜひ。と思い、記事にしました。「ブラウザやウェブについて知っておきたい20のこと」です。 Google Japan Blog: ブラウザやウェブについて知っておきたい20のことによると、 では、ブラウザやウェブの技術はどういう仕組みになっているのでしょうか。最近よく耳にする「HTML5」や「クラウド」は、具体的に何を意味するのでしょうか。そして、このウェブを安全に、また効率的に利用するには何を知っておくべきなのでしょうか。 という疑問に答えるために、作成されたコンテンツだそうです。 絵本仕立てになっています。 物語は「インターネットとは」というところから、始まります。 この絵本自体も、HTML5で作成されています。
リンクするデータ、できること、目指すこと
ネットワーク時代のデータ 1つの組織内のデータベース 比較的少数のコンピュータ 管理可能なサイズと質のデータ、整ったスキーマ 組織、領域を超えたデータ 多数のコンピュータ、あるいはクラウド 膨大で質も不明なデータの海、それぞれに異なるスキーマ データのウェブ 標準化、ガイドライン… みんなで同じ語彙、スキーマ？ → 無理 共通項を用意してマッピング → ある程度は機能するが情報が失われる 約束事が多いと破綻しやすい 緩やかなつながり：データのウェブ WWWは簡単で緩やかな文書のリンクで発展 記述の約束（HTML）は単純で非力。しかしだからこそ誰もが利用できた（「よいHTML」） データも簡単な約束でリンクすれば、さまざまな形での利用が可能 情報サイロ 情報サイロ、あるいは壁で遮られる社会ネット The problem with today's social networks is that
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 のモードスイッチなどの情報も含
HTML5 における HTML4 からの変更点
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
WEBのお勉強とその他趣味的な感じで
警察から電話が来ました。 久しぶりの更新で、こんなタイトルですいません。 正確には、警察からではく、県警から委託を受けた企業からでした。 内容は、 「県警から、委託を受けて、電話による特殊詐欺撲滅のための・・・」 というような内容でした。 そのあと、お時間２～３分よろしいでしょうか？ ときました。 よく電話が来るのが、 「○○会社（業界大手）の特約店の▲▲（聞いたことがない会社）です。 電気代がお得になる・・・・」 とか 「NTTの特約店の××（聞いたことがない会社）です。 お得になる、フレッツ光の・・・」 と、同じパターンだと思い 明らかに怪しいと感じたので 「忙しいので、駄目です。」 と断ってしまいました。 通常ですと、それでもと、かなりしつこく来るのですが、 あっさりとあきらめてくれました。 気になったので早速、県警に電話しました。 しばらくコールしたら、忙しそうな感じで電話に出られ
背景画像を使わずにCSSスプライトをする方法 | アルペジオのように
背景画像を使わずにCSSスプライトを実現する方法が紹介されていたので、参考にしてメニューを作成してみました。背景画像ではないので、プリントアウトしても問題なく表示されます。 背景画像なしのメニューサンプル 画像を背景として指定するのではなく、普通に imgタグで設定します。 メニュー画像 サンプルで使用している画像はこうなっています。 サンプルのソース HTMLとCSSのソースです。 <style type="text/css"> #sample_menu { width: 500px; height: 60px; margin: 2em 0; overflow: hidden; } #sample_menu li { list-style-type: none; float: left; } #sample_menu li a { display: block; width: 125px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリセット手法