HTML のアウトラインアルゴリズムが刷新されようとしています。 本記事では、最初に現時点のアウトラインアルゴリズムの概要を説明した後、どのような変更が行われるかを紹介します。 現時点のアウトラインアルゴリズムの概要 アウトラインアルゴリズムの刷新 HTML にはアウトラインアルゴリズムという概念があります。 …
無料コーディング練習所
『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで6サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 さぁ、楽しみながら一緒に勉強していきま…
「HTML解体新書」HTMLのこれからと向き合うための本 – クラウドワークス エンジニアブログ
「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関…
Web制作にすごい役立つ! コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
CSSやJavaScriptのミニファイ(軽量化)、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用…
<aside> 要素のアクセシビリティマッピングが変更
W3C が公開している HTML Accessibility API Mappings 1.0(www.w3.org)において、2022年4月4日付で <aside> 要素のアクセシビリティマッピングが変更されました。 Suggest <aside> should map to complementary with restrictions · Issue #86 · w3c/html-aam(github.com) aside mapping revisions by scottaohara · Pul…
Building a dialog component
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here’s a YouTube ve…
「阿部寛のホームページ」はHTML界のシーラカンスである – Qiita
(2022/4/12) 英語版を書きました。よろしければ拡散お願いいたします。 説明する必要も無いと思うが、阿部寛さんと言えば日本を代表する名優の一人であり、数々の作品でその巨躯以上の存在感を見せつける、映像業界にはなくてはならない存在だ。実写に疎い私ですら、「TRICK」のポンコツだがプライドは一人前な上田教授…
HTML Living Standard – とほほのWWW入門
HTML5 や HTML 5.1 は W3C が標準化を進めていましたが、W3C とは別に、Apple, Mozilla, Opera の開発者らが設立した WHATWG という団体が独自に策定を進めている HTML 仕様です。HTML Living Standard と呼ばれ、バージョン番号や、何年何月何日版という概念もなく、日々、改版進められています。 HTML Living Standard…
内容に応じてサイズが可変する <textarea> を素敵に実装する – Qiita
.FlexTextarea { position: relative; font-size: 1rem; line-height: 1.8; } .FlexTextarea__dummy { overflow: hidden; visibility: hidden; box-sizing: border-box; padding: 5px 15px; min-height: 120px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; border: 1px solid; } .FlexTe…