fetchPriority APIは、リソースの相対的な優先度をブラウザに示すために使用します。fetchpriority属性を<img>、<link>、<script>、<iframe>の各要素に追加するか、Fetch API上でpriority属性を使用することで優先度を設定できます。 ブラウザのロードプロセスは複雑です。ブラウザは、主にリクエストの種類や、ドキュメントのマークアップ内におけるリクエストの位置によってその優先度を判断します。例えば、ドキュメントの<head>内で要求されたCSSファイルの優先度はHighestとなり、defer属性が設定された<script>要素の優先度はLowとなります。ブラウザは、同じ優先度が割り当てられたリソースを、検出した順にダウンロードします。 fetchpriority fetchpriority属性を使用することで、要求されたリソースの優先
SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWeb
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 警察のWebページは全体的にダサい印象がある。「あ、このページ、警官さんが暇な時にオーサリングソフトを使ってせっせこ作ってるんだな」というのが伝わってくる出来のものがちらほら見受けられる。警視庁（東京都警察って名前変えればいいのに）のWebページはなんとHTML4だ。XHTMLですらないなんて。そんなページでサイバーセキュリティに気をつけろなんて言われても説得力無いんですけど。道理でパソコン遠隔操作事件で誤認逮捕をやらかしたわけだ1。 そんな警察ページの中でも最もダサいと思われるのが、筆者の自治体である神奈川県警だ（北海道警も五十歩百歩
pictureタグ・srcset属性の使い方を分かりやすく解説！【検証用デモページあり】 更新日：2024/05/10 Webサイトのコーディングで、画面幅によって表示させる画像を変更したいとき、どのように対応していますか？ 今までは .pc-only / .sp-only といった表示切替用のクラス名を用いて対応するのが一般的でした。 しかし、この方法では画面幅関係なくどちらの画像も読み込まれてしまうため、表示速度が遅くなる原因になっていました。 また、HTML・CSSにそれぞれ記述が必要で、複雑な切り替え方をしたいときに管理がしにくいという問題もあります。 そこで、今回ご紹介するpictureタグとsrcset属性の出番です。 pictureタグとsrcset属性を使うと、デバイスに応じて最適な画像だけを読み込むようにできるので、不必要な画像が読み込まれる心配はありません。 HTML側
最新のHTML
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
GitHub - iamgio/quarkdown: 🪐 Markdown with superpowers: from ideas to papers, presentations, websites, books, and knowledge bases.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
HTMLでのvideoタグを使った動画の埋め込み方法を解説！属性の使い方や注意点も | Web Design Trends
動画配信サービスには、例えばYouTubeやVimeoなどがあります。Webサイト上でそれらのサービスを使って動画を埋め込んでいるケースはよく見かけますね。単にWebページの中で動画を紹介したい場合は、外部サービスを使って埋め込んだ方が手軽に利用することができます。 一方、自分でサーバーに動画ファイルをアップロードしてvideoタグを使って埋め込む方法もあります。ファイル形式はMP4（.mp4）で用意しておけば基本的に問題ありません。 videoタグを使う場合は、YouTubeなどの動画埋め込みで表示されてしまうサービスのロゴや、固定表示されてしまう要素などを気にする必要がありません。背景動画として埋め込む場合などはvideoタグを使う方法がおすすめです。 ただし、サーバーに動画ファイルをアップロードして読み込みを行うと、サーバーの転送量が増えたり負荷が高くなったりする可能性もあるので、注
Web 標準動向 2026年6月版
こんにちは！ サイボウズ株式会社 フロントエンドエンジニアの mehm8128 (@mehm8128) です。 はじめに サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 HTML W3C Invites Implementations of HTML Ruby Markup Extensions ルビの HTML 仕様「
ダークモードのときは通常の画像ではなく、それように最適化した画像を使いたい場面があるでしょう。特にアイコンなどは黒ベースのものに対して文字色などに合わせて白ベースのものにしたいことがあります。そんなときの出し分け方法です。JavaScriptなど使わずネイティブの機能でHTML・CSSの画像の出し分けができます。 サンプルはこちら <img>タグの場合 <img>タグで読み込む場合は<picture>タグと<source>を組み合わせることで実現できます。 <picture> <!-- ダークモード用 --> <source srcset="hoge-dark.jpg" media="(prefers-color-scheme: dark)" /> <!-- ライトモード用 --> <source srcset="hoge.jpg" /> <img src="hoge.jpg" alt="
テキストフラグメント - URI | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��᪪View in English P~�᪪Always switch to English テキストフラグメントは、URL フラグメントの特定の構文を使用することにより、作成者が ID で注釈を付けなくても、ウェブ文書内のテキストの特定の部分に直接リンクできるようにするものです。対応しているブラウザーは、リンクされたテキストに注意を引く方法を自由に選べます。例えば、色の強調表示やページ上のコンテンツへのスクロールなどです。これは、ウェブコンテンツの作成者が、使用可能な ID が存在しなくても、制御下にない他のコンテンツに深くリンクすることができるため有益なものです。さらに、ユーザーが互いに交換するための、より効果的なコンテンツ共有リンクを生成
type=”email”は使わない方が良いんじゃないか（ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。 デモ： https://codepen.io/ginpei/pen/dPbWQKB @ だけ見るのが良いのでは 先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。 というわけでこれでどうですか。 メールアドレスの検証 メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP ア
Basecoat
All of the shadcn/ui magic, none of the React A components library built with Tailwind CSS that works with any web stack.
HTMLパーサーの設計・実装ノート (1) 字句解析
ふと思いつきでHTMLパーサーを書いているので、どのようなことを考えながら実装したかの記録を残します。 (1) 字句解析 (2) 構文解析 おことわり 偏ったこだわりや早すぎる最適化もあるかもしれませんが、あくまで趣味で書いているものなのでご理解ください。そういったもののなかにも、他の人の発想のヒントになるものも含まれると考えています。 途中の試行錯誤のサイクルを省いて結論だけを紹介している箇所もあります。ご了承ください。 ソースコードは https://github.com/qnighy/htstream に上げていますが、現在のところ完成度はそれほど高くありません。ドキュメントもほぼありませんがご了承ください。 HTMLについて HTMLの管轄をめぐっては紆余曲折がありましたが、現在はWebブラウザベンダーを中心とする標準化団体であるWHATWGが制定するHTML StandardがH
コーディングが少し楽になる、意識したい命名規則とCSS設計。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは。フロントエンドエンジニアのレンツです。僕の連載では初学者向けに、コーディングのノウハウを提供しています。 今回はHTMLに付けるclassの名前について考えてみたいと思います。classに付ける名前によってタグの組み方もコーディングの速さも変わってきますし、拡張性の高さも変わってきます。 classの命名についてちょっと知識をつけていただいたら、コーディング時間が短くなってもっと楽しく開発できるようになりますよ！ というわけでいってみましょう。 コーディングの悩み：classの命名規則 さて、HTMLとCSSを勉強したら何かサイトを作ってみたくなりますよね。HTMLタグを書いてclassをつけてCSSでスタイルを当てていく〜……という作業を延々と繰り返す日々が始まります。 勉強しはじめでアドレナリン全開のころは勢いでいくらでもできる作業なのですが、考えなしにスタートしてしま
はじめに 以前、設計書はMarkdownで管理してPDFに自動変換しよう！ という記事で、設計書を Markdown で管理していく話を書きました。 ここではその発展形として、Markdown で管理した設計書を HTML として公開し、GitHub 上でのレビューや AI 活用まで見据えた構成をもう少し具体的に詰めてみます。 動機 私のチームでは、今は Confluence で設計書を管理しています。 編集や閲覧はしやすく、日常的な運用で大きく困っているわけではありません。ただ、AI で設計書を参照したり、修正案を作ったり、アップロードして更新したりしようとすると、不便な点がいくつかあります。 MCP 経由での取得や更新のコストが大きい 設計書本文や図をまとめて扱いにくい 差分をコードレビューの流れで見づらい そのため、GitHub で扱いやすい Markdown ベースに寄せつつ、人が
Goodbye IE
IE11以外の主要ブラウザがサポートしているウェブテクノロジー一覧 データはCan I useのcaniuse-dbより取得しています。 JS APIAbortController & AbortSignalPNGAnimated PNG (APNG)JSArray.prototype.findJSArray.prototype.findIndexJSflat & flatMap array methodsJSArray.prototype.includesJSArrow functionsJS APIAsynchronous Clipboard APIJSAsync functionsJS APIWeb Audio APICSSBackground-clip: textJS APIBeacon APIJSBigIntOtherBrotli Accept-Encoding/Content-
EJSというテンプレートエンジンを会社で使うらしいんだけど、テンプレートってなんや？なんか難しそうやから使い方知りたいデス 本記事では、ド初心者に向けたEJSの使い方をまとめました。 EJSはJSのテンプレートエンジン。サイト全体の共通パーツなどをphpを使わずに分割することができる優れものです。 EJSの使い方をマスターして効率的にコーディングを進めていきましょうっ！ EJSとは EJSとは主にJavaScriptで使用されるテンプレートエンジンです。EJSを利用することでHTMLをヘッダーやフッターで分割して管理することやHTML内でループ処理を書いて簡単に記述できるなどを実現できます。 上記説明の通りですが、EJSを使用することで、HTML内にJavascriptを記述して処理することができます。 例えば、ファイルを分割して呼び出す、ループ処理を入れるなど、Javascriptを使う
突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました？ <picture> <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480"> <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明"> </picture> 実は1年以上前に公開されたChrome 90からサポートされていたそうで（僕はつい先日知りました）、上のコードのようにimgとsourceの両方にwidthとheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か
囲み枠（ボックス装飾）┃コピペですぐに使えるジェネレーターを導入しました！┃HTML,CSS - yunico's fluffy life
ウェブサイトで囲み枠（ボックス装飾）を使用すると視覚的な整理をすることができ、ページがより読みやすくなる場合があります。 囲み枠を使うメリット コンテンツをグループ化できる。 情報の優先順位を伝えやすくなる。 ページの内容にメリハリができる。 サイトの外観を整えることができる。 今回はコピペで使える、上記のような囲み枠／ボックス装飾のデザインをご紹介します。 HTMLだけで使えるタイプもありますyunico-fluffylife.com 必読┃はじめに カラーコードについて 囲み枠の使い方 HTML 定型文へ登録 CSS ⒈全体に反映 CSS ⒉記事ごとに反映 デザイン┃シンプル BOX1 // 囲い枠 BOX2 // 背景 BOX3 // 交差する線で囲う BOX4 // めくれた紙 デザイン┃おしゃれ・かわいい BOX5 // 背景上の線で囲う BOX6 // ずれた囲み枠 BOX7
GitHub - heygen-com/hyperframes: Write HTML. Render video. Built for agents.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
whatamesh
All of these buttons were initially copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page Get CSS Scan Trusted by thousands Get ready to join 20,000+ professional web developers from 116 countries using CSS Scan every day to deliver world-class websites. on Gumroad Get CSS Scan
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Leapcell: The Best of Serverless Web Hosting JavaScriptに完全に囚われたフロントエンド開発 かつて、私はDjangoのTemplateを使って簡単にウェブUIを構築することができました。ページ上のサイズの異なる反復部分については、テンプレートやフラグメントを利用して抽象化またはカプセル化しました。もちろん、必要があれば、ページにインタラクティブ性を追加するためにJavaScriptを書くことも避けませんでした。 しかし、このように構築されたUIには明らかな欠点があります。ユーザーがペ
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Toast 次は、Popover の源流にもなった、画面端にメッセージを表示するいわゆる Toast UI について考えてみる。想定するのは以下のようなものだ。 メッセージの性質によって、色やアイコンのスタイルを変えられ、同時に複数積み上げて表示できるといった仕様が一般的だ。 HTML 基本は <div popover> となる。また、複数のメッセージがあった場合に、他のが表示されても消えないよう、manual を指定する。 <div popover="manual"> </div> もし内容のレイアウトで Flex や G
Published: May 10, 2023 The web is always evolving and browsers update constantly to give developers new tools to innovate on the platform. Things that previously required helper libraries become part of the web platform and supported on all browsers, along with shorter or easier ways to code design elements. While this constant evolution and adaptation is helpful, it can also bring confusion. It
2021 年 7, 8 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。 1. SVGでパスに沿ってテキストを配置 Illustrator でいい感じに波状のパスを描きます。パスを選択した状態で [オブジェクト] → [アートボード] → [選択オブジェクトに合わせる] でパスの大きさぴったりにアートボードをリサイズします。 [ファイル] → [書き出し] → [書き出し形式] でファイル形式を SVG で書き出します。ポップアップメニューが出てくるので、[コードを表示] をクリックして SVG コードを表示します。viewBox と d 属性の値をコピーしておきます。 あとは以下のコードの viewBox と d 属性にそのまま指定するだけです。 <svg
【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。 - Qiita
はじめに みなさんは、scroll-driven animationsを知ってますか？ scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。 今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。 この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。 Sample シンプルな例 1 ページ全体のスクロール量に合わせて、<div>のスケールを変えている See the Pen CSS Anchor Positioning - sample 02 by でぐぅー | Qiita (@sp_degu) on CodePen. シンプルな例 2 アニメーションする要素が画面に入っ
[レベル: 中級] Search Off the Record ポットキャストのエピソード 105 では、ブラウザが HTML をどのようにパース（解析）するか、そして SEO やウェブサイトのパフォーマンスにとってそれが何を意味するかをテーマに Google のMartin Splitt（マーティン・スプリット）氏と Gary Illyes（ゲイリー・イリース）氏がディスカッションしました。 概要 このディスカッションはもともと、HTTP クライアント（ブラウザ）に送信する情報をマーティンが取り上げたいという動機から始まりました。 そこで、まず必要な基礎知識として HTML パースの基本に立ち返りました。 HTML 標準は要素の配置場所を定義しています。一方で、ブラウザや検索エンジンは、ウェブの現実的な複雑さに対応するために追加のルールを適用しています。 このディスカッションで強調された
DisclaimerAll projects mentioned in this blog post have been contacted, and I confirmed that the behavior described in this article is either working as intended, already fixed, or will not be fixed. TL;DRThe browser loads elements in the HTML from top to bottom, and some JavaScript libraries retrieve data or attributes from the DOM after the page has been completely loaded. Because of how the con
Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material Design Guidelines.
HTMLとCSSを独学で学びたい人にお勧めの解説書、現場レベルのスキルまでしっかり学べる！ -HTML＆CSS Webデザイン
※本ページは、アフィリエイト広告を利用しています。 HTMLとCSSを学ぶ近道は、手を動かすこと。本当なら制作会社で経験を積まないと身につけられないコーディングのスキルを独学で学べる解説書を紹介します。 本書は実案件をもとに作成された練習サイトを実装しながら、本格的にHTMLとCSSを学ぶことができます。デザインカンプや仕様も用意されており、かなり実践的に学べます。 本書は、HTMLやCSSのスキルを身につけるための学習サイトCodejumpの運営者である小豆沢氏による初の書籍。経験することでしか身につけられない実制作のスキルを独学でしっかり学べます。 B5判で普通の解説書とサイズは同じですが、すごいのは576ページと大ボリューム。さらにFigma, Adobe XDのデザインデータ、実装に使用する画像、HTMLやCSSのソースコードもサポートサイトからダウンロードでき、至れり尽くせりです
Accessibility essentials every front-end developer should know by Martijn Hols
Accessibility essentials every front-end developer should know Many developers view accessibility as an overwhelming task, requiring a lot of extra effort or specialized knowledge. But a few basic practices can make a significant impact. In this article, I'll walk you through the key accessibility principles I believe every front-end developer should apply when building components, including: Sema
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
aria-label属性は何にでもつけられるわけじゃない
ARIA in HTMLでは、要素の名前付けの可否について次のようにある。 著者は、名前付けできない暗黙のWAI-ARIAロールをもつ要素で、aria-labelまたはaria-labelledbyを指定してはならない。著者由来の名前付けを禁止する暗黙のWAI-ARIAロールは、4. HTMLでARIA属性を使用するための文書適合性要件で特定されたHTML要素で特定される。 次のマークアップの例は、著者由来の名前付けを禁止する暗黙のARIAロールをもつHTML要素の選択を示す。 例14：著者由来の名前付けを禁止する暗黙のARIAロールをもつ要素 <!-- DO NOT do the following! --> <p aria-label="...">...</p> <span aria-label="...">...<span> <code aria-label="...">...<co
lamplightdev - Streaming HTML out of order without JavaScript
Updated Sep 29 2024 to add further information about support in Safari, and updated information about support in Firefox. Let's start with a demo: https://ooo.lamplightdev.workers.dev: This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, b
GitHub - divriots/jampack: Optimizes static websites for best user experience and best Core Web Vitals scores.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
前 #2 初めてのNokogiri 次 #4 URLの取得とページ遷移 準備 一応続きものなので、前回と同様の準備（Nokogiriのインストール）をしておけばとりあえず大丈夫。このシリーズ用のリポジトリも、今回の記事に合わせて更新済みだ。 GitHub zenn_scraping XPath vs CSSセレクタ Nokogiriで要素を指定する際、大きく分けてXPathによる指定とCSSセレクタによる指定の2パターンが考えられる。もちろんこれは対象や目的によって使い分けてもいいのだが、Webスクレイピング目的であればCSSセレクタの使用を推奨する。理由は3つあり、「WebエンジニアにとってCSSセレクタの方が馴染みがある」、「今時のWebページはidやclassが適切に使われていることが多いため、それを素直に利用できた方が良い」、「私がCSSセレクタの方しか使ったことがない（それでもW
そのMarkdown、Webサイトに進化します。
はじめに Webページを作るとき、「内容はすぐ書けるのに、HTMLの骨格やCSSのクラス名まで手が回らない」という経験はないでしょうか。 ブログ記事、ドキュメント、ポートフォリオ——内容はMarkdownで書けるのに、それを「見られるWebページ」にするには結局HTMLとCSSを書く必要があります。 lobster.js はその壁をなくすために作りました。 このような見た目のサイトがサクッと作れます。 lobster.js とは Markdownのみでページの構造もレイアウトも表現できるよう文法を拡張した、ブラウザネイティブなパーサーです。 最大の特徴は次の3点です。 ビルドステップなし — <script type="module"> 1行で動く。npm不要、バンドラー不要 CSS-first — スタイルを一切バンドルしない。すべての要素に予測可能な lbs-* クラス名を付与するだけ
Bolt.css
Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes. Use it for simple static sites or as a starting point and add your own classes. This is not a complete solution with layout grids, components, utility classes, and the like. Features No layout support No CSS classes Tiny Dark and Light modes How and why I made this I used the fantastic HTML Elements Refere
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fetchPriorityと、LCPの最適化 | POSTD
HTML,CSS超初心者向け クラス名の付け方 - Qiita
神奈川県警のWebページはなぜダサいのか、もしくはダメなサイトの作り方 - Qiita
pictureタグ・srcset属性の使い方を分かりやすく解説！【検証用デモページあり】 | 東京のホームページ制作 / WEB制作会社 BRISK
【HTML・CSS】ダークモードで適した画像に切り替える方法
AI Readyな設計書を目指して。人もAIも読みやすい設計書管理 - Qiita
【2023年最新版】初心者のためのEJS使い方まとめ | TEKIPAKI
picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい
Beautiful CSS buttons examples - CSS Scan
HTMX――フロントエンド革命、Reactはいらない - Qiita
Dialog と Popover #9 | blog.jxck.io
Baseline features you can use today | Articles | web.dev
No.11 2021年7,8月にツイートしたHTML/CSS/JavaScriptのTipsまとめ
検索エンジンはHTMLをどのように解析するのか？ 正しいHTMLはSEOで重要なのか？
DOM-based race condition: racing in the browser for fun
🎨 Material Design Colors, Color Palette | Material UI
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
RubyでWebスクレイピング #3 Nokogiriを使いこなす
anond.hatelabo.jp
rilimarumama2007.hatenablog.com
news.yahoo.co.jp
anond.hatelabo.jp
note.com/stoyofuku
rilimarumama2007.hatenablog.com