HTMLのタグ選びで迷うところ - Qiita
WHATWGのHTML Living Standardと、W3CのHTML5.2を見比べつつ、たまにMDNをながめながら書いていますが、少し感情的な部分も混じっています。 <article>と<section> A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent" 4.3.12.1 Article or section? | HTML Standard 実装する人の意図によるよ！ってそれを言っちゃおしまいですよ。気持ちはわかるけども。 <article> in principle, independently distri
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
[Adventar] 「品質としてのHTML」という意識とウェブアクセシビリティ | totoco.org
このエントリーはWeb Accessibility Advent Calendar 2017 7日目の投稿です。 初日からちょうど一週間ということで、箸休め（的な）ポエムに少々お付き合いください。私から見えている世界の話を書いてみます。アドベントカレンダーの本題とは少々かけ離れた内容かもしれませんが、同じ線上のトピックということでご容赦ください。 限られた時間のそのなかでは… 今年は小さい集まりなどでウェブアクセシビリティ（以下、A11y）のことを話題にすることがありました。 まだまだデザインカンプを制作したうえでコーディングに着手することの多い、私から見えている世界。クライアントもIT・ウェブ慣れしていない方が多いため、その手法は現時点ではまだ致し方ないなと思っています。 “見た目駆動”+限られた時間でコーディング作業を進めていくなかで、A11yに取り組むには、マークアップに意欲的に取り
![[Adventar] 「品質としてのHTML」という意識とウェブアクセシビリティ | totoco.org](https://cdn-ak-scissors.b.st-hatena.com/image/square/98a7a30950ee1f88d7728ca6e62660b6bdbc464c/height=288;version=1;width=512/https%3A%2F%2Ftotoco.org%2Fimg%2Fpic_20171208.jpg)
ユーメニューの紹介と技術上の工夫とこれから
Web Accessibility Advent Calendar 2017の12月8日を担当させていただきます、有限会社時代工房の柴田と小寺です。 「きけるおしながき umenu（以降「ユーメニュー」）」の紹介と、技術的なメモを書きます。 なお文中、「Docomoのらくらくホン」が度々登場しますが、これはらくらくホンが、スクリーンリーダを搭載したガラケーとして、視覚障害者の利用率が大変高い（高かった）ためです。 まず基本的な紹介から（柴田） ユーメニューは、視覚障害者向けのサービスです。視覚障害者が飲食店を利用する際、飲食店のメニューを知るためには、以下のいずれかの方法が確保されている必要があります。 飲食店が点字のメニューを用意している 飲食店のサイトでメニューを表示していてアクセシブルである お店のひと、あるいは同伴者に教えてもらう しかし、点字のメニューを備えている店舗は少なく、飲
WHATWG の IPR Policy と Governance Structure | blog.jxck.io
Intro WHATWG が IPR Policy と Governance Structure についての更新を発表した。 おおまかな流れと、これによって引き起されそうな変化について解説する。 Working Mode Changes 昨夜(JST)、 WHATWG は以下のブログをポストした。 The WHATWG Blog - Further working mode changes ブラウザベンダ各社もこれに賛同を表明している。 mozilla: https://twitter.com/mozhacks/status/940258410477604864 chrome: https://twitter.com/ChromiumDev/status/940253003587694593 safari: https://twitter.com/webkit/status/9402549
WindowProxy「俺の名前はいっぱいあってな…」 - Qiita
これはChromium Browser アドベントカレンダーの十三日目の記事です。本記事ではHTML規格で定義されるWindowProxyを紹介します。ウェブ開発者にとって、ナビゲーションへの理解を深める一助になればと思います。 WindowProxyとはどのようなものか？ HTML規格で定義されているWindowProxyは、端的に言えば「Windowオブジェクトを指し示すもの」であり、その名前の通りWindowオブジェクトへのプロクシです。これはWindowに対してのみ定義されている特別なプロクシであり、他のDOMオブジェクトはこのようなプロクシを持ちません。これはWindowがナビゲーション(ページ遷移)をサポートする唯一のグローバルオブジェクトであるため1です。なぜナビゲーションやグローバルオブジェクトが重要になるのかは、後ほど説明します。 特別な場合を除けばこのプロクシは何もしま
[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita
Elm でどのように見た目をあつかうかについて僕がいま考えていることをまとめました。 結論として「BootStrap みたいな方針でCSSを書いて使えばいいよ」という単純な話を、 だらだら歴史的経緯とかどうでもいい話をしながら書きました。 従来の主張 まず、「見た目をあらわすクラス名を使うべきではない」と言われてきた背景をおさらいしたいと思います。 ここで言う「見た目をあらわすクラス名」とは、BootStrapのような方式のCSSフレームワークで採用している HTMLのクラス名に col-sm-8 や pull-right のような見た目に関わる名前のクラスを入れる方針のことを意図しています。 従来は HTML/JS/CSS の役割を次のように分け HTMLがページの構造のみを記述し JSが挙動のみをあつかい CSSが見た目をどう見せるかを全て制御する こうすることで、見た目の変更をしたい
![[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/943513d01398b1efea11fbdefdfff072a4258b0f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRWxtJTVEJTIwJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTkxJUUzJTgxJUE5JUUzJTgwJTgxJUUzJTgyJTgyJUUzJTgxJTg2JUU4JUE2JThCJUUzJTgxJTlGJUU3JTlCJUFFJUUzJTgyJTkyJUUzJTgxJTgyJUUzJTgyJTg5JUUzJTgyJThGJUUzJTgxJTk5JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJTkxJUUzJTgxJUE2JUUzJTgyJTgyJUU1JTg1JUE4JUU3JTg0JUI2JUUzJTgxJTg0JUUzJTgxJTg0JUUzJTgyJTg4JUUzJTgxJUFEJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0zMzE1YTMyMjFlMDgxZDEyNmE1MDE5N2FhNWM3ZGMxMQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXJvd00mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRlZTNiODk0Yjk0ZDVmMDk5ZjgzMGQ5ZDUwNDM5ZWNm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Deb5a06cf35d7c39a51e925e87e5cd6c8)
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
HTMLテンプレート？Lucidを使ってみた！ - Qiita
みなさんHTMLテンプレートエンジンは使っていますか？ FreeMarker, Haml, Slim, Jade, Jinja2, Hamlet などなど世の中には言語やWAFに合わせていろんなテンプレートエンジンが存在しますよね… 自分はJadeが好きでnode.jsでアプリを作った時は必ず使っています。 どのテンプレートエンジンも同じですがいくら文法を元の言語に似せていると言ってもベースはHTMLなのでどうしても独自の記法を使わざるを得ません。 あれ、こういう時Jadeでどう書くんだっけ？と疑問に思ったらどんなにJavaScriptに詳しくてもJadeのドキュメントを引っ張ってこないといけません。 HaskellのHTMLテンプレートエンジンはHamletがたぶん有名だと思うんですが、これにも同じ問題があります。もう新しくテンプレートエンジンの独自記法は覚えたくないんです！！ そんなこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - knupfer/type-of-html-static: TH Optimizations for type-of-html
GitHub - emilwallner/Screenshot-to-code: A neural network that transforms a design mock-up into a static website.
GitHub - mrkkrp/html-entity-map: Map from HTML5 entity names to the corresponding Unicode text
GitHub - thedaviddias/Front-End-Checklist: 🗂 The perfect Front-End Checklist for modern websites and meticulous developers
GitHub - TransportEngineering/nice-html: Nice and fast monadic HTML templating with distinct compilation/rendering phases
GitHub - knupfer/type-of-html: High performance type safe html generation