HTML 5.2: 4.13. Common idioms without dedicated elements
1 Introduction1.1 Where does this specification fit?1.2 Is this HTML5?1.3 Background1.4 Audience1.5 Scope1.6 History1.7 Design notes1.7.1 Serializability of script execution1.7.2 Compliance with other specifications1.7.3 Extensibility1.8 HTML vs XML syntax1.9 Structure of this specification1.9.1 How to read this specification1.9.2 Typographic conventions1.10 A quick introduction to HTML1.10.1 Writ
【2017年8月】WebAssemblyに近未来フロントエンドの「夢」を見る。 - Qiita
序 半日ほど暇があったので、前々から気になっていたWebAssemblyを試してみることにした。 お試し機種は、日頃、ブラウジングマシンとして余生を送っている古めのMacbook air(RAM 4GB)。 ハマりどころにいくつかハマりつつ、ちょろっと動かしたところで時間切れとなったが、ツールのインストール・アンインストール合間にWebAssemblyの近況をいろいろと調べたところ、けっこうわくわくするところもあったので、導入記と思ったところを備忘録しておく。 ※WebAssemblyの基本については、以下が分かりやすく解説してくれている。 【2017年4月版】WebAssemblyとは？〜実際にC言語をブラウザで動かす〜 ただ、WebAssemblyについて、「現時点でコンパイルがめちゃめちゃめんどくさい」と書かれているが、そこまでめんどくさくはないと思う（私がはまったところは概ねインス
HTML5/CSS3のニュースやTIPSなどのまとめ (2017年7月27日)
1,922円、出版社：技術評論社、著：片山暁雄／松下享平／大槻健／大瀧隆太／鈴木貴典／竹之下航洋／松井基勝
Flash Playerが終了するまでに見ておきたい！ 今も試せる歴史的Flashサイトまとめ - ICS MEDIA
多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます
Webデザイナー中級者になるためのHTML5/CSS3テクニック10選
「作業効率に課題を感じている」 「作りたいページのデザインの実現方法がわからない」 日々webサイトを制作しているなかで、このような悩みを抱える方も多いのではないでしょうか。 この授業では、初心者から中級者へのステップアップを目標に「便利な機能」「比較的新しい機能」を中心に実演形式でご紹介し、実際のWebサイト制作時によく使われる＆役立つテクニックを学びます。 ■アジェンダ （）内の番号は、書籍内のサンプル番号です 1 レイアウトのマークアップのコツ（248、251など） 2 フロートに振り回されない（206） 3 フレックスボックスに挑戦。ナビゲーションを作成してみよう（237） 4 属性セレクタを使ったスタイリングで作業効率アップ（195、196） 5 border-radiusの仕組みを知って「カド丸」を手なずける（197） 6 蛍光ペンの太さのアンダーラインを引こう（198） 7
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
HTML5・CSS3のブラウザ対応チェックサイト3選 | Webデザイン・Webデザイナースクール
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
HTML5 のセクションアウトラインを生成してみよう！ - IT戦記
昨日 HTML5 のセクションアウトラインを取得する JavaScript - IT戦記 という記事で、以下の JavaScript ファイルを公開しました Outliner.js で 公開したのはいいのですが、 @amachang 使い方がわからんです…。見てるページで試せるように、Bookmarkletになっていると嬉しいです。 http://twitter.com/os0x/status/3972339847 …肝心の使い方を書くのを忘れていました＞＜ ＞＜ というわけで簡単に使い方を解説したいと思うます。 手順は 2 ステップ 1. まず outliner.js を読み込む <!DOCTYPE html> <html> <head> <title>hoge<title> <script type="text/javascript" src="http://amachang.saku
サンプルで学ぶHTML5の仕様変更要素・後編 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5には、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素があります。引き続き、意味や、使い方に変更があったり、注意点が加わった要素を解説します。 各要素の解説冒頭に登場する「カテゴリー」と「コンテンツモデル」については、第5回を参照して復習してください。 HTML5のグローバル属性 以降の解説で
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com
※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。 なかなか動かなくてハマリました・・・動画やっぱこわい。。 タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。 何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。 用意する動画は mp4 ： Chrome・Safari・IE9 ogv ： Firefox・Opera webm ： Chrome・Opera という具合。 更に、もちろんHTML5をサポートしていないブラウザも有り。 動画の変換ですが、僕はこのツールを使いました。 XMedia Recorde http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html (窓の社） 読み込んで形式を選択してエンコードボタンをクリ
既存のFlash資産を活かしてHTML5/Unityで使う·LWF MOONGIFT
LWFはFlashファイルからUnity/HTML5で実行できる専用ファイルを生成するソフトウェアです。 従来のモバイル向けゲームはFlash Liteで開発されてきました。しかし時代は変わり、スマートフォン主体になってきています。そのような中で既存の資産を活かすべくFlashをHTML5上で再生できるソフトウェアがLWFです。 一例。GREEのロゴが表示されます。 色が変わるデモ。 リンクをクリックするたびにロゴが追加されます。JavaScriptと連携できるということです。 動くアニメーション。 回転。 大きさが変わるデモ。 この手のライブラリは幾つかありますが、ついに大御所のGREEが乗り込んできました。単純にJavaScriptにする訳ではなく、独自のフォーマット*.lwfdataに変換します。これはHTML5の他、Unityにも対応しているとのことです。UIとアニメーション用複数
3 Dreams of Black by Google Data Arts Team - Experiments with Google
This experiment is no longer active, but you can still learn about it on this page. “3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experien
ジオプリ島とインクの妖精たち
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。
こんな発想はなかった！HTML5でつくられた楽器まとめ
はじめまして。ファイ部新卒のしんちゃんです。中国の上海から来ました。 日本に来て、やっと本場のとんこつラーメンを食べることができて、感動ですっ！ さて、Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 新しい楽器をテーマにしたコンテストが開催されています。 楽器経験者の方はたくさんいらっしゃると思いますが、 ブラウザ上で動く楽器を演奏すると聞いたら、一体どんな楽器をどんな方法で演奏するかには、 実に興味津々ですね。 発想力に富んだコードが次々と投稿されています！ さっそくそのなかの幾つかを紹介しようと思います！ HTML5で作られた楽器のコード集！ ping pong arpeggio ※「▶Play」ボタンをクリック！
[書評]Web制作のためのHTML5入門
[書評]Web制作のためのHTML5入門 すこし前にWeb制作のためのHTML5入門を献本いただきました。ありがとうございます。 本書は「HTML5入門」とタイトルがついていますが、HTML5やHTML5 APIに限らずCSS3やiPhone/Andoridのスマートフォン対応など幅広い内容が、50本以上のサンプルとともに解説されておりかなり実践的。 基本は広く浅くの解説なのですが、HTML5のコンテントモデルの解説は今までよんだ本の中で一番わかりやすかったり、HTML5のマイクロデータを取り扱っていたりと、すでにHTML5を学んだ方も楽しめるポイントが要所に詰め込まれています。 全体的によくまとまっており、モダンなマークアップをキャッチアップするには最適な一冊ではないかと思います。 以下が詳しい内容です。 1章 HTML5へようこそ HTML5が誕生した経緯とカバーする技術領域、そして新
![[書評]Web制作のためのHTML5入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e1530bd164bb28b3977d99e04af708fefde2ab/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4797369574.09._PT0_OU09_SCMZZZZZZZ_.jpg)
[HTML5 入門]HTML5の略された49タグの語源全てを調べた
タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ
![[HTML5 入門]HTML5の略された49タグの語源全てを調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
HTML5勧告へのロードマップ。HTML 5.0とHTML 5.1に分けて、まずは2014年内を目指すとの案をW3Cが発表
2014年内にHTML5をW3Cの勧告にすることを目指して、HTMLワーキンググループのチェアとProtocols and Formatsワーキンググループのチェア、およびW3Cチームは連名で「Plan 2014」という文書を公開しました。 「Plan 2014」では、現在勧告候補にあるHTML5を、HTML 5.0とHTML 5.1の二段階に分けて、HTML 5.0を2014年内に勧告とし、HTML 5.1は2016年内に勧告とすることが提案されています。 また限られた時間内でバグや懸案事項を解決するためにmodularity（モジュール機能）を活用し、仕様の複雑さや影響範囲をうまく管理していくことも提案されています。 インターオペラビリティの問題を、まず優先的に対処 現在、勧告候補の状態にあるHTML5には、勧告となるまでに解決しなければならない多くの仕様のバグや懸案事項があります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
