systemd は Linux の標準的なシステム・サービスマネージャで、sysvinit の代替の init プロセスとなることを目指して開発されたソフトウェアである。長らく色々論争が行われ、紆余曲折はあったものの、現在ではほとんどの Linux ディストリビューションが標準的に init として採用している。SysV のサービスが秘伝の起動スクリプトにより管理されてきたのに対して、systemd ではサービスを記述するユニットファイルによりサービスを管理する。黎明期は systemd の方は様子見で、SysV 用の起動スクリプトだけを提供するプロジェクトも多かったが、現在は systemd ユニットを標準的に提供するプロジェクトも増えている。 さて、サービスを管理する上で重要なことの一つがセキュリティだ。サービスは基本的に長期間動くプロセスで、権限も大きく、他のサービスとの連携も行われ
「ウェブサイトやSNSで目を引くデザインを作りたい…と思ったことはありませんか？ テキストエフェクトは、簡単な工夫でデザインを引き締め、見る人の印象に残す力があります。しかも、難しいスキルがなくても、コピー＆ペーストするだけで手軽に導入できるのが魅力です。 今回ご紹介するコピペで使えるWebテキストエフェクト集を使って、バナーや見出しに動きを加え、あなたのウェブサイトに個性をプラスしてみませんか。 ウェブサイトにすぐ使える！おすすめテキストエフェクト集 ウェブサイトに簡単に導入できるテキストエフェクトをご紹介。 スニペット右下にある「Return」を押すと、エフェクトを再読み込みできます。エフェクトを見逃したときにどうぞ。 HTMLとCSSのみで表現できるスニペットを中心に集めています。
[レベル: 中級] メタデータ (metadata) に関する技術ドキュメントを Google は検索セントラルサイトに公開しました。 <head> 要素（タグ）内では有効な HTML 要素だけを使用するように注意喚起しています。 head 内で有効な要素 <head> セクションで有効なメタデータとして Google 検索で認識されるのは次の HTML 要素です。 title meta link script style base noscript template head 内で無効な要素 上で挙げた以外の要素を <head> 内に記述してはいけません。 特にありがちなのは次の要素を <head> に追加するケースです。 iframe img 無効な HTML 要素が <head> に存在すると <head> 内のメタデータの読み取りをそこで Google は 終了します。 <head
Make any website load faster with 6 lines of HTML | DocuSeal
Document Signing for SaaS Add document signing to your product
2025/09/06 フロントエンドカンファレンス北海道2025の登壇資料です
進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS
最近では、HTMLとCSSは非常に進化し、強力になってきました。これからの時代はJavaScriptは本来のJavaScriptでしかできないことに使い、HTMLとCSSで可能なものはCSSとHTMLで実装すべきです。 HTMLとCSSだけで実装できる、あるいはごくわずかなJavaScriptで実装できるUIコンポーネントのまとめを紹介します。 NoLoJS NoLoJS -GitHub NoLoJSは、JavaScriptの負荷を軽減するために、No-JavaScript、あるいはLo-JavaScript（最小限）で実装できるUIコンポーネントをまとめたものです。 ライセンスはGNU General Public License v3.0で、商用プロジェクトでも無料で利用できます。
ボタンには常にtype="button"をつけよう
結論 ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。 なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンは すべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。 そしてデフォルトのtype属性の値はsubmitです。 つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。 起こった問題 予想外の挙動をするパターン1 以下は郵便番号と住所を入力するシンプルなフォームです。 郵便
ほくほくデネブアルタイルベガ @dis_honest ヤリモクのいいねしかしません。 ｜エンターテイメント／クリエイティブ（WEB制作・デザイン）伊野尾慧、アンゴラ村長、野呂佳代、スパイスカレー https://t.co/4pBXAykcxr ほっくん @dis_honest Twitterサ終で、個人サイトにもどるインターネット歴が長いアラサーたちへ。 <font>タグはもうありません。 <center>も<marquee>も廃止になりました。 <bgsound>はビックリするのでやめてください。 <table>でレイアウトする時代は終わりました。 CSSでやりましょう。 2022-11-18 16:42:34
ウェブアクセシビリティの基本：ランドマークロールを理解する
ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです
この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。 期待と異なる読み上げ スクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。 現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt> <!-- リスト 1/4 りんご --> <dd>バラ科の落葉高木</dd> <!-- リスト 2/4 バラ科の落葉高木 --> <dt>みかん</dt> <!-- リスト 3
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
[htmx](https://htmx.org/) という JavaScript のライブラリが、[2023 JavaScript Rising Stars : Front-end Frameworks](https://risingstars.js.org/2023/en#section-framework) で 2位 に...
【海外記事紹介】オープンなローカルLLM「GLM-4.5」に「インベーダーゲーム作って」と頼んだら、古いラップトップでも完璧なHTML5ゲームが出力される
コマンド例（コードサンプル） uv run \ --with 'https://github.com/ml-explore/mlx-lm/archive/489e63376b963ac02b3b7223f778dbecc164716b.zip' \ python from mlx_lm import load, generate model, tokenizer = load("mlx-community/GLM-4.5-Air-3bit") prompt = "Write an HTML and JavaScript page implementing space invaders" messages = [{"role": "user", "content": prompt}] encoded = tokenizer.apply_chat_template(messages, add_
Chrome Devtools使いこなしたい/I want to master devtool
みんなの技教えて
ネガティブマージンの使いどころ
はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。 ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。 ネガティブマージンの使いどころ ネガティブマージンの使いどころとして
読むとワクワクする！ 最近見かけるHTMLとCSSのさまざまな実装テクニックがまとめられた解説書 -改訂新版 HTML＆CSSデザインレシピ集
※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリの実装で必要となるHTMLとCSS、レイアウトのテクニック、ナビゲーションやボタンなどのUI要素、アニメーションやエフェクトなど、最近見かけるHTMLとCSSの実装テクニックがまとめられた解説書を紹介します。 700ページを超える本書は中級者向けですが、実例も豊富で詳しく解説されているので、初心者にもわかりやすいと思います。 本書はベストセラーとなった「HTML＆CSSデザインレシピ集」（紹介記事）の待望の改訂新版！ 最近のWebサイトやスマホアプリのUIで使用されているHTMLとCSSのさまざまなテクニックが詳しく解説されています。 前書も分厚かったのですが、さらにパワーアップして、なんと720ページ！！ 辞書のようにかなり分厚いですが、簡単に見開きにできる製本になっています。もちろん、内容もパワーアップしてい
この記事では、NotionとWraptasを使ってサイトを構築するまでの過程を紹介します。 まずはNotionページを最終的にどのような見た目に変えられるのかを紹介したいと思います。 左がBeforeのNotionページ、右がAfterの公開サイトになります。 キービジュアルとイベントの概要の箇所 Notionのテーブルのセッション情報 開催概要とマップの埋め込み、フッター部分のTwitter埋め込み 背景 クラスメソッドでは、技術セッションイベント「DevelopersIO」を毎年開催しています。そして、そのセッション数は年々増加し、近年では100を超えるまでに成長しました。 私は毎年、全セッション情報が掲載されるイベントサイトの制作を担当してきました。これまでセッション情報はスプレッドシートで管理されてきました。登壇者が各々にスプレッドシートにセッション情報を書き込み、そのスプレッドシ
Firecrawl - The API to search, scrape, and interact with the web at scale. 🔥
1[ 2 { 3 "url": "h=t*A:!/z!aap?A-cZz", 4 "markdown": "# ?0z-ang S*a-Z-a0*9", 5 "json": { "title": "G!=*?", "docs": "..." }, 6 "screenshot": "ht-=*:/?*Za!zl=-?a9?h0-!.png" 7 } 8]
Web 標準動向 2026年7月版
こんにちは！ サイボウズ株式会社 フロントエンドエンジニアの mehm8128 (@mehm8128) です。 はじめに サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 HTML Intent to Prototype: <input type="checkbox" switch> input要素をトグルスイッチとして扱
要素の色を背景と反対にする
<main style="padding-bottom:200vh;"> <p class="hoge" style="font-size:4rem;">三</p> <div style="background-color:black; height:200px;"></div> <div style="background-color:white; height:200px;"></div> <div style="background-color:black; height:200px;"></div> <div style="background-color:white; height:200px;"></div> </main>
世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
タイトルは上記画像にあるような普通にキーボードにあるEnterキーと、 テンキーの右横にある小さいEnterキーのことです。 私の担当しているシステムではEnterキーを押すとフォーカスが移動する仕様があります。 経験上、このような仕様は多数のデータ入力があるシステムにおいて好まれる傾向を感じます。 キーボードから手を離さなくていいからですね。 正直なところフォーカス移動ならTabだろうと思いますが、まあそこは長年の習慣だと思います。 この仕様をJavaScriptで実現していたのですが、なんか違和感を感じて調べたところ JavaScriptにおいてキーボードにある普通のEnterキーとテンキーの右横にある小さいEnterキーは別物であることに気づきました。 <html> <head></head> <body> </body> <script type="text/javascript"
![[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc83587733cecb12507cfc1c94bd0370fa1ecdad/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--NoFtHnTa--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%2525E5%2525A4%2525A7%2525E3%252581%25258D%2525E3%252581%252584Enter%2525E3%252581%2525A8%2525E5%2525B0%25258F%2525E3%252581%252595%2525E3%252581%252584Enter%2525E3%252581%2525AF%2525E5%252588%2525A5%2525E7%252589%2525A9%2525E3%252581%2525A7%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%2525E3%252581%2525AB%2525E6%2525B0%252597%2525E3%252581%2525A5%2525E3%252581%252584%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASatoshi%252520Kaneyasu%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Y5MGU0N2Y1ZWMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提おわり 本題 規格によると 4.5. Character range: the unicode-range descriptor 4.5.1. Using character ranges to define composite fonts 実験する 準備 実験方法 実験結果 まとめ 前提 本題に入る前に、Webフォントを配信する際の前提について説明します。分かっている方は読み飛ばしてもらって大丈夫です。 Webページ上で独自のフォントを読み込むには CSSの font-family 属性に使いたいフォント名を書くことで、Webページ上のコンテン
HTMLのdialog要素を利用すると、モーダルダイアログをシンプルに実装できます。dialog要素は、2022年頃から主要ブラウザで利用可能です。 モーダルとは、表示している間は他の操作をできなくするUIを指します。dialog要素の登場以前は、次のような制御を自前で用意する必要がありました。 画面の最前面にモーダルUIを表示 モーダルUIが表示されている間、ほかの操作を制限 モーダルUI開閉時に、フォーカス位置を調整 こうした複雑さについては記事『HTMLでモーダルUIを作るときに気をつけたいこと』でも解説しています。苦労してきたフロントエンドエンジニアは多いでしょう。 HTML標準のdialog要素を利用すれば、シンプルかつ一貫した方法でモーダルダイアログを扱えるようになります。本記事では、dialog要素の基本的な使い方を紹介します。 本記事で紹介すること： dialog要素の基本
書籍「HTML解体新書」、満を持してついに登場 - 弁護士ドットコム株式会社 Creators’ blog
5年——。 編集チーム連絡用のSlackに初の投稿があったのが2016年12月29日ですから、正確には5年と3ヶ月。そんな長い執筆期間を経て、ようやくみなさまにお届けできることになりました。それがこの書籍、「HTML解体新書 - 仕様から紐解く本格入門」です。 「HTML解体新書」カバー画像 ご購入、ご予約は以下からどうぞ! Amazon ボーンデジタル(紙版) ボーンデジタル(PDF版) ということで、こんにちは、弁護士ドットコム技術戦略室セキュリティチームの太田と申します。普段はWebのアクセシビリティ関連やセキュリティ関連の仕事をしているのですが、このたびHTMLの本を出版することになりました (もっとも、この本は入社前から書いていたもので、普段の業務と直接の関係はありません)。 この記事では、本の内容や執筆の経緯についてご紹介します。最後まで読むと、少しお得な情報があるかも……?
width:100%とmarginを組み合わせたときに、親要素の幅を超えてしまうことがある。その場合、margin分を減算してwidthに設定する必要がある。そんなときにwidth:stretchを使うと、marginの計算なしで親要素の幅に合わせられる。ただし、執筆時点ではChrome 138/Edge 138のみサポートしている。Firefoxは-moz-available、Safariは-webkit-fill-availableのベンダープレフィックス付きのキーワードが必要。
リンク コンポーネントの例 概要とモチベーション Camome UI はひとことで言うと「抽象度の高い UI コンポーネント集」です。 Bootstrap や MUI などのフレームワーク・ライブラリの類とは異なり、網羅的・汎用的なパーツを提供することが目的ではありません。つまり Button や Input や、もう少しハイレベルな Navbar などを高いカスタマイズ性とともに提供するつもりはありません。 それよりも「LP のこの部分にコピペすればサクッと決まる」ような体験を重視しています。UI デザインといっても、多くの場合はそれほど変わったものが求められるわけではなく、使い回せるものが大半だと思います。 要するに「デザインの常套句」みたいなものが存在するわけです。Camome UI はそういう「よくある」デザインをたくさん収録することを目的としています。 プログラミングは得意でもデ
HTMLとCSSだけでMinecraftを再現
「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。 CSS Minecraft https://benjaminaster.com/css-minecraft/ 上記のページにアクセスすると以下の画面が現れます。 用意されているブロックは全部で7種類。左下から選んでフィールドをクリックすると設置できます。 右下のボタンをクリックするとフィールドの位置を変えられます。「Vertical」で垂直方向への視点移動、「Horizontal」で水平方向への視点移動、「Rotation」でフィールドの回転、「View」で視点の上下移動ができます。 左下のツルハシをクリックしてからブロックをクリックすると、ブロックを削除できます。 ブロックを設置できるのは9×9×9マスの間のみ。 最初からあるブロックを横に伸ばすことはできませんが、削ったり、新しいブロックに置き
3点リーダーとは 3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。 3点リーダーを実装するために必要な4つの設定 1、ボックスのwidthの指定 テキストが表示される領域の幅を指定します。 2、white-space: nowrap; テキストの改行を禁止し、1行で表示します。 3、overflow: hidden; テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。 4、text-overflow: ellipsis; 非表示の溢れた部分を3点リーダー（...）で表示します。 See the Pen Untitled by kidorina (@kidorina) on CodePen. 簡単に長いテキストを省略することができます。 Table内での3点リーダーの挙動 Table内で3点リーダー
JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロールさせるなど、使ったことがある方も多いと思います。 スムーズスクロールの課題として一番大きなものは、スクロールの完了後に行う処理が書きづらいことです。Chrome・Edge 150から使えるプログラマティック・スクロール・プロミスでは、今までscrollendイベントの監視やsetTimeout()メソッドなどで検知していたスクロール完了を、Promiseを使って制御できるようになります。 スクロール完了をPromiseであつかう Promiseは非同期の
HTML Living StandardとモダンCSSに完全対応！ 使いやすくて見やすい、期待以上のリファレンス本 -HTML＆CSS全事典改訂4版
※本ページは、アフィリエイト広告を利用しています。 本書の改訂版がでるのを待っていた人も多いと思います。私もその一人です。 前書から2年が経ち、その間にも多くのHTMLの要素やCSSのプロパティが増え、この改訂4版では100種類以上の項目が追加されています。 本書はHTMLとCSSのリファレンス本としてだけでなく、補足情報やテクニックの解説もかなり充実しており、Web制作者なら必ず持っておきたい一冊です。手元にあるリファレンス本が古いなと思った人には、特にお勧めします。 HTMLとCSSが好きな人なら本書でご飯3杯は軽くいけます！！ 本書は2015年に刊行されて以来、ベストセラーを続けている「HTML＆CSS全事典」の最新版、改訂4版です。2024年11月現在の仕様にあわせて全面改定されており、HTMLとCSSのリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い
wkhtmltopdfの次どうするか問題 - おもしろwebサービス開発日記の続き。 上の記事でも書いていますが、令和の今RailsアプリケーションでPDFを生成する基本的な方針としては次の2択だと思っています。 chromeを使ってHTMLからPDFに変換する Thinreports などで直接PDFを生成する 「chromeを使ってHTMLからPDFを生成する」のgemとしてはgroverが有名ですね。だけどこれはruby -> puppeteer -> chromeという構成で、間にnode製のツールであるpuppeteerが挟まっています。 ferrum はrubyから直接chromeを扱うgemなので、これを利用するとnodeが不要になるしメモリ消費量も多少下がるはずだしいいじゃん、と前記事を書いているときは思っていました。しかしferrumはあくまでchromeを操作するのが目
NTT Security
ページの内容を繰り返さず、画像の目的を伝えるaltテキストを書こう。ビジュアルの説明よりも意味を重視しよう。 Alt Text: Not Always Needed by Emma Cionca and Tanner Kohler on November 15, 2024 日本語版2025年5月27日公開 altテキスト（代替テキスト）とは、スクリーンリーダーのユーザーが画像の内容を理解できるようにするためのメタデータである。altテキストの書き方に関するガイドラインの多くは、ウェブ上の個々の画像をすべてのユーザーにとってアクセシブルで理解できるものにする方法について説明している。これは言うほど単純なことではない。というのも、ユーザーはページ上の多くの要素とインタラクトしながら複雑なタスクを実行する過程で、altテキストに遭遇するからだ。画像はタスク全体の一部にすぎないのである。 ユーザー
外部リンクへの接続などを高速化する「dns-prefetch」、安定して使えるWeb標準「Baseline」に
外部リンクへの接続などを高速化する「dns-prefetch」、安定して使えるWeb標準「Baseline」に 主要なWebブラウザで安定して利用できるWeb標準としてラベル付けされる「Baseline」に、「dns-prefetch」が入ったことが発表されました。 外部ドメインの名前解決をあらかじめ実行 通常、HTML内で外部ドメインなどへのリンクが記述されている場合、リンクがクリックされた時点など、そのリンクへの参照が開始される場面でドメイン名の名前解決が行われ、接続が開始されます。 一方で、今回Baselineとなったdns-prefetchをHTMLのヘッダ部に記述しておくと、あらかじめdns-prefetchで指定された外部ドメインに対する名前解決が行われます。 そのため、その外部ドメインへのリンクがクリックされた場面などで名前解決がすでに済んでいるために、外部ドメインへの高速な
「HTMLクイックリファレンス (htmq.com)」という老舗サイトに2024年10月下旬頃?からオンラインカジノ広告があふれかえっています。別サイトを伝手に原作者の方にご連絡したところ、2024年4月頃にコンテンツとドメイン名を譲渡したとのことでした。 かつてのHTMLクイックリファレンスを見る (Wayback Machine) サイトの変化に驚きましたが、どうやら攻撃を受けたわけではなく、運営者の変更で方針が変わったということのようです。 HTMLクイックリファレンスの原作者の方と連絡が取れました。4月頃にコンテンツと https://t.co/tEmb2KlKHk ドメイン名を譲渡したそうです。 譲渡した時点では現在のような内容への変更は知らされていなかったとのことで、現在は制作や運営からには関わっていないとのことでした。 悲しいね！😭 https://t.co/qObKWax
計測方法と結果 以下のようになlazy loadが発火した時点でのソースと画面中央の距離(px)を測るページを用いて、iframeと画像の二種類のソースを対象に4000pxのdiv要素とボタン以外に何も読み込まれていない状態とすでに画像が読み込まれている状態との二つの状態を掛け合わせて計測しました。 import React, { useState, useRef } from 'react'; export default function Home() { const iframeDistance = 4000; const [showImage, setShowImage] = useState(false); const imageRef = useRef(null); const toggleImage = () => { setShowImage(!showImage); };
ファンタラクティブのエンジニアの 太田 です。 数値入力コンポーネントを作成する際に type="number" を使用するのをやめたことについて書きます。 input[type="number"]とは input[type="number"] (PC) input[type="number"] (スマホ) 数値を入力するためのinputで半角数値以外の入力を除外する 問題 validな数値しか受け付けない 数値以外の値が入力できないためTypeScriptでも扱いやすくよさそうに思えますが、使用するユーザーは戸惑うことがあるようです。 実際にあった問い合わせや、問い合わせから想像する状況は以下のようなものです。 入力できない (全角入力してる) 確定したら値が消えた (全角入力してる) ペーストできない (全角でペーストしてる) キーボードではなく、UI上の▲▼で入力しないといけないと思
![input[type="number"]をやめた話](https://cdn-ak-scissors.b.st-hatena.com/image/square/cff967c044ae47754e68264f97d3ac3370f53536/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fy7q8dkG--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ainput%25255Btype%25253D%252522number%252522%25255D%2525E3%252582%252592%2525E3%252582%252584%2525E3%252582%252581%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
Franken UI
Franken UI Franken UI is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by shadcn/ui.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Systemd ユニットのセキュリティスコアを改善する
コピぺするだけ！すぐに使える魅力的なWebテキストエフェクト40選 | PhotoshopVIP
headタグの中に記述していいHTML要素と記述してはいけないHTML要素
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Twitterサ終で個人サイトに戻ろうとしてるアラサーへ。かつてお世話になった<font>などのタグはもう使えません
dl/dt/ddのスクリーンリーダーの読み上げをなんとかする
今年のイベントサイトはNotionとWraptasでできている | DevelopersIO
https://twitter.com/8Ero3NL5CeP8FO5/status/1544548957082505216
教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック12選
テキストを1文字ずつアニメーションさせる時の注意点と実装例 – TAKLOG
[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた
Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか - 私が歌川です
モーダルUIをシンプルにできる！ 進化を続けるHTMLのdialog要素 - ICS MEDIA
width:100%の代わりにwidth:stretchを使う | ダーシノ(@bc_rikko)
LPやWeb製作を高速化するUIコンポーネント集を作った
Table内の3点リーダーってどういう仕組み？max-width: 0ってﾄﾞﾕｺﾄ？ - Qiita
スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA
続・wkhtmltopdfの次どうするか問題 - おもしろwebサービス開発日記
altテキスト：必ずしも必要ではない
HTMLクイックリファレンスの怪しい広告と運営譲渡の話 - ごちゃペディア
HTMLのLazy Loadの挙動がブラウザによってかなり異なるので違いを実測して確かめてみた
input[type="number"]をやめた話
findy-code.io
kanade.ht.gob.jp
www.gadget2ch.com
www.apple-hacks.com
bunshun.jp
atmarkit.itmedia.co.jp