どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
HTML5.1、5.2での仕様変更点をメモ。
先日Twitterにこんな投稿をしたら地味に伸びたので、私も含めて案外みんな2014年に勧告された後のHTML5の仕様変更は追ってないのかなと思い、自分のための備忘録も兼ねて主な変更点をメモしておきます。 なお自分はマークアッパーなので、仕様変更点全てを網羅するのではなく、あくまでHTMLマークアップに関連する部分のみピックアップすることとします。全ての変更点を確認したい人はW3Cの仕様書をあたってください。 2016年HTML5.1勧告時の仕様変更 HTML5.1勧告時の注意すべき仕様変更点は以下の通り。 【追加】 ・picture要素とsrcset属性の追加 ・details要素とsummary要素の追加 【削除】 ・ネストされたセクション要素の見出しに全てh1を置くこと ・tfoot要素をtbody要素の前に置くこと 【変更】 ・セクション要素の中のheader/footer要素は入
Quantum Game - 量子力学を学べるHTML5ゲーム
勉強だって楽しくできる方が良いに決まっています。苦しんでやるような勉強では覚えが悪いのは当然です。なので勉強とゲームは実は相性が良いのではないかと思っています。ゲームで楽しく学べるならば、それが一番のはずです。 今回は量子力学を学べるゲーム、Quantum Gameを紹介します。 Quantum Gameの使い方 光源から出る光（波）が計測器まで届けばOKです。 様々な障害物をどう乗り越えて光を届けるかが問題です。 これは一番最初のステージ。 徐々に複雑になっていきます。 Quantum Gameはルールはとても簡単です。あらかじめ置かれているオブジェクトは動かせず、画面右上にあるアイテムだけどこかに配置し、光源をクリックします。無事光源が届けばクリアです。量子力学がこれだけで十分なわけではないですが、掴みとしては面白いでしょう。 Quantum GameはJavaScript製のオープン
Space Invaders - プログラミング学習に使えるHTML5ゲーム
プログラミングを学習する上で良い題材があるとスムーズです。特に自分が作りたいものに合っていると、そのカスタマイズができたり、より学習意欲が高まるはずです。 今回はWebブラウザ上でゲームを作る際の学習教材になるSpace Invadersを紹介します。 Space Invadersの使い方 スペースキーを押すと開始します。 上にある緑が敵、グレーが自機です。 ミサイルはスペースキーを押し続けると何発でも発射できます。そして相手のミサイルを避けつつ、すべての敵機を倒したら次のステージに進みます。キャラクターのデザインはシンプルですし、左右の移動とスペースキーだけの入力で全体の理解もしやすいでしょう。ぜひHTML5ゲームの作り方をSpace Invadersから学んでみてください。 Space InvadersはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますが
Bemuse - ハマらないよう注意。Webベースの音ゲー MOONGIFT
音ゲーは根強い人気のあるゲームジャンルです。やり方も手を使ったりバチを使う、足で行うなど様々な種類があります。手で行うものであればパソコンで再現されたソフトウェアも数多く存在します。好きな方はハマってしまうことでしょう。 そんな音ゲーをWebブラウザベースで楽しめるのがBemuseです。HTML5で作られているので幅広いブラウザで遊べます。 Bemuseの使い方 ゲーム開始前です。 最初はチュートリアルも含みつつ進みます。 え、何これ難しい…。 圧倒的に無理でした…。 Bemuseはキーボード（SDFJKLとスペースキー）を使って操作します。チュートリアルレベルであってもかなり難しいと感じられるはずです。キータイピングの練習にはならないと思われますが、それでも速い指裁きが求められるのは確かでしょう。 技術的にはReact/Reduxを使っています。そういった点でも興味深いソフトウェアです。
Flashが教えてくれたこと、HTML5で失ったもの。（仮
イントロ 上のはただの画像です。もしクリックした人がいたらすいません。 私、この業界に入った時は20歳くらいでした。 その時はソシャゲの始まりで、まだガラケーだったのでFlashLiteでゲームを量産してました。（知る人ぞ知るコ◯チとか） ３年前くらいにアプリとかHTML5に移行してきっちりしたものとかFlashっぽいものを作ってます。 さて、今回のネタですが、 FlashLiteネタとかAdobeAirネタとかありそうなんですが、思い出すの面倒なんで、 Flasherってなんだったんだろうっていう感想文を残したいと思います。 Flasherが担ってた仕事 わかりやすいように、極端めに書いてますのでご容赦ください。 Flasherが現れる前のデザイナーさんとプログラマーさん デザイナーさん ヴィジュアル担当。 カッコいいWebサイト探しが大好き。 稀にプログラムが出来る人がいるものの、小難
HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
HTML5 Deck of Cards - HTML5製のトランプ
トランプを使ったカードゲームは万国共通で誰でもすぐに遊べるのが良いところでしょう。Windowsにあったソリティアのようにみんなが熱中するゲームはそういったシンプルなものではないでしょうか。 今回はそんなトランプゲームを作るのに使えそうなHTML5 Deck of Cardsを紹介します。HTML5で作られたトランプです。 HTML5 Deck of Cardsの使い方 積み上げた所です。 マークごとに並べたところ。 カードはドラッグ&ドロップできます。 サークルに並び替え。 ポーカー風。 アニメーションしながらカードが並べられていきます。 サークルもアニメーション。 マークごとの並びも。 HTML5 Deck of CardsをベースにすればWebブラウザ上で動作するカードゲームがすぐに作れるようになりそうです。単に並べるだけではなく、HTML5 Deck of Cardsのようにアニメ
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
Ocean Wave Simulation – 波をWeb上で再現
自然の事象をコンピュータ上で再現するというのはとても難しいことです。しかしゲームをはじめとして、よりリアルさを求めていく中では自然現象の再現は欠かせません。髪の毛の動きですらそうです。 Ocean Wave Simulationは波の動きを再現します。パラメータで変化する波を見ているだけで面白いソフトウェアです。 Ocean Wave Simulationの使い方 自然の波を再現するというのはとても大変で、パラメータも多くなってしまうでしょう。しかしリアルさを追求しすぎるとマシンパワーを使いすぎてしまいます。そのバランスが非常に難しいと言えます。 Ocean Wave SimulationはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Ocean Wave Simulation dli/waves
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「HTML5のCanvas」 ～マンガでプログラミング用語解説
h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
HTML5ベースのノベルゲームを実装出来る国産ゲームエンジン・「O₂ Engine」
Engadget | Technology News & Reviews
ggsoku.com
「Google Chrome」で閲覧中のWebページのアウトラインを表示する「HTML5 Outliner」NOT SUPPORTED
