サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
フロントエンド連載の5記事目です。HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3CHTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
このページでは、すべてのHTML 要素を一覧表示しています。これらはタグを使用して作成されます。 この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。
> でネストを作成 > を使ってULの中にLIを作成するといったネストが簡単に作成できます。 ul>li 展開後は下記のとおりです。 <ul> <li></li> </ul> + で同階層に要素を作成 同階層に複数の要素を追加したい場合、下記のように記載します。 div>h1+p 展開後は下記のとおりです。 <div> <h1></h1> <p></p> </div> 子要素を含めて作成 UL、SELECTなど子要素がある要素は + で子要素付きで作成することができます。 ul+ dl+ select+ table+ 展開後は下記のとおりです。 <ul> <li></li> </ul> <dl> <dt></dt> <dd></dd> </dl> <select name="" id=""> <option value=""></option> </select> <table> <tr>
![Emmetの使い方 - Atom講座 - [SMART]](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fefeb6493234f33406d242c048873a805fca99c63%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Frfs.jp%252Fwp-content%252Fthemes%252Fsmart%252Fogpimage.png&f=jpg&w=240)
Emmet — the essential toolkit for web-developersEmmet is a web-developer’s toolkit that can greatly improve yourHTML &CSSworkflow: <!doctypehtml> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: TypeCSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expandit intoHTML ::: “Expand Abbreviati
CSSコード .example table { border: 1px #000000solid; } .example td { border: 1px #000000solid; }HTMLコード <div class="example"> <table> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> </div> まずHTMLの設定で、表の列と行、キャプション（表のタイトル）、見出しのセルなどを設定してください。設定内容の詳細は、HTML テーブルタグカテゴリーでご覧になれます。 続いてCSSの設定で、枠線や背景色、余白など、見栄えに関する設定を行なってください。設定内容の詳細は、CSS テーブルカテゴリーで
width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width （端末画面の幅に合わせる）を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。（
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
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を設立したエンジニアの１人であり、現在のポピュラーなブラウザの先駆けとなったテキスト
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。javascript で要素の表示/非表示を切り替える際は、display プロパティを none からblock（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
ここの所、忙しくてブログを書いている時間も無かったのですが、毎月更新してる太陽光発電の記録だけは行おうとしてブログを書こうと思いましたら・・・ あれ？ブログの記事作成が動かない？ どうも記事作成画面に入ろうとすると動かなくなるようです。 そういえば、IE10 に入れ替えたら色々と IE がダメだったんで、IE9 で止めておいたのですが、先日のWindows Update で IE11 に更新されてしまって、そのままだったなーと思い出して、なんかHTML に不具合があるのかと思い、デバッグ用コードを入れた状態で動かしたんですが、関数まで届いていません。 あれあれ？と、コードの一番先頭にデバッグ出力を突っ込んでみたのですが、それすら動いていません。 サーバのプロセスを見ても、CGI が起動している気配が無いので、どうやら IE11 自身がコールした時点でフリーズしているようです。 なんだそ
注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT
IE8では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法HTMLドキュメント内にX-UA-Compatibleを追加する ApacheでHTTPレスポンスヘッダにX-UA-Compatibleを追加する IISでHTTPレスポンスヘッダにX-UA-Compatibleを追加する 1. 動作仕様 IE=EmulateIE8 : DOCTYPE宣言に応じて、IE8モードかQuirksモード(IE5)を選択する。 IE=EmulateIE7 : DOCTYPE宣言に応じて、IE7モードかQuirksモード(IE5)を選択する。 IE=8 : 必ずIE8モードを選択する。 IE=7 : 必ずIE7モードを選択する。 IE=5
注 : このドキュメントは暫定版であり、変更される場合があります。 ドキュメントの互換性は、Web 開発者にとっての重要な考慮事項です。Windows Internet Explorer 8 には、ドキュメント互換モードが用意されており、Web 開発者はブラウザが古いバージョンと同じ方法でページをレンダリングするように指定できます。これにより、開発者は更新の時期を調整することができます。 このドキュメントでは、Windows Internet Explorer 8 でサポートされるドキュメント互換モードについて説明し、カスタム ヘッダーを使用してそれらのモードをページごとまたはサイトごとに実装する方法を解説します。適切な互換モードを実装することにより、サイトではWindows Internet Explorer 8 およびそれ以降のバージョンとの互換性を確保できます。 各種の互換モード
昨日の日記「IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる」にて、福森大喜さんから教えていただいた内容として、ファイルアップロードのHTMLフォーム（enctype="multipart/form-data"）にて、アップロードするファイル名とファイルの中身を外部から指定できることを報告しました。この際にIE8以前という条件がありましたが、今度は、三井物産セキュアディレクションの望月岳さんから、「それIE9以降でもできるよ」と教えていただきました。既にご存じだったそうです。福森さん、望月さんという日本を代表するバグハンターから「秘伝のたれ」をおすそわけいただいたようで、興奮気味ですw まず、おさらいとして、IE8以前でのパターンは下記の通りでした（要点のみ）。 <form enctype="multipart/form-data" action="pro_ad
2chまとめみたいなタイトルにしてみた。(してみたかった)HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
