最近、このブログのお問い合わせフォームや、Webスクール体験レッスン、メルマガ登録などのフォームにスパムボット（広告・宣伝などを自動で送信するプログラム）と思われる送信があまりにも多いため、対策をしています。 メールフォームのスパムポット対策と言えばGoogleの「reCAPTCHA」が有名ですが、 そういったものは使用せず、HTMLとサーバー側のPHPを工夫することで対策をしました。 reCAPTCHAを使わない理由 スパムボットを防ぐ有名な方法にGoogleのreCAPTCHAがありますが、以下の理由から私はできれば使用したくありません。 理由1: ユーザーに負担をかける reCAPTCHAでは、ボットかどうか疑わしい場合、人間であることを確認するためのパズルが表示されます。 しかし、例えばメールマガジン登録フォームにメールアドレスを入力して送信しようとした際に、そのようなパズルが現れ
command と commandfor の導入 | Blog | Chrome for Developers
公開日: 2025 年 3 月 7 日 ボタンは、動的なウェブ アプリケーションを作成するために不可欠です。ボタンは、メニューを開いたり、アクションを切り替えたり、フォームを送信したりします。これらは、ウェブ上のインタラクティビティの基盤となります。ボタンをシンプルでアクセスしやすいものにすると、予想外の課題に直面することがあります。マイクロフロントエンドやコンポーネント システムを構築するデベロッパーは、必要以上に複雑なソリューションに直面することがあります。フレームワークは役に立ちますが、ウェブではさらに多くのことができます。 Chrome 135 では、新しい command 属性と commandfor 属性を使用して宣言型の動作を提供する新しい機能が導入され、popovertargetaction 属性と popovertarget 属性が強化され、置き換えられます。これらの新し
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング 2024年8月8日公開西原 翼♥ 179
HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。 この記事では、2023年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2023 の中から、印象に残った素敵な作品をご紹介。 2023年に話題となったWebサイトでも見かける、参考にしたくなる魅力的なエフェクトやテクニックに多くのハートが集まっています。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
GitHub - tamnd/kage: Shadow any website for offline viewing, with the JavaScript stripped out
kage (影, "shadow") clones a website into a folder you can browse offline, with every script stripped out. It opens each page in real headless Chrome, waits for the page to settle, snapshots the DOM a human would have seen, then deletes all the JavaScript and pulls the CSS, images, and fonts down to local paths. What lands on disk looks like the live site and runs no code. Install • Quick start • C
チェックボックスとラベルの話【HTML編】 - Little Strange Software
どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、 「勉強したいが、コードを見てもなんのことやら…」 という方向けに、仕組みの基本的な部分を解説してみます。 HTMLでの記述と、CSSでの記述の合わせ技となりますが、まずはHTML部分について。 CSSについ
概要 W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。 この変更では、ビューポート単位にLarge viewport、Small viewport、Dynamic viewportといったビューポートサイズの単位が追加されました。 今までは、vhやvwなどで画面サイズに合わせての高さ、幅の指定していましたが、 これからは、lvhやsvwといった単位で画面サイズに合わせての高さ、幅の指定できるようになります。 そのため、この記事では、追加された、ビューポート単位について解説していきます。 追加された背景 以前のiOS(Safari)では、 画面の高さいっぱいにようを表示したいという時に100vhで指定すると、 アドレスバーが表示された時、下がその分隠れて表示されてしまい、高さいっぱいにならない という現象
HTMLテンプレートを無料でダウンロードできるサイトを厳選してご紹介します。 より具体的には、CSSフレームワークに依存しないVanilla CSSテンプレートとなっています。 数あるテンプレート配布サイトの中で、これから以下に挙げるサイトが特にお気に入り。選択基準はこんな感じ。 HTMLテンプレートは、どれも個人・商用ともに無料で利用できる モダンでおしゃれな今っぽい見た目 デモページで表示、確認できる ダウンロードに必要なのは、メールアドレスによるサインアップのみ わたしはこれまでに、無料で利用できるHTMLテンプレートを１０年近く追っかけてきました。数でいうと数百は超えます。 その経験から言えるのは、多くの「無料」テンプレートは、個人利用向けライセンスがほとんど、ということ。 クライアント向けのプロジェクトや営利目的の仕事には、残念ながら使えません。 テンプレートを購入することで商用
フロントエンド技術がなんもわからんプログラマがPythonでMarkdownをHTMLにレンダリングしてCSSを適用してみた - Qiita
概要 やること MarkdownファイルをHTMLファイルに変換して、HTMLタグへの理解を深める CSSの基本的な扱いに慣れる 想定読者 Pythonはなんとなくわかる Markdownは普通にわかる HTML, CSSはよくわからない 背景 筆者は普段Pythonでデータ加工処理やRPAを作っている。Webアプリ開発も手を出し始めた。 ブラウザを自動操作をするにせよ、Webアプリを作るにせよ、フロントエンドがわからないとつらい。 Markdownには慣れている。そういえば、MarkdownってHTMLを読み書きしやすくするというコンセプトで作られたものでは...? MarkdownからHTMLを生成するツールを使えば、自分が書いたMarkdownとの対応がよくわかるのでは！！？ 詳細 ツール候補 なんやかんやでPythonを選びました。 Visual Studio Code 拡張機能
【SAS勉強会-第4回-】ODSステートメントを使用したHTML出力 - シー・エス・エス イノベーションラボ（ブログ）
皆さま。こんにちは、marshmallow_bijouです。 今年も終わりに近づいてきましたね。私はクリスマスケーキを食べるのを指折り数えて楽しみにしているこの頃です。 さて今回は、ODSステートメントを使用して、HTML出力を作成し表示する方法についてお話していこうと思います。 前回の記事はこちら👇 blog.css-net.co.jp １．ODSの動き ２．ODS出力先のオープン・クローズ 2-1.ODS出力先のオープン・クローズの仕方 2-2.複数の出力先を一度に閉じたい場合 ３．オプションを使用したHTML出力 ４．最後に １．ODSの動き まず、HTML出力のお話の前に、ODSステートメントとは何かについて、軽く触れておきます。 *1 ODSでは、書式設定のオプションを与えることによって、出力の幅を広げることが出来るので、指定した形式で出力ファイルを作成したいときに使えるかと思
OGPって何？ OGPとは「Open Graph Protcol」の略称です。 WebページがX(旧Twitter)やfacebook、LINEなどのSNSでシェアされた際にタイムライン等に表示されるサムネイル画像やページタイトル、説明文などを指します。 OGPを正しく設定することで、SNSのタイムラインを見ているユーザーに対してWebページの内容を魅力的に伝える事が可能。 また、OGPはサイト内の各ページで設定する事ができますよ。 OGP画像のサイズ X(旧Twitter ツイッター)やfacebook（フェイスブック）で使われるOGP画像のサイズは以下です。
PR TIMESのフロントエンド環境にMarkuplintを導入しました | PR TIMES 開発者ブログ
Markuplintとは Markuplintはマークアップ開発者のためのHTMLリンターです。 HTMLのタグが正しいか、Aria属性が適切に設定されているか等の適合性のチェックを行ってくれます。 Markuplint導入の背景 レビュー時に目視でHTML要素の使い方正しいかどうかを確認していくのは、レビュワーのHTML仕様の理解度に左右されてしまいます。 HTMLの品質を担保する場合に個々人のスキルで品質にブレが生じないようにするためにmakruplintを導入することにしました。 Markuplintの導入の進め方について Markuplintの導入は以下のフェーズで進めていきました。 Phase1 VS Code上やコマンドを叩いてMarkuplintが実行できるようにする+エラーになったルールを一旦無効化 Phase2 pre-commit+lint-stagedで実行できるよう
10015.ioはWeb制作等の際にあると地味に便利なWebアプリを複数公開しているWebサイトです。 どこかで公開されているアプリを紹介しているのではなく、全て自身のWebサイトで公開されているもので、ダミーテキスト生成や空白除去、Google Fontsの表示確認ツールなどテキスト系ツール、切り抜きやリサイズ、フィルター、ピッカー、コンバーター等の画像系ツール、各CSS系ツール、エンコーダーやデコーダー、フォーマッター、暗号化などコーディング系ツール、その他カラーツールやSNSに関するツールなど様々なツールを公開しています。 各ツールへ直接アクセスできるよう、ChromeやFirefoxなどのブラウザ拡張も公開されていますが、これが思った以上に楽で良かったです。利用は無料でユーザー登録も不要です。開発者はFatih Telis氏でサブプロジェクトとして運営しているそうで、この手のツール
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… 「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関するメモ書きです。 CSSの改行処理プロパティのメリデメ 上記問題の暫定解決方法 対象のCSSプロパティは以下の通りです。 overflow-wrap: break-word; w
この記事は HTML アドベントカレンダーの 19 日目の分、兼 Perl アドベントカレンダーの 19 日目の分です。 Perl で HTML をパースするモジュールはいくつもあります。 HTML::Parser そのままの名前ですね。HTML コードをパースしていき、開始タグ、終了タグ、テキストなどを認識するとそれをイベントとして知らせてくれる、プッシュ型のパーサーです。 HTML の要素の内容モデルや、ある要素のタグが省略可能かといった知識は持っていません。あくまでもタグやテキストなどの出現を知らせるだけで、文書木を構築するわけではないからです。 逐次的なパースに対応しています。HTML 文書全体を表すコードを一気に入力として与えなくてもよく、HTTP 通信中に受け取った分からパースしていくといったことが可能です。 Web 製作者の意図を汲み取ろうと努めており、「壊れた」HTML コ
Frontend Conference Okinawa 2023, 2023/11/18 Ivanova Marina, 株式会社ゆめみ
※Reactを使っている前提です。 ※タグっていうか要素やね。 リモートワーク中ワイ ワイ「さてと、今日もお仕事開始や」 ワイ「Webサイトを作っていくで」 ワイ「ほな、デザインデータを見ながらコーディングしていこか」 ワイ「どれどれ」 デザインデータ ワイ「↑どうやら、この番号付きリストが」 ワイ「色んなページで登場するみたいやな」 ワイ「ほな、使いまわせるようにコンポーネント化しておこか」 コンポーネントを作る ワイ「HTMLのタグとしては」 <ol> <li> <p>〇〇する。</p> </li> <li> <p>△△する。</p> </li> <li> <p>□□する。</p> <p>その際、■■に注意すること。</p> </li> </ol> ワイ「↑こんな感じのマークアップになりそうや」 ワイ「せやから」 ワイ「olタグにデザインを反映させたOrderedListコンポーネント
How Functional Programming Shaped (and Twisted) Frontend Development A friend called me last week. Someone who’d built web applications back for a long time before moving exclusively to backend and infra work. He’d just opened a modern React codebase for the first time in over a decade. “What the hell is this?” he asked. “What are all these generated class names? Did we just… cancel the cascade? W
Webサイトやデザイン制作で、やたらと時間がかかってしまうとお困りのクリエイターの方へ。 この記事では、SNSなどでいま話題の最新ツールやフリー素材を50個まとめており、制作時間を短縮したいというひとに選ばれています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。
と依頼します。 その際、 必要なHTML要素 そのHTMLに必要なCSS 必要に応じてJavaScript だけを残し、関係のないコードは除外してもらいます。 こうしておくと、次にAIへ渡す参考資料として使いやすくなります。 JavaScriptを含めるかどうか HTML資産にJavaScriptを含めるかどうかは、用途によって変わります。 見た目だけを参考にしたい場合は、HTMLとCSSだけでも十分です。 一方で、JavaScriptも含めておくと、 ボタンを押したときの動作 ダイアログの表示 ファイルのドラッグ＆ドロップ 読み込み表示 など、見た目だけでなく動作もAIへ参考として渡せます。 似た機能を実装するときや、不具合を修正するときにも役立つ場合があります。 ただし、JavaScriptには処理を実行するコードも含まれるため、出所が不明なコードをそのまま実行しないなどの注意は必要で
The end of responsive images
CodePen 2.0 Beta has multiple files, deployments, lightning fast processing and previews — all with advanced privacy controls. I’ve been waiting for fourteen years to write this article. Fourteen years to tell you about one relatively new addition to the way images work on the web. For you, just a handful of characters will mean improvements to the fundamental ergonomics of working with images. Fo
はじめに 前回は、デスクトップアプリ開発に必要な必要最低限のRustの文法を学びました。今回は、Webページを作るのに使う技術である「HTML5＋CSS＋JavaScript」について最低限知っておくべき文法を解説します。 HTML5の文法 HTMLは「ハイパー・テキスト・マークアップ・ランゲージ」の頭文字をとったマークアップ言語です。HTML5は、HTMLの2024年12月現在最新のバージョン5であり、拡張子は「.html」や「.htm」のファイルです。インタプリタ言語のようにコンパイルすることなく即座に実行できるマークアップ言語となっています。 言語とは言いましたが、処理の制御はできず、文字や画像やリンクや動画などを配置できるだけです。ただしHTML5がなければ、CSSで装飾することも、JavaScriptでプログラミングして制御することもできません。 第1回でWebページのHTML5
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
こんにちは、フロントエンドエンジニアの mehm8128 です。 今回は新しく検討されている ARIA Notify API について紹介します。 ARIA Notify とは ARIA Notify とは、既存の ARIA ライブリージョンにおける問題点を基に検討されている、新しい API です。document.ariaNotify() のように命令的に呼び出すことで、スクリーンリーダーや点字ディスプレイなどの支援技術に情報を伝えることができます。 ただし、既存のライブリージョンを完全に置き換えるものではありません。本来の目的で利用されているライブリージョンはそのままで良く、意図しない用いられ方をしてしまっている部分で、より正確に支援技術に情報を通知するための API となっています。 現在は仕様の議論段階で、最低限の機能が入った API が Edge では 136 以降の Origi
Declarative partial updates | Blog | Chrome for Developers
Published: May 19, 2026 The web has long since moved on from the static, document-driven medium that it started as. Modern, rich web apps are used by everyone for many reasons, from communicating, purchasing, consuming rich content, to managing our complex lives. HTML, despite all its advances, is still delivered in-order in a top-to-bottom fashion with little regard for when content is ready or w
はじめに Rails7のリリースで、Hotwireに注目が集まっています。どうしてもRailsとペアで語られがちなHotwireですが「HTMLさえあれば動く」のが重要なポイントです。（つまり LaravelやExpressなどあらゆるWebフレームワークと共存できます！） そこで今回は、HTMLのみでHotwireの世界観を体験できるような内容で以下にまとめたいと思います。 触れること Hotwireの構成モジュールの一つである「Turbo」その中でも「Turbo-Frame」 ごく基礎的なことのみ こんな感じのがHTMLの記述だけで作成できます 触れないこと Stimulus Strada その他あらゆる発展的内容 HTMLファイルの準備 以下の２ページを用意します。 index.html foo.html まずは、HTMLファイルを準備します。 index.html ポイントは２つの
HTMLの仕様を徹底解説-チートシートにどうぞ
HTMLの仕様をしっかりと理解してコーディングしてますか？ labelタグの中にdivタグを入れたりしてませんか？ 当てはまる場合は、この記事が参考になるはずです。 本記事では、HTMLの基本的な仕様を解説していきます。 この記事を読む終わる頃には、HTMLの書き方で迷うことが大幅に減るはずです。 ぜひ、参考にしてください。 HTMLの基礎知識 まず、HTMLの基本的なことについて説明していきます。 タグ 9割の人は理解してると思いますが、HTMLはタグを使ってテキストをマークアップしていく言語です。 このタグを使うことで、テキスト要素の種類と範囲をブラウザなどに伝えることができるわけです。 例えば以下のコードでは、「タイトル1」というテキストが一番大きなタイトルということを表現できます。 タグの中には、終了タグを省略できるもの、終了タグを持たないもの、タグ自体を省略できるものがあります。
HTTP入門 - とほほのWWW入門
HTTP入門 トップ HTTP入門 下記に移動しました。 とほほのHTTP入門 Copyright (C) 2005 杜甫々 初版：2005年3月20日、最終更新：2005年4月3日 https://www.tohoho-web.com/ex/http.htm
The Web Is Fun Again: First Experiments with HTML in Canvas – Frontend Masters Blog
Every once in a while, the platform drops something that makes you want to build strange demos again, or at least weirder ones. The new HTML in Canvas API is a perfect example of one of those moments. The promise is simple and exciting: take native HTML, render it into canvas workflows, and then apply visual effects with 2D Canvas, WebGL, or WebGPU. In other words, you can keep real semantic eleme
So you use an anchor tag, a button tag, or something else entirely (a div??) for clickable elements in HTML? // 🚩 export function MyButton() { return <div onClick={...}>Click me</div> } //❓ export function MyButton() { return <button onClick={...}>Click me</button> } //❓ export function MyButton() { return <a onClick={...}>Click me</a> } Let’s start by making one thing clear — you should not use
The 2024 Web Almanac
Web Almanac HTTP Archive’s annual state of the web report Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2024 edition is comprised of 19 chapters spanning aspects of page content, user experience, publishing, and distri
CSSの@font-faceでGoogle FontsのWebフォントを利用する方法 | Webエンジニアのブログ
WebデザインでWebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はWebフォントを利用するために用意された規則です。Webフォントで有名なのがGoogle Fontsではないでしょうか。 他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。 Webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、Webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。 もちろん画像として扱っていくのは問題ないのですが、レスポンシブWebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところ
GitHub - leonardodino/rci: 🔢 better code inputs for react/web
rci uses a single DOM input element, overlayed on top of plain divs for styling. most other implementations of this pattern are based on multiple inputs. using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage of JavaScript hacks to deal with focus shifting and pasting, and accessibility issues. using a single input (rci approach) allows for: native keyboard s
Say Hello to selectmenu, a Fully Style-able select Element I want to introduce you to a new, experimental form control called <selectmenu>. We’ll get deep into it, including how much easier it is to style than a traditional <select> element. But first, let’s fill in some context about why something like <selectmenu> is needed in the first place, as it’s still evolving and in development. Ask any w
HTML to JSX
An online playground to convert HTML to JSX
ブラウザからiPhone（iOS）やAndroidなどスマートフォンやタブレットのカメラを起動するにはJavaScriptであれこれ実装していましたが、HTMLだけで簡単にカメラを起動させることができるcapture属性という便利なものがあったのでメモ用として紹介してみます。 capture属性はinputタグの「type=”file”」に対して指定し、デバイスの背面カメラ、インカメラ（前面カメラ）の選択から、写真と動画（ビデオ）の選択まで細かく指定することができます。 まずはそれぞれの動作サンプルから。 下記の「写真」と「動画」それぞれにある「背面カメラ」「インカメラ」のボタンからカメラを起動してみてください。 ※カメラの起動はiPhone（iOS）やAndroidなどモバイルまたはタブレットデバイスのみで動作します。（PCのカメラは起動しません。） See the Pen HTML c
Elements are interactive in multiple ways; they can be focused, clicked, edited or selected. Assistive technologies such as screen readers also interact with them. What if you wanted to disable all these interactions for a section of your webpage? The inert attribute covers this. Pre-existing Solutions The most basic way to disable all interactions is the disabled HTML attribute, it prevents focus
TAK on Twitter: "✏これは全案件で必ず書いておくHTML/CSS https://t.co/nUsO7seH5C"
✏これは全案件で必ず書いておくHTML/CSS https://t.co/nUsO7seH5C
動画ストリーミング大手のNetflixが、日本とカナダ、アメリカを除く世界中でスタジオジブリ作品の配信をおこなうなど、海外でも高く評価、注目されているジブリ映画。 今回は、そんなスタジオジブリ映画への愛があふれるHTML/CSSスニペットをまとめてご紹介します。 スタジオジブリを代表する往年の人気キャラクターが、CSSを中心に再現されています。スニペットはどれも海外のウェブデザイナーが作成しており、ジブリ映画の人気の高さが伺えます。 トトロやカオナシも！ジブリ愛が止まらないHTML/CSSスニペットまとめ ■ Howl’s Moving Castle ハウルの動く城も無限ループでどうぞ。各パーツごとに切り分けることで、アニメーションをCSSで実装しています。 See the Pen Howl’s Moving Castle by Nathan Gordon (@gordonnl) on C
クライアントサイドとサーバーサイドの違い 知っておくべきこと - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
クライアントサイドとは？ サーバーサイドとは？ クライアントサイドレンダリング サーバーサイドレンダリング 静的サイト生成 3つの主な違い 最後に ここ数年の傾向は、Webサイトのデザインがアプリに似てきています。 高度な応答性と双方向性は、幅広いコンテンツと同じくらい重要です。 現代では、主にWebプロジェクトをレンダリングするために提示されている3つの戦略であるCSR・SSR・SSGがございます。 当記事ではWeb初心者のために最も基本的なCSRとSSRおよびSSGについて解説していきます。 SSRおよびSSGはこちらのReactを使用した静的Webサイト制作のためのレンダリング戦略 - deve.K's Programming Primer - プログラミング初心者のための入門ブログでも触れておりますので参照下さい。 また、4つ目のISR「Intelligent Sampling a
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフォームのスパム対策: ユーザーに優しく、ボットに厳しく、reCAPTCHAを使わない方法
HTMLコーダーに関する記事一覧 - ICS MEDIA
2023年Codepenベスト100発表 ロックなHTMLスニペットがずらり | PhotoshopVIP
【CSS】ビューポート単位が新しく追加されました。 - Qiita
【商用可】HTMLテンプレートを無料ダウンロードできる厳選サイト11個 | PhotoshopVIP
【2025年最新版】OGPのサイズと作り方・設置方法を徹底解説【初心者向け】
Web制作等の際にあると地味に便利なWebアプリを複数公開している・「10015.io」 - かちびと.net
Perl で HTML をパースするモジュール: Days on the Moon
ユーザー登録とログインフォームにautocomplete属性を使いましょう
6歳娘「パパ、HTMLタグがセットなら、コンポーネントもセットにしちゃったら？」 - Qiita
How Functional Programming Shaped (and Twisted) Frontend Development
できるクリエイターへの近道、話題の最新Webツール・デザイン素材50選 | PhotoshopVIP
自分のHTML資産を増やすと、AIで見た目の良いサイトを作りやすくなる - Qiita
デスクトップアプリ開発に必要なWebページを作るため「HTML5＋CSS＋JavaScript」の文法を学ぼう！
命令的な ARIA ライブリージョン：ARIA Notifyの紹介
【Hotwire】HTMLだけで分かる Turbo 🚜 - Qiita
Everything you didn’t know you need to know about buttons
The selectmenu HTML Tag | CSS-Tricks
HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性｜BLACKFLAG
Non-interactive Elements with the inert attribute
トトロやカオナシも！ジブリ愛が止まらないHTML/CSSスニペットまとめ | PhotoshopVIP
maki7.nk.awe.jp
www.newsweekjapan.jp/articles
news.yahoo.co.jp
collabo-cafe.com
dtimes.jp
kawariyuku-machida.com