HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
触れるミュージックビデオ!? インライン動画再生のはなし - KAYAC engineers' blog
HTMLファイ部ののびーです。12月ぶりです。 さて今回は、以前にとあるアイドルさんのWebサイトを制作した際に使った、 インライン動画再生 という技術について、その仕組みや使い所を解説していこうと思います。 今回のために作ったデモサイトがこちらになります。ぜひこちらのページもスマホで開きつつ、記事をご覧ください。 https://fnobi.github.io/plays-inline-demo/demo/ インライン動画再生とは 動画を再生するWebサイトを作ったことがある方ならわかると思いますが、これまでiOS Safariでは、動画を再生する際は必ず全画面再生になってしまう、という制約がありました。 この制約により、たとえば動画をサイトの背景に使ったり、動画と連動する演出を出したりといった表現が、iOSのシェア率を考えると断念せざる終えない…という状況が続いていました。 ところが、
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
This website is no longer available
Unfortunately the site you are looking for is unavailable at this time. This is not a server error, but an intentional closure. Domain owner? If you are the owner of this website and believe the website is offline in error, please contact support@34sp.com immediately. This page should not appear without due reason and you will have been notified by email regarding any important changes to your acc
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
PHPでpjaxる - 私の昆布
前置きがすごい長い記事です。時間無い人は、読まないか後ろから読んでください。 昨日も書いたんですけど、ふることきっ！でpjaxというのを利用しています。 で、その際「PHPでpjaxるにはどうしたらいいかなー」と思いググったら、出なかった。…いや、もしかすると「簡単すぎてまとめるまでもねぇよ！」ってことかも知れないけど、まとめておく。後で学校でも使う予定なので。 pjax? まず、ajaxがあります。知らなかったらググってください。同一ドメインなら非同期に通信してくれるアレです。 そして、「pushState」というものがあります。 HTML5で、「5.4 Session history and navigation」というAPIが追加され、その中に「The History interface - pushState」というものがあるんですが、それです。 この「pushState」は
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
DreamweaverCS5のテンプレートをHTML5にすると文字化けする
DreamweaverCS5のテンプレートを使いHTML5を構築しようとした時、 テンプレートを反映したサイトが文字化けを起こす場合があります。 HTMLの文字エンコーディング指定がUTF8の時に起こります。 HTML5では文字エンコーディング指定は、 <meta charset="UTF-8" /> と省略して記述できます。 どうやらこの部分がDeamweaverで正確に解釈されてないようで、 テンプレートを反映したファイルの文字コードが全てShift-JISになってしまうのが文字化けの原因です。 （Dreamweaver上では正常に表示されてますが、テキストエディタなどでファイルを開くと文字エンコーディングがShift-JISになってるのが確認できます） とりあえず文字エンコーディング指定を下記の様にHTML 4と同じ記述にすればこの問題は回避されますが、 Adobeには早めに対応して
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
jPlayer : HTML5 Audio & Video for jQuery
a project by happyworm The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provid
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
html5mediaでIE6,7,8でもHTML5で動画再生 – CamCam
これまでPCサイトでの動画再生といえばFLVが主流。 がしかし、iPhone iPadではFlash非対応で再生できない。ジョブズも時代はHTML5だと頑なにFlashを拒否してたのは周知の通り。 そんなこんなで時代の流れは脱Flashへと向かう中、アタクシ自身もかなり以前からFlash嫌いだったこともあって、Webでの動画再生はHTML5でやりたい。 そうなると次なる問題は、Flash以上にいかんともしがたい IE6,7,8 HTML5をまったく理解しないアホブラウザどもだ。 IEを抹殺しない限り地球に平和は訪れないとすら思える。 しかし時代はあっさりこの問題もクリアしてしまった。 html5media HTML5 video and audio tags in all major browsers これで、IE6-8でも問題なくHTML5のvideoタグを使って動画を再生できる。 ダウ
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
jAction
jActionのはじめかた ⒈ ライブラリをダウンロードしましょう HTML5でスマートフォン向けのゲームを制作するために使える基本的なメソッドがそろっています。さっそくライブラリをダウンロード、ゲーム制作にチャレンジしてみましょう。 ⒉ プラグインを募集しましょう ゲームを制作していて分からないことがあれば、jActionで募集してみましょう。HTML5に精通している方がプラグインを投稿してくれるかもしれません。募集はこちら ⒊ プラグインを共有しましょう jActionを応用してプラグインを開発して皆さんに共有しましょう。「いいね！」がたくさんついたプラグインはオフィシャルとしてリリースし、リファレンスに追加させていただきます。
【HTML5】Android で video タグ設置するもタップに反応が無いとか色々。 - genEx::基本的にASP.net
ここ数日３時間ぐらいしか寝れてないので眠いです(´-ω-) それはさておき今日はHTML5のお話を少し。 仕事でAndroid/iPhone向けに動画を配信しよーということで 最初は動画ファイルに直リン張ってたけどスマホ向けなのに スマートじゃないって事で、HTML5のvideoタグを使用。 今まで直リンだった動画をソースに指定して。。。 iPhone4では難なく再生(=∀=)/ Androidが問題児でした。。。 表示されてるビデオの枠をタップしても反応しない。 あっるぇぇぇぇぇぇ？ というわけでググったら、Androidは onclick="this.play()" とか つけないとダメという事が分かったので早速つけてみた。。。 やった！タップに反応した！ と思ったら 「この動画は再生できません」 何というツンデレ んで、他のAndroidで再生できる動画の中身を確認すると どうやら
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.99lime.com/