[B! HTML] foooomioのブックマーク

HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ

HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2

foooomio 2018/01/16

HTML

リンク

Webページに丸を描く5つの方法 - aike’s blog

ひまなのでWebで丸を描く方法についていろいろ考えてみました。TMTOWTDI。 http://aikelab.net/circle ▪文字 <div id="mychar">●</div> #mychar { color: #00f; font-size: 120px; } ▪CSS <div id="mydiv"></div> #mydiv { width: 100px; height: 100px; margin-left: auto; margin-right: auto; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #00f; } ▪Canvas <canvas id="mycanvas" width="110" height="110"

foooomio 2015/08/01

リンク

HTML 4.1が勧告されました (エイプリルフールの嘘情報です)(追記あり) (Kanasansoft Web Lab.)

HTMLの新しいバージョンであるHTML 4.1が勧告されました。 HTML 4.1で追加されたのはエイプリルフール用の仕様のみとなります。たったこれだけの仕様追加でバージョンが上がってしまうのは奇妙に思われるかもしれませんが、理由を含めて解説してみたいと思います。導入までの経緯毎年、4月1日のエイプリルフールには各サイトが創意工夫を凝らしたエイプリルフールの特設ページを作成することが慣例となっています。多くの特設ページはエイプリルフールが終わると削除されるのですが、一部のコンテンツはインターネット上に残り続けています。この傾向は、特に個人のブログに公開されたエイプリルフールのエントリーに顕著です。 4月1日中はインターネット利用者は警戒しつつネットを利用していますが、普段のネット利用時には多くの利用者は警戒を解いてしまいます。このような時に偶然エイプリルフールのコンテンツに訪れ

foooomio 2015/04/01

HTML
ネタ

リンク

フロントエンドの実装から見る第四十七回衆議院選挙　開票速報ページまとめ - 暮らしの技術

700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです．報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます．まとめ長いので先にまとめです．まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は　トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い．フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

foooomio 2014/12/15

リンク

なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

foooomio 2014/12/01

リンク

HTMLとCSSで3D空間を作成、カメラを動かして空間内を動き回ることも可能にした「CSS FPS」

ウェブ開発者のKeith Clarkさんが、ウェブページ製作には欠かせないHTMLとCSSという2つの言語を使い、FPSなどで登場しそうな3D空間を再現しています。 Creating 3D worlds with HTML and CSS http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ HTMLとCSSで作られた3D空間は以下のページで実際に表示させることが可能。PCはもちろんのこと、スマートフォンやタブレットからも見ることができます。 A 3D engine built using HTML and CSS 3D transf orms by Keith Clark http://keithclark.co.uk/labs/css-fps/ 上記ページの「Mouse ＆ Keyboard」をクリッ

foooomio 2014/11/06

HTML
css

リンク

HTML5 API の experimental な demo 集 - latest log

存在は知ってても未体験の HTML5 な API が結構あると思います。バイブレーションAPIとか、頑張ってゲームとかに組み込むと良いのではないでしょうか。 HTML5 API demos

foooomio 2014/10/21

リンク

「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？

By Steven Martin 「blinkタグ」とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、「なぜblinkタグを開発したのか？」というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの１人であり、現在のポピュラーなブラウザの先駆けとなったテキスト

foooomio 2014/05/27

HTML

リンク

なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes

注意内容については一切保証しません。ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。ここに書かれていることが正しいかどうかは、自身で判断して下さい。事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT

foooomio 2014/03/29

HTML

リンク

いい加減、<script src="http://..　と書くのはやめましょう - DQNEO起業日記

外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省

foooomio 2013/05/20

HTML

リンク

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。基本的な流れフォームのsubmitを拾う通常の送信はキャンセル送信ボタンを無効化送信先URLやフォームの入力値を取得送信受信後、送信ボタンを戻す入力値をどう得るか、というのがポイントかと思います。送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。デモなんかお問い合わせフォーム的なものを用意しました。まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。