HTML Living StandardとHTMLの歴史 - とほほのWWW入門
HTML 1.0～2.0 は IETF が、HTML 3.2～5.2 は W3C が標準化を進めていましたが、W3C とは別に、Apple, Mozilla, Opera の開発者らが設立した WHATWG という団体が独自に策定を進めている HTML 仕様です。HTML Living Standard と呼ばれ、バージョン番号や第何版という概念がなく、日々、改版が進められています。 HTML Living Standard: https://html.spec.whatwg.org/ 現在では、W3C による HTML5 の仕様策定は中止され、HTML Living Standard が HTML の標準仕様となっています。以下では、HTML 1.0 から HTML Living Standard に至るまでの HTML の歴史について紹介していきます。 手っ取り早く要素の追加・削除の歴
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
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
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ
HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？ この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。 なぜカスタムデータ属性か？ 多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。 たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう
海外の人気サービスで使われているCSSスタイルガイド８選
CSSのスタイルガイドとは、コーディングを行う際の決まりやルールのようなものです。 CSSのスタイルガイドを作成することで、一貫性のあるスタイルシートを実現しやすくなり保守性や拡張性を向上させることができます。ひとりで開発するときにも役立ちますが、特にチームで開発を進めるときに効果を発揮します。 今回は参考になる海外の有名サービスのCSSスタイルガイドをまとめてみました。CSSスタイルガイドを作成するときや、コーディングをするときにぜひ活用してみてください。 Airbnb AirbnbのCSS/Sassのスタイルガイドです。各用語のルールから始まりCSSやSassの合理的な記述方法について記載されています。こちらは日本語訳されたスタイルガイドもあります。 Airbnb Style Guide Google GoogleのHTML/CSSのスタイルガイドです。シンプルなデザインのスタイルガイ
Google HTML/CSS Style Guide
Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe
Google HTML / CSS Style Guideを翻訳してみた。
Google HTML/CSS Style Guide (【改正】2016.2.24 ) これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなくても成り立っているからまぁいっか・・・そのうち覚えよう…。」とか言い訳をして、宙ぶらりんになっているものをひとつずつ掴んでスッキリしていこう！ということで、今回は、「Googleの定義するHTMLとCSSのガイドライン」を確認してみようと思います。 「知っていること」と「できること」は別の話。 近頃そんなことを痛感していますが、やはりWEBデザインに携わる者としてGoogleの公表するガイドラインは無視できません。ざ〜っと目を通して「理解した気」になっていてはいけない。覚えたことを、隣の人にもわかりやすく説明できてこそ知識と呼べるんじゃないか…と、自分を鼓舞しながら知識を共有できるように努め
Firefox 37 が <input accept> のファイル拡張子指定に対応 | フロントエンドBlog | ミツエーリンクス
2015年1月29日 Firefox 37 が <input accept> のファイル拡張子指定に対応 フロントエンド・エンジニア 富永 accept属性とは ファイルアップロード時に用いられる input 要素の File Upload state (type=file) では、accept属性を設定することができます。 たとえば画像を投稿するフォームでは <input type="file" name="" accept="image/*"/> と指定することで、画像以外のファイルを非表示にするなど、目的のファイルを選択しやすいようにすることができます（どのような挙動になるかはブラウザによって異なります）。 著名なサービスだと Twitter で使われていたりしますね。 仕様と対応ブラウザ この属性は HTML 4.01 から定義されていますが、ブラウザの対応は遅く、2012年に S
[50] button要素で送信・リセット・汎用ボタンを自由に作ろう
本日のINDEX <button>要素で「テキスト」のボタンを作ろう 属性を何も使わない基本形 「送信ボタン」を複数置くなら name属性と value属性が必要 テキストの一部を<span>要素で囲みCSSを指定 <button>で「画像」を使ったボタンを作ろう <img>要素だけを置いてみる <img>要素とテキストを置いてみる デフォルトスタイルの枠をCSSで消す <button>の見た目をCSSで指定しよう マウスオーバー時の変化を追加 画像を img要素でなく CSSで背景に仕込む javaScriptでキャンセルも（confirm()メソッド） <button>要素の属性一覧 <button>要素で「テキスト」のボタンを作ろう まずは<button>〜</button>の中に、テキストを入れてみましょう。 属性を何も使わない基本形 ボタンの内容がテキストなので、見た目は<inp
![[50] button要素で送信・リセット・汎用ボタンを自由に作ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/0369ecd9c29f6086e78d26a2468f5f731f42a00a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-110-origin.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Fogp_image.jpg)
Webページの背景を動画にするときのお作法 - フロントのエンド
videoタグで動画を呼んで背景的に使う場合は、モバイルとPCで処理をわけておかないとダメっぽい。 というのも videoタグにて動画を呼んでくると <!-- html --> <video src="videofile.ogg" poster="posterimage.jpg" autoplay="autoplay" width="300" height="150"> <source src="path/to/hoge.mp4" type="video/mp4" /> <source src="path/to/hoge.webm" type="video/webm" /> </video> コード自体はこういう感じになるわけですが、 これをこのままモバイルで見ると たいていは自動再生に対応してないので、再生ボタンがガッツリとでちゃいます。 考え方なので、 <!-- html --> <d
videoタグで画面いっぱいレスポンシブな動画を設置する方法 - Qiita
videoタグで設置した画面いっぱいの動画ですが、画面サイズを変更すると、横縦比が変動して動画が画面中央に設置されなかったので、以下の方法で対応してみました。 そのまえに…基礎的なvideoの属性メモ 属性 値 効果
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないというトラブルがありました。 普通は自分の入力ミスを疑うところですが、登録もログインもコピペで入力しているので入力ミスはありえ無いと思っていました。 お問い合わせフォームからバグ報告 というわけでこれはバグだろうと、お問い合せフォームから以下のような内容の報告
SVGのアニメーション手段とその選び方 - Qiita
SVGアニメーションの手段 HTMLに組み込んだSVGをアニメーションさせる方法は以下の3つ。 CSS JavaScript HTML - SVG element 結論から言うとCSSかJavaScriptのどっちかを使うべき。 CSSでアニメーションできる範囲ならCSS、それ以上したいならJS。ブラウザ対応は考慮してない。 CSS CSSからSVGの各プロパティの値を変更する。さわれる属性は限られているがシンプルに実装しやすい。 制御範囲はSVGのプレゼンテーション属性と呼ばれる属性に限られる。(プレゼンテーション属性一覧: https://www.w3.org/TR/SVG/propidx.html) 正直一覧を見てもピンとこないので以下に例を示す。 できることの例 SVGの線や塗りのRGBAを変更する 線の幅やスタイル(破線とか点線とか)を変える シェイプが筆跡に沿って徐々に現れる的
なぜ 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTML5】カスタムデータ属性（data-*）の値に複数設定、それを取得する方法 - Qiita
メニューボタンを span だけで実装するのは良くないのでやめた話