もうHTMLをXHTMLで書くことは推奨されないという話 | フロントエンドBlog | ミツエーリンクス
春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML（HTML Standardでは正確にはXML構文）でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい
「HTML解体新書」リフロー版電子書籍を作りました - 弁護士ドットコム株式会社 Creators’ blog
4月に発売された書籍「HTML解体新書」。その電子版は今までPDF版しかありませんでしたが、このたびリフロー版が発売となり、Amazonでも購入できるようになりました。 この記事では、HTML解体新書のリフロー版電子書籍を実際に作成した際の流れについて、なぜ作成したのか、どうやって作成したのか、どのようなトラブルがあったか、といった点をご紹介します。リフロー版の電子書籍の作成、出版を検討されている方の参考になれば幸いです。 リフロー版の電子書籍を作った理由 リフロー型と固定レイアウト型 リフロー型とアクセシビリティ リフロー版の電子書籍を作るには 電書協 EPUB 3 制作ガイド 実際の制作の流れ テキスト原稿を用意する XHTMLを作る その他EPUBに必要なファイルを準備する OCFコンテナのメタデータを用意する mimetype container.xml OPFパッケージのデータを
Web フロントエンドの実装において本来の機能を損なってはいけない
Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
I don't want to do front-end anymore
I started coding when I was 14, around 2007 or so. The very first thing I wrote was HTML, then CSS. I liked making stupid little web pages containing youtube embeds and guest books (anyone remembers those?) full of marquees, blinks and gifs. Lots of gifs. The pages were very simple, but joyful to make and also to use. At the time I had no idea that you could make any money with making web pages, I
2021年だから人類はHTMLを手打ちしろ
youkoseki.com 2021年だから人類はHTMLを手打ちしろ 新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？ 僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。 私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPCゲーム。Windows 3
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
edit#slide=id.g25ae9c179b_0_144
This is the evergreen copy of "Life of a Pixel". Video of the presentation at Chromium University (Nov 2020): http://bit.ly/loap-2020-video LIFE OF A Steve Kobes skobes@chromium.org Nov 2020 slides: bit.ly/lifeofapixel with special thanks to past presenters dknox@, chrishtr@, pdr@ "The unexamined...
やはり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 の a 要素に target=”_blank” をつけるのはもうやめよう
HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
HTML 4 のころから想定内だった現在のモバイル Web / おのひろきおんらいん
HTML 4 の規格で重要な要素の一つはアクセシビリティの確保でしょう．それまでは Netscape と Internet Explorer によるいわゆるブラウザ戦争状態で，ブラウザの独自実装にあわせて web コンテンツを作成するっていう状態．そこから脱する為に，特定のブラウザの実装に依存した書き方で無くHTML 4 にそってコンテンツを用意すれば，あらゆるブラウザで一定の範囲で情報にアクセスできるように整備されました．あらゆるブラウザで一定の範囲で情報にアクセスできる事，つまりアクセシビリティの確保は HTML 4 の重要なテーマだったはずです． ハンディがあっても利用できるページづくり：Webアクセシビリティについて http://www.kanzaki.com/docs/html/accessible.html そのアクセシビリティは，例えば視覚障碍者の為の音声読み上げのブラウザ
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
WHATWG、HTML標準規格を「随時アップデートする」方針へ変更 | OSDN Magazine
HTML5の仕様を開発中の作業グループWHATWG（Web Hypertext Application Technology Working Group）が、HTML規格のバージョン番号を廃止する方針であることを発表した。W3C（World Wide Web Consortium）がHTML5のロゴを発表したばかりであり、W3Cは「先に発表したHTML5のロゴのローンチが混乱を招いた」と謝罪している。 WHATWGはAppleやMozilla、Opera、GoogleなどのWebブラウザ開発者らが参加するHTML関連ワーキンググループ。W3Cとは異なるスタンスでHTMLの開発を行っており、HTML5についてはW3CとWHATWGが共同で策定を進めている。 WHATWGのIan Hickson氏が1月19日、WHATWGのブログにて方針の変更を発表した。Hickson氏は背景として、2009
「CSS3でドラえもん」はスゴイけれど……
1． 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなブックマークニュース 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD CSS3 ドラえもん 画像を一切使わないCSS3で製作した新サイト「NetaGear」！ - 裏技shop DD NetaGear 「すごい」と思う。そのアイデアにも技術にも感心する。ただ私は、本題から外れたところで、ちょっと違うことを考える。 2． IEは非推奨です。IEでも一応閲覧は可能ですがGoogle Chrome、firefox、Operaのようなデザインでは表示できません。 ここで今IEを使っている人に言いたい！ そのブラウザを使うのをさっさとやめてくれ。あれはWeb業界の足を引っ張りまくっているお荷物なんだ！ もうIEとかネタでしかないし、早く滅びればいいのにｗ 昔からいっているのだけれども
「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏
「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏 「HTML5の最大の問題は、優先順位を間違ったことだ。機能について議論する前に、セキュリティの扱いについて検討すべきだった」こう語るのは、JSONの発明者として知られ、Yahoo!のシニアJavaScriptアーキテクトでもあるDouglas Crockford氏。5月4日に行われたオライリーのWeb2.0 Expo 2010でのインタビューでのことです。 「もうそれを議論するには遅すぎるという人もいるが、そうは思わない。正しいことをするのに遅すぎることはないのだから」（Crockford氏） Crockford氏はHTML5は機能が重複しすぎていることも指摘しています。「Local StorageとLocal Databaseの両方が本当
HTML5対応：divで乗り切れ - 万象酔歩
中央に置くことはできなくなります。 また<p>タグの場合も <center> <p> AAA<br> abcdef<br> G<br> hi-jkl<br> MMMMM </p> </center> で という表現を得るということができなくなります。 divで乗り切れ： <table>タグや<p>タグのstyle=設定で中央寄せ設定することはできますが どう配置するかは内容とは別問題なので、直接tableタグのstyleとして設定することは デザインと内容の分離の観点から好ましくありません。 また、同じstyle=設定を文章中に何度も繰り返し書くのは好ましくないので class定義をすることになります。しかしながら、設定したいスタイルには 全体の配置だけでなく色などもあります。classは多重派生させることは できませんので、中央寄せのこの色、左寄せのこの色といった具合に 無数のclass
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting