HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に
この記事は新野淳一氏のブログ「Publickey」に掲載された「HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に」（2019年5月29日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には一部で異なる仕様があったために混乱を招いているところがありました。 今回の合意によりW3CはHTMLとDOMに関する標準策定をやめ、今後はWHATWGが策定するリビングスタンダードがHTMLとDOMの唯一の標準となります。 両者が合意した主な内容は下記となります。HTMLとDOMのリビン
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
画像置換について
画像置換には疑似要素を使う派ですこんにちは。font: 0/0 aを使う画像置換はあんまり使いたくないというか、em単位をその要素で使えなくなるのはかなり致命的な気がする。こういうテクニックは他のプロパティーに影響を与えないということが最も重要だと思う。 疑似要素を使う方法には、contentプロパティーで直接画像を指定する方法と、background-imageプロパティーで画像を指定する方法がある。SVGだとリサイズがうまくいかなかったり位置がずれることがあるので後者の方が良い感じ。スプライトを使う場合にもその仕組上後者を使う。それじゃcontentプロパティーを使う方法いつ使うの……みたいな感じだけど、こっちを使うとCSSが有効だけど画像が無効というシナリオに対応できるので、スプライトではないPNGやJPEGならこっちを使うと良い。 SCSS Partialsに三種類だけ画像置換のミ
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
『Web Componentsで行うHTMLのコンポーネント化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
Jeff Croft「web標準が成功しhtml名人は用済みになった」 - 以下斜め読んだ内容
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
HTML.jsについて | ykzts.blog
HTML.jsというJavaScriptで楽にDOM操作を行えるようにするライブラリーがあります。結論から申しますと、このライブラリーは絶対に使うべきではないライブラリーとなっています。 この記事は執筆時点の最新バージョンであるHTML.js 0.9.3を元にして書いており、今後なんらかの変更がHTML.jsに加えられることによって、次に書く内容は陳腐化してしまう可能性はないわけではありません。ですが、ひとまづこの記事を執筆している時点では使うにあたって不都合ばかりが多く発生してしまう非常に邪悪なライブラリーです。 HTML.jsはMutationObserverを使えるウェブブラウザーではMutationObserverを用いて、MutationObserverが使えない環境ではDOMSubtreeModifiedイベントを用いてHTML文書の変更を検知しています。そしてHTML文書に変
CSSの変態向き - ID, classを顔文字でコーディングする方法 - kojika17
HTMLのIDとclassに顔文字記述しても、CSSではスタイルが適用されません。 ただCSSをごにょごにょするだけで、ID, classを顔文字、日本語でもコーディングすることができます。 誰が得をするのか全くわからないけど、紹介します。 HTMLのID, classを顔文字にする HTMLのID, classを顔文字、または日本語で書きます。 下準備はこれでおｋ。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ID="（( ◉౪≡౪◉ )）≡౪◉ )）"> <div class="(」・ω・)」うー！"> <h1 ID="(／・ω・)／にゃー！">にゃー！</h1> </div> </body> </html> CSSでごにょご
HTMLコーダーのキャリアに存在する5つの問題点 | ベイジの社長ブログ
HTMLコーダーとは、企画や設計、デザインが、ユーザーインターフェースとして完成する直前を担う業務であり、成果物の品質の最終防衛ラインを守る仕事でもあります。HTMLコーダーの能力が、SEOの精度やユーザビリティ、更新性を左右し、Webサイトのパフォーマンスに影響を与えることも少なくありません。 このように、HTMLコーダーはWeb制作における重要な部分を担っているにも関わらず、Web業界の他の職種以上にキャリア面でのリスクが大きいように感じています。その中でも、特に私が強く感じる問題点を、5つにまとめてみました。 ※なおこの記事は、最後は弊社の求人ページへのリンクに繋がっています。 問題点１：分業化が進んでいて、次のステップに行きにくい 最近のWeb制作は分業化が進んでいます。HTMLコーダーも当然、HTMLコーディングに特化して日々の業務を過ごすことが多いと思います。しかし業務の性質上
HTML_CodeSniffer
Check that your HTML code conforms to your coding standard HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs". To get you started, HT
Emmet Documentation
Emmet — the essential toolkit for web-developers Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “Expand Abbreviati
CSS3の「rem」でフォントサイズ指定 ｜ Tips Note by TAM
フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、 CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。 「rem」とは、「root」+「em」という意味で、 root要素（html要素）に対して相対的にフォントサイズが指定できます。 「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、 入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。 常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。 下記のように、htmlに「font-size: 62.5%；」を指定しておくと、「10px = 1rem」となるので、 px単位で計算ができます。 html { font-size: 62
margin-top派かmargin-bottom派で言えば、margin-top派です - あと味
世の中にはmargin-top派とmargin-bottom派がいるとかいないとか。 自分はmargin-top派です。 margin-left派とmargin-right派がいるならば、margin-left派です。 試しにmargin-bottom派になってみようかなと頑張ってみたんですけど、やはり慣れもあり、margin-topの方がしっくりきたのでエントリーを起こすことにしました。 margin-top派な理由 margin-top派になったのには理由はなくて、なんとなくmargin-top派になった気がするのですが、margin-bottom派に移るのが少し面倒な理由はあります。 その理由は:first-child擬似クラスの存在です。 例1 例えば、以下の様なHTMLがあったとします。各section.contentの間には30pxの余白が欲しかったとします。 <section
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
WEB STAFF
WebデザイナーやWebディレクターの未経験OKの求人特集から、短期派遣や急募など季節的な求人特集まで様々な切り口でピックアップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ご存じですか、dialog要素
Editr - HTML, CSS, JavaScript playground
re-dzine.net situs togel online toto 2023 -
re-dzine.net situs togel online toto 2023 -