HTML Standardの更新でdialog要素に関する変更があったので、自分の理解の整理のためにもまとめてみます。 Scott O'Hara氏によるdialog initial focus, a proposalという提案の一部が反映された変更で、#8199でマージされました。主な変更差分を見るとわりと大きめの追記がされていることがわかります。 提案されていることがすべて採用されていたり、提案で言及されている問題がすべて解決しているわけではなく、議論が続いているものも多いので、今後dialog要素がどういった方向に変更され、進化していくのかを見守る補助的な記事になればいいなと思います。 autofocus属性ほぼ必須 結論から言うと、autofocus属性がほぼ必須となります。そのautofocus属性はdialog要素自体とは限らず、内包している子孫要素に適切な場合もあります。 <d
経緯 Satoriというライブラリに感化されて、HTMLとCSSっぽい記述でPDFを作れたら面白そうと思ったので作ってみました。JavaScriptで書こうかと思いましたが、react-pdfという先人がいたので勉強を兼ねてRustで書いてみます。 どんなライブラリか HTMLとCSSのような記述でPDFを作ることができるライブラリです。 たとえば下記のようなXMLで肉じゃがレシピのPDFが作成できます。CSSは長いため省略していますが、GitHubで確認できます。 <Document title="recipe"> <Page style="page"> <Layer style="main"> <Text style="title">肉じゃが</Text> <Text style="description">日本の家庭でおなじみの肉じゃが。肉やじゃがいも、玉ねぎを油で炒めてから、醤油や
ar5iv – Articles from arXiv.org as responsive HTML5 web documents
Converted from TeX with LaTeXML. Sources upto the end of March 2026. Not a live preview service. Available as a dataset, download here. For articles with multiple revisions, only a single version is made available. When in doubt, always use the main arXiv.org article page. Goal: incremental improvement until worthy of native arXiv adoption. Sample: A Simple Proof of the Quadratic Formula (1910.067
Webサイトで公開されている長編小説などを電子書籍リーダーでじっくり読みたい場面がある。その場合、WebページをPDFにしてしまうと良いのだが、ブラウザの機能を使って変換すると、非常に文字が小さくなり、KindleやKoboなど電子書籍リーダーで読むには適さないことが多い。そこで、単にPDFに変換するだけでなく、読書端末で快適に読書できるように、文字サイズなどをカスタマイズするプログラムを作ってみよう。 HTMLファイルから電子書籍リーダー用のPDFを生成しよう じっくり読書するためのPDF造り 多くの電子書籍リーダーは、ディスプレイに電子ペーパー(E Ink)を搭載している。この電子ペーパーは、太陽光の下でもくっきりと画面を確認できるため、目に優しいと言われており、長時間の読書に適している。筆者も電子書籍リーダーを愛用しており、日々の読書の友としている。 一般的な電子書籍リーダーでは、独
https://blogs.windows.com/wp-content/uploads/prod/sites/31/2022/06/0068a7bb9c0f730b18bad4d4ea898227.gif
スパゲッティ はじめまして こんにちは、高須賀 淳と申します。中途採用で入社して8年目です。 普段は、HTML・CSS・JavaScriptを用いてWebサイトの設計・実装を中心に活動をしています。 今回のお話は 「開発・運用しやすくするHTMLコーディングのTips」と題して具体的なソースコードを交えてお話ししたいと思います。 HTMLは、なんとなく書いてなんとなく出来てしまう一見すると簡単な言語です。 それ故に闇雲にコードを書いてしまうといつの間にかスパゲッティーコードになったり、 何のコードか意味がわからなくなり、いざ修正しようとした時にどこから手をつけてよいか分からない状態になっていたりと困ることはないでしょうか。 それらを解決する第一歩として、HTMLコーディングのコツをまとめます。 HTMLコーディングを始めたばかりの方や普段アプリ開発メインでHTMLを片手間で書いている方のヒ
Lism CSSとは？CSS設計理論の概要
2025年 6月 11日、Lism CSS という CSSフレームワークを ver.0.1 として β リリースしました。 この Lism CSS の設計について、その概要を解説していきたいと思います。 TailwindCSSがデファクトスタンダードとなっていますが、ぜひ新しい選択肢として検討いただけたら幸いです。 はじめに WEBサイト制作において、CSS設計は永遠の課題ですよね。 モダンなCSSテクニックは日々たくさんSNSで流れてくるが、結局サイト全体を通してどのように設計するのが最適解なのかわからない。 情報を追いかけるのが大変で、どうしても従来通りのCSSの書き方でずっと制作してしまう。Tailwindも主流になってきているが、導入する方法を調べるのだけで億劫だ...。 そんな方にとって、「Lism CSS」は新しい解決策となるかもしれません。 導入方法 CDN 経由での利用 H
ミニマルなデザインで使いやすい！ シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI
セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスとまではいきませんが、classの使用は最小限で、カスタマイズも非常に簡単です。 Oat UI Oat UI -GitHub Oat UIは、セマンティックなHTMLでWebサイトでよく使用されるUIコンポーネントを実装する超軽量（8Kb）ライブラリです。依存関係は一切なく、フレームワークやビルドといった複雑さは一切不要です。 ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。 Oat UI Oat UIの主な特徴は、下記の通り。 超軽量のライブラリ CSS 6Kb、JS 2.2Kbで、まるでオートミールのように軽い 依存関係ゼロ JavaScriptや
コードを書く時、モニターは1台ですか？ それとも2台など複数ですか？ 私は2台でやっていたこともありますが、現在は基本的には1台のモニターで作業をしています。最近のモニターは幅が広くなり、2台だと首が疲れるし、1台で2つのウインドウを表示できるのでちょうどよいです。 コードを書く時にモニター1台で作業する利点、便利な機能とショートカットを紹介します。 The Complete Guide To Using One Monitor As A Programmer. by Mahmoud Harmouch 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1台のモニターで作業する利点 1台のモニターで作業する時に便利な機能 1台のモニターで作業する時に便利なキーボードショートカット 終わりに はじめに 複数のモニターで作業す
この記事は terraform Advent Calendar 2024 の 9 日目の記事です。 Terraform だけでアプリケーションのバックエンド・フロントエンド・インフラをつくったので紹介します。 つくったもの 利用技術 バックエンド フロントエンド インフラ まとめ つくったもの 画像を表示するだけのサンプルアプリケーションです。 Gallery リポジトリはこちら。 使用言語 利用技術 バックエンド バックエンドの実装には次世代のモダン AltJS である JS.tf を使用しています。 JS.tf を使うと HCL で JavaScript プログラムを記述することができます。 data "js_function_call" "hello_world" { caller = "console" function = "log" args = ["hello world"]
Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 通常のウェブページでは、リンクをクリックしてから次のページの読み込みが始まります。もしクリックする前にブラウザーが次のページを裏側で準備していたら、クリック直後にページが表示され、待ち時間をほとんど感じません。この「先読み」をブラウザーの機能として実現するのが「Speculation Rulesスペキュレーションルールズ API」です。リンクをたどるたびに感じていた読み込みの間が少なくなり、ページ間の移動がスムーズに感じられるようになります。 たとえばユーザーがリンクにマウスカーソルを乗せたタイミングで、ブラウザーがそのリンク先のページをバックグラウンドで先読みします。リンクをクリックした時点ですでにページの準備が終わっているため、瞬時にページが切り替わります。先読
Intro Referrer-Policy は、送信される Referer の値を制御することが可能だ。 このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。 では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか? 前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io https://blog.jxck.io/entries/2024-04-26/csrf.html Referer とアナリティクス Referer は、リクエストに対してその前のページの URL を送るところから始まった。 GET / H
AI 時代の docs のために、Zero Config なドキュメントサーバー「Tsumugu」を作った — Semantic AST で Markdown・HTML・MDX・OpenAPI をつなぐ | DevelopersIO
AI 時代の docs のために、Zero Config なドキュメントサーバー「Tsumugu」を作った — Semantic AST で Markdown・HTML・MDX・OpenAPI をつなぐ AI を使った開発では、設計書や仕様書などのドキュメントを書く機会が増えました。しかし、Markdown を置くだけでは「読む」体験は意外と良くありません。そこで、Markdown・HTML・MDX・OpenAPI を設定なしで読みやすいドキュメントサイトとして公開できるツール「Tsumugu」を作りました。本記事では、開発の背景、Semantic AST を中心とした設計、そして AI 時代の開発スタイルについて紹介します。 AI を使った開発では、以前にも増してドキュメントを書く機会が増えました。設計書や仕様書、調査メモ、ADR。AI に書かせたものも自分で書いたものも、コードと一緒に
フロントエンドに汎用APIを使わせてはいけない（4年後の続編記事）（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Don’t Build a General Purpose API (4 Years Later) - Max Chernyak 原文公開日: 2025年12月11日 原著者: Max Chernyak 日本語タイトルは内容に即したものにしました。 私は2021年に、フロントエンド向けにわざわざ汎用のAPIを構築して苦労を増やしてはいけないと呼びかける記事を書きました↓（よろしければ本記事を読む前に目を通しておいてください）。 参考: Don’t Build A General Purpose API To Power Your Own Front End - Max Chernyak この記事はHacker Newsに2度取り上げられましたが、2度目は評判がよろしくありませんでした（その分議論は白熱しましたが）。推測ですが、2
2023年、Web制作・デザインに役立つ記事の総まとめ
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな
Oxbow UI - Home
Free and premium components, elements and layouts For freelancers, developers, businesses, and personal use. Beautifully crafted with Tailwind CSS and Alpine JS — Simple & easy to customise.
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2
Deno Land Inc.は2024年10月9日、同社が開発するJavaScript/TypeScriptランタイム環境Denoの新バージョンDeno 2.0のリリースをアナウンスした。 Announcing Deno 2 4 years after Deno 1.0, the next generation of JavaScript is ready for production at scale. Deno 2 is out today: 🐢 Fully backwards compatible with Node and npm 📦 Package management and node_modules and package.json 📅 Long term supporthttps://t.co/LsV4D4Too8 pic.twitter.com/F6EI3whmX8
Products ANACONDA PLATFORM FOR DEVELOPERS PLATFORM BENEFITS PLATFORM & LICENSING Solutions CAPABILITIES INDUSTRIES SERVICES & SUPPORT Resources FOR USERS MEET US ARTICLES SUPPORT Company ABOUT US PRESS CONTACT CAREERS DownloadSign InGet Demo Supporting open source and creating tools that enable people to do more with less are why I joined Anaconda almost eight years ago. Today, at PyCon US 2022, I
公開日 : 2022年10月17日 カテゴリー : アクセシビリティ / ユーザビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
#はじめに スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。 何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。 サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。 #ソースコード・動作 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box top" id="top"> <span class="text">Top</sp
PPL 2022 招待講演： 静的型つき函数型組版処理システムSATySFiの紹介AI-enhanced description The document appears to consist of a mix of non-standard encoded characters, possibly resulting from a corrupted file or encoding issue. It references multiple systems and tools related to typesetting and content management, but the actual content is highly distorted and lacks coherent meaning. Thus, the document cannot be effectivel
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :
Webデザインをするとき、どんなデザインや仕掛けを採用したらよいか、迷うというひとも多いのではないでしょうか。 今回は印象に残るウェブデザインを表現できる、最新のHTMLスニペットをまとめてご紹介します。 CSSで表現できる最新テクニックから、複雑であっと驚くデザインまで、CodePenで話題のスニペットを中心にセレクト。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、まずはやりたいことを試してみませんか。 コピペで簡単！他と差のつくHTML/CSSスニペットまとめ キラキラに輝く立体的なクレジットカード クレジットカードの向きを変えることで、キラリと輝くグリッターデザインを施した素敵スニペット。 See the Pen Responsive, Glittery Bank Card by Simon Goellner (@simeydotme) on CodePen.
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定します。 bissyさんによる↓の記事が大変参考になります！ ずぼらな私の2023年のファビコン事情（SVGでダークモード対応） 一般的なウェブサイトでは、SVGでファビコンを作れば
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
シルエット姿のネコがWebブラウザ上に集まりたわむれるだけのChrome拡張「ネッコサーフィン」の“問題”が解決した。俳優の阿部寛さんの公式Webサイト「阿部寛のホームページ」だけネコが来なかったのだが、有志が対策パッチを開発。同サイトにネコを召喚することに成功した。 ちなみにネッコサーフィンは、ロシアとウクライナでバズっており、ネコの癒やし効果は世界をで求められているようだ。 ネッコサーフィンは、発明家・デザイナーの「もにゃ」さんが開発した拡張。マウスの移動量に応じてネコが現れてたわむれるだけで、便利な機能はない。むしろちょっと邪魔だ。 「阿部寛のホームページ」は、1990年代にタイムスリップしたかのような古風なサイト。なつかしのframesetタグが利用されているため、ネッコサーフィンを入れたブラウザでもネコが現れないという問題が起きていた。 もにゃさんはユーザーに対して、「阿部寛のホ
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに ※2025/09/15...当時は公式サイトがありましたが、サイトがクローズされたようでした。 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイム
Firebase Hosting を使った HTML, CSS, Prettier, Dockerのサンプルコード
Firebase Hosting を使った HTML, CSS, Prettier, Dockerのサンプルコード
ICSはフロントエンド専門のウェブ制作会社で、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から12年目をむかえました。年末恒例となりますが、今年の記事のアクセス数を公開します。 今年はCSSの進化が目立ちました。今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップします。 1位 : text-boxの使い方 CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 19,761 PV text-box-trim / text-box-edgeを取り上げ、テキスト要素の上下スペース（いわゆるハーフ・レディング）の扱いを整理しながら、実装にどう役立つかを具体例つきで解説しています。多くの方々が普段のウェブ制作で困っていたことであり、解決方法が得られたことで大きな反響がありました。 読者
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
JavaScriptのようにPythonコードをHTML内に記述して実行できる「PyScript」 Anacondaがオープンソースで公開
JavaScriptのようにPythonコードをHTML内に記述して実行できる「PyScript」 Anacondaがオープンソースで公開
HTMLの仕様は、WHATWG（Web Hypertext Application Technology Working Group）というApple、Mozilla、Google、Microsoftからなるコミュニティによって策定されています。これが、HTML Living Standardです。以前は、W3C（World Wide Web Consortium）というWeb技術の標準化団体によって仕様が策定されていました。2019年以降は、W3CはHTML等の策定を行わず、WHATWGに協力する姿勢に改まっています。 しかしながら、Webページにおける独自のタグをつくるという試みは進められてきました。それが、第1回でも紹介したReactやVueといったコンポーネント指向のライブラリです。コンポーネント指向とは、見た目とロジックをコンポーネント（部品）という単位にカプセル化するという考え
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
CSSで画像をハーフトーン（網点）に加工する画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ グラフィックツールを使わず、CSS だけでひとつの画像をこんな感じに加工してみます。 1. 画像を div に入れておくまずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt="" /> </div> 2. CSS で水玉模様を作成「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーションで作成します。この
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<dialog>内でautofocus属性がほぼ必須になる話
HTML/CSSっぽい記述でPDFを作れるライブラリをRustで作る
ゼロからはじめるPython(86) 電子書籍リーダーで快適に読めるPDFをHTMLから生成しよう
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
開発・運用しやすくするHTMLコーディングのTips - NRIネットコムBlog
コードを書く時にモニター1台で作業する利点、便利な機能とショートカットのまとめ
バックエンドもフロントエンドもインフラも Terraform でつくってみた
Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 - ICS MEDIA
Referrer-Policy の制限を強めると安全になるという誤解 | blog.jxck.io
Deno 2.0リリース ―大規模プロダクトにも対応可能なJavaScript環境へ | gihyo.jp
Anaconda | New from Anaconda: Python in the Browser
【海外記事紹介】Webページを保存する新手法が技術的にぶっ飛んでいて話題に — HTMLにtarをそのまま結合、window.stop()で読み込み強制停止してHTTP Range Requestで自己を再構築
多要素認証におけるワンタイムパスワードの入力欄 | Accessible & Usable
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita
PPL 2022 招待講演： 静的型つき函数型組版処理システムSATySFiの紹介
コピペで簡単！他と差のつくHTML/CSSスニペット30選まとめ | PhotoshopVIP
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
ネコがたわむれるだけのChrome拡張、「阿部寛のホームページ」で利用可能に 有志が対策パッチ開発
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 - レバテックLAB
<button>とかのスタイルを消して書き直すときに考えることの備忘録
CSSで画像をハーフトーン（網点）に加工する
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
togetter.com
www.pekepekepeke.com
marin0.lo.gob.jp
www.nicovideo.jp
diamond.jp
gaba-fortnite.hatenablog.com