自己紹介 https://x.com/mizchi Node.js とフロントエンドの専門家 経歴 ゲームクライアント開発 Electron アプリ開発 サードパーティスクリプト フリーランス(2回目) 現在: 1ヶ月でパフォチュする傭兵 Core Web Vitals CI/CD 今日のスコープ 話すこと 主にフロントエンド/アプリケーション視点での計測 とくにエンドユーザーから見たウェブパフォーマンス体験 話さないこと 各クラウドやDBに特化したチューニング 結果として観測できるが、最初からターゲットにはしない パフォーマンス傭兵を始めた経緯 前職でサードパーティがサイト全体に与える影響(CWV)について調査 とにかくいろんなサイトを外部から計測 真の問題を特定しても「弊社とは無関係」で打ち返す以外なく、歯痒い コスパよく直せる部分をみんな放置している！！！ 非機能要件の優先度が上がら
SQLを学習できるサービス「SQL道場」のご紹介
はじめに はじめまして、DMMで電子書籍のデータ分析をしている栃沢と申します。 日々、キャンペーン・クーポンの効果検証、UI改善、ABテスト設計などの仕事をしています。入社当初は「長くて複雑なSQLクエリを書く」ことに苦労しました。（もちろん今もですがw） データ分析の現場では、基本的なSQLの知識だけでは不十分だと感じています。 実務では、複数のテーブルを結合したり、サブクエリやウィンドウ関数を駆使したりと、より高度なSQLのスキルが求められます。しかし、これらを独学で習得するのは容易ではないと思います。 SQLを学べる書籍やオンラインサービスなどあることにはあるのですが、ほとんどがソフトウェアエンジニア向けであり、データアナリストが実際の業務で必要とするSQLを学べる場は少ないと感じています。 こうした背景から、データアナリストやビジネスアナリスト向けに、より実務に直結するSQL学習環
現時点の AI コーディングの実力を測るために、自分はプロンプトのみ、直接コードを書くのは禁止で Roo Code による VS Code によるエディタ操作のみでコードを書かせた。その感想 (急いで書いたのでいろいろと雑です) tl;dr 良し悪しはともかく、人類は確実にAIによる自動操縦型のプログラミング体験に依存するという確信を持った。 ただ、その基盤である CLINE(系)自体のツールとしての完成度はいまいち。 CLINE以外の、各モデルのコーディング性能も、現時点では物足りない。 CLINE とは何か(知らない人向け) いろいろと機能はあるが、コア機能としてはヘッドフルな vscode runner で、AI にコードを書かせるために必要な情報を受け渡しするインターフェースを持っている。ファイルの読み書きや、コマンドを実行結果をプロンプトにしてAIに渡す。puppeteer によ
はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ
漫画商業連載の話を不安定な子に打ち明けるか悩む
高校生と中学生の子を持つ２児の母親なんですが。 タイトルの件で悩んでます。 【漫画の商業連載の話をもらってるんだけど、不登校になるかもしれない子に打ち明けるか悩む】 ちなみに中学生が不登校、になるかもしれない。 私は商業経験ゼロ、お絵描きや漫画が好きなただのオタクです。 二次創作や一次創作などを気の向くままSNSにアップし楽しんでいたら、ありがたいことに商業連載のお話を頂きました。 ぜひやりたいけども、これって子どもにどこまで開示するべきなんだろう。 ちなみにエロ系ではありません。 中学生の子は思春期と反抗期真っ只中で、友人は多いもののやや不安定なところがあり、時々学校を休みがち。 上の高校生も不登校経験者で、まだ少し危なっかしい。 そのため私は外勤するのが難しく家計は火の車。 でも子どものフォローを出来るのは私しかいないので外勤でのキャリアは諦め、在宅で別分野の仕事を細々とやっていたとこ
はじめに 開発業務で「情報収集」や「タスク自動化」をするときにスクレイピングやクローリングを用いる場合があると思います。一時期私もスクレイピング関連の本を読んでBeautifulSoup, Seleniumなどを使って自動化をしましたが、CSSセレクタを指定していくのが大変だったり、DOM構造が変わると動かなくなったりと、色々苦労した覚えがあります。 そんな時、browser-useという面白そうなライブラリを見つけたので、この記事では、browser-useを使ってみた内容を自分用のメモとして残そうと思います。 browser-useとは？ browser-useはAIを使ってブラウザ操作を自動化してくれるツールです。 このツールは、Pythonを使ってブラウザで実行する操作をテキストで渡してあげると、AIがそのテキストに基づき操作を行ってくれます。そのためスクレイピング/提携業務の自動
ほとんどのサービスとアプリケーションには、制限の大きなお試し版とも言える無料プランと、制限の緩和された有償プランがあります。さらに、有償プランのトライアルや、グループ開発向けのEnterpriseプランが用意されていることがあります。個々のサービスおよびアプリケーションについての料金体系の掲示は省くので、関心のあるものについてはまず無料プランから試すことをお勧めします。 アプリケーション構築は、多くの手順を必要とすることから比較的難易度の高い作業です。専用のウィザードがステップ・バイ・ステップで構築をフォローするスタイルは、今では「やりたいこと」を述べるだけでAIが代行してくれるようになりました。デザインも、直接アプリケーション構築に持ち込むことができます。 スタイリッシュなUIを生成するv0 ▲v0 v0（ブイゼロ）は、Next.jsの開発元であるVercel Labsによる、AIを活用
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024年のアドベントカレンダーで、マークダウン記法で記述して簡単にウェブサイトやアプリが作れるMarkdownAIというサービスを知りました。 そこで、お出かけ先でもスマホで楽しめる子ども向け動物園アプリをMarkdownAIで試作してみました。 作ったもの「MarkdownAI動物園」 今回作成したのは「MarkdownAI動物園」というスマホで使える、簡単なアプリケーションです。 以下のリンクから実際にアプリを使えるのでぜひ試してみてください。 MarkdownAI動物園 ※スマホで使う想定のため、PCだと見づらい部分があります
こんにちは！某製造業で新米DXエンジニアをしているものです。 先月から Rust の学習を始めました。 学習している理由としては 今までインタプリタ言語を使ってきたので、コンパイル言語に挑戦したい 爆速で動くコードを書きたい ネイティブアプリの開発をしてみたい WebAssembly を使えるようになって、Web アプリ開発の幅を広げたい といったところです。 そんな中、Rust でデスクトップアプリを開発するために Tauri を使ってみました。 正月の暇をつぶすために軽い気持ちで始めましたが、色々苦しんだので備忘録を残しておきます。 今回は長くなりそうなので、目次をご活用ください m(._.)m アプリの概要 今回作ったアプリは、ざっくり言うと 主要形式の画像を次世代拡張子である AVIF,WEBP に圧縮、変換するデスクトップアプリです。⚡️ 制作期間は5～7日くらいです。 GitH
「アン・シャーリー」に太田光さんの出演が決定
「アン・シャーリー」に太田光さんの出演が決定公開：2025年2月7日(金)午後0:00 共有 申込みフォームはこちら（PC・スマホ）前回記事：キービジュアルと映像を公開X（旧twitter）NHKアニメNHKアニメ
エディタ選びのポイント、ITエンジニア人生を左右するツールのいろは ——Software Design 2025年3月号の特集記事を先行公開 『Software Design 2025年3月号』（2025年2月18日発売）の第1特集「コードエディタ大研究」の序章の記事を発売に先駆けて公開します。ぜひ本誌にて、この後に続く章もお読みください。 はじめに みなさんはプログラマーでしょうか、それともマネージャでしょうか？ ソフトウェア開発の会社であればテキストエディタは必需品のはずです。テキストファイルを開いたり、ログを確認し加工したり、プログラミングしたり、あらゆる場面でテキストエディタが登場します。 そして多くのプログラマーは、自分のお気に入りのテキストエディタを決めており、そのテキストエディタの設定や、バージョンアップなどに多くの時間を費やします。それほどまでに我々ITエンジニアに
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
Origin UI - Beautiful UI components built with Tailwind CSS and React
Beautiful UI components built with Tailwind CSS and React.A collection of copy-and-paste components for quickly build application UIs. Quick search...
画像のalt属性に何を記述すればよいか、悩むことはありませんか？ その一つの答えがWAIによるチュートリアルにありました。画像にテキストが含まれている場合はどうすればよいか、リンクやボタンとして使用している画像なのか、装飾的な画像のaltは空で本当によいのか、などWAIによる方針が分かります。 An alt Decision Tree 下記は各ポイントを意訳したものです。 ※WAIのライセンスに基づいて翻訳しています。 画像のalt属性の書き方 1. 画像にテキストは含まれていますか? 2. 画像はリンクやボタンで使用されていますか？ 3. 画像は現在のページやコンテキストに意味を与えていますか？ 4. 画像は装飾的なものですか？ 5. 上記以外の画像の用途ですか？ 画像のalt属性の書き方 このディシジョンツリー（決定木）では、さまざまな状況における画像<img>要素のalt属性の書き方
はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog
先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試したかった 2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要でエンジニアが自由に試せる環境が用意されています。もちろん費用は会社が出してくれて、常識的な範囲で使ってねということになっています。2年くらい前にCloudflareも追加してもらい、社内で自由にCl
1/25土曜日に開催される技書博11に、サークル親方Project（いー11）に委託で久々に本を出します。その名も「Vivliostyleで技術同人誌を始めよう」です。ページ数は86ページで、金額は500円です。 つまり「Markdownでお手軽に高品質な技術同人誌を出す方法」を実践して、それについて書いた本です。このメソッドを広めたく、戦略的な金額（印刷費ギリ）にしていて、なおかつリポジトリも公開しています。 まずは実際にどういう品質なのか見てください 扉です目次です目次と、第一部の中扉です本文です本文ですどうですか？めっちゃ良くないですか？既存のRe:VIEW以外でのPDF作成を思えば段違いのクォリティだと思います。 なお、この装丁はVivliostyleのテーマファイルという手法で作られているのですが、最初は思いつきで僕が開発し始め、途中からはもっとさんが本格的にCSSをいじってくれ
Ubie株式会社のyagiです。普段はソフトウェアエンジニアとしてプロダクトの開発をしています。2/7(金)にGithub Copilot Agentが解禁され、社内においてはGithub Copilot Businessを利用しているメンバーで利用が可能になりました。Github Copilot AgentはCursor ComposerやClineと概ね似たことができ、エージェントに指示をすると目的を達成するまで自律的にコードの編集等をエディタ上で行ってくれます。 Github Copilot Agent、Cursor、Clineでそれぞれ細かい機能差はありますが、もはやほとんど気にするようなことではなくなってきたなと感じました。そこで、Github Copilot Agentを駆使すると、開発がどのようになるのか一週間実験してみました。 進め方特になし。何でもかんでもGithub C
BigQueryのアンチパターン認識ツールで独自のSQLリンターを開発しました - ZOZO TECH BLOG
こんにちは、株式会社ZOZOで25卒の内定者アルバイトをしている村井です。この記事では業務で取り組んでいる、BigQueryで使うSQLのリンターの作成方法について紹介します。 目次 目次 課題と解決策 課題 解決策 BigQueryのアンチパターン認識ツール ミニマムな使い方 日本語がSQL内に含まれている際の問題 アンチパターンを定義する リンターとしてBigQueryのアンチパターン認識ツールを使用する際に生じる課題と解決策 構成 APIサーバ化 Chrome拡張 動作例 まとめ 課題と解決策 課題 社内では様々なチームがSQLを書いており、動作はするものの良くない書き方をしている場合があります。そういった構文を検知して、前もって修正する必要があります。 解決策 BigQueryのコンソールで入力されたSQLの不正構文を検知、修正案を提示できるようにしました。 BigQueryのアン
Onlookとは 「Onlook」は、ReactおよびTailwind CSSを使ったWebサイトやWebアプリを、Electron製デスクトップアプリ上でFigmaのように直接デザイン編集し、その内容を即時にコードへ反映させることを目指すツールです。 onlook.com 類似の“サイトコーディング自動化”ツールが数多く存在する中で、筆者がOnlookに注目した理由は、多くのロジックがクライアントサイドで動作し、その内部構造がオープンソースであることです。内部の動きを追いやすく、自分のプロジェクトへカスタマイズを施すうえでも学びが多い点が魅力といえるでしょう。 反面、Onlookはまだまだ完成度が高くないという点があります。まだ作り途中のプロダクトという印象です（スクリーンキャストをRPして大袈裟に宣伝している人がいたらたしなめておきましょう）。いくつかの機能は開発中のまま動作しません。
テスト自動化への心理的障壁がエベレストなSET1年生が記述レベルMAXな自動テストスクリプトを書けるわけがない - Tabelog Tech Blog
はじめに 課金戦士は恐怖した。必ず、テスト自動化の実装をできるようにならなければならぬと決意した。課金戦士にはコードがわからぬ。課金戦士は、QAエンジニアである。テストケースを作成し、テスト環境に弄ばれて暮して来た。けれどもテスト自動化という未知に対しては、人一倍に敏感であった。 テスト自動化への心理的障壁がエベレストなあなたも、日和山なあなたも、はじめまして。 食べログの品質管理室、SETチームに生息している課金戦士と申します(課金機能を担当している戦士ではなく、アプリゲーム課金を趣味として赤字と戦い続ける戦士です)。 ちなみにSETとは、「Software Engineer in Test」のことを指します。つまりSETチームとは、ソフトウェアの品質保証とテスト自動化に特化したエンジニアのチームです。 課金戦士は、SETチームの一員として、約1年半テスト自動化に携わってきました。 今回
画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。 Get the screen width & height without JavaScript まず、元ネタは以下です。 Get the screen width & height without JavaScript CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。 @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。 HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。 CSS attr() gets an upgrade by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめ
AI エージェント界隈で話題の MCP の凄さ実感！ー その特徴・技術概要・今後の展開 ー「メタ AI エージェント」実現なるか？
MCP が盛り上がってるらしい… Anthropic が 2024年11月に発表した「Model Context Protocol（MCP）」ですが、AI エージェント界隈で結構な盛り上がりを見せています。そこで、その特徴や技術概要、将来の展望について、実際にコーディングした経験も踏まえてまとめてみようと思います。今後の開発の方向性を見るにつけ、MCP が切り開こうとしている世界とその可能性に、とてもワクワクしています。希望的憶測だと、たぶん 「メタ AI エージェント」「自律進化型AIエージェント」 にまでつながります！（後述） では手始めに、MCP について少々… MCPとは、雑に言うと、LLM が外部ツールやリソースを扱えるようにして、生成 AI の適用範囲を劇的に拡大するための オープンソース技術です。 この技術は「AI エージェント」と非常に相性が良いです。たとえば「マーケティン
フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。 CSSはわずか4行ですが、モダンCSSのテクニックがたくさん詰まっており、フルブリードレイアウトはさまざまなカスタマイズにも対応しています。 Full-Bleed Layout with Modern CSS by Temani Afif 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フルブリードレイアウトを実装するCSS html要素をコンテナにする理由 margin-inlineで何をしていますか？ CSSの別の書き方 全幅のコンテンツを同じ幅に制限する 終
#Offers_DeepDive 「CSS設計完全ガイド／Tailwind-CSS実践入門著者に聞く 負債にならないCSSの書き方とは（2025年2月12日）」での登壇資料です。 https://offers-jp.connpass.com/event/342125/
Tailwind CSS v4.0
Holy shit it's actually done — we just tagged Tailwind CSS v4.0. Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer. New high-performance engine — where full builds are up to 5x faster, and incremental buil
【Chrome】いちど拒否した位置情報やカメラの権限を何度も何度も何度も何度も何度も何度も何度も何度も要求できるようになる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 現在のブラウザは、いちどカメラやPUSH通知の権限要求を拒否すると、その後要求プロンプトを出すことができません。 Webサイトができることは、『〇〇を許可してください』とウィンドウを出すことくらいです。 ↓人類史上最悪の許可要求ウィンドウの例 この後設定欄から各機能を有効化するためには、ユーザによる絶対的能動的な操作が必要となります。 また、プライバシーとセキュリティ設定から許可しない設定をしておくと、たったの一度すらもチャンスが与えられず、一生権限を要求することはできません。 結果としてPUSH通知の権限要求などは、9割以上のユーザが
農水省の備蓄米放出には「転売ヤー」対策の狙いがある？GWまでに価格が下がらなければ「転売業者の米がダメになる」か「本当にない」か説
NHKニュース @nhk_news NHKニュースの公式アカウントです。最新のニュースを24時間休みなくお届けします。 nhk.jp/rules をご確認、ご了承ください。問い合わせは nhk.or.jp/css/ nhk.jp/news NHKニュース @nhk_news 江藤農林水産大臣は政府の備蓄米21万トンを市場に放出する方針を正式に発表しました 必要であればさらに拡大することを考えているとしています コメの流通の円滑化を目的に政府が備蓄米を放出するのは初めてです ▼詳しい情報は NHK NEWS WEBで▼ www3.nhk.or.jp/news/html/2025… #nhk_video pic.x.com/OoPDxdqhCR 2025-02-14 10:24:35
“バズらせ名人”の苦悩。れとるときゃりー氏が向き合う、個人開発サービスの残酷な壁【フォーカス】 レバテックラボ（レバテックLAB）
“バズらせ名人”の苦悩。れとるときゃりー氏が向き合う、個人開発サービスの残酷な壁【フォーカス】 2025年2月6日 個人開発者 れとるときゃりー Webエンジニア・デザイナー。個人開発者として、学生時代にTwitter（現X）に特定の投稿を促すボタンをつくれる「みんなのボタンメーカー」や、フォロワーと手軽に通話できる「TwiCall」など、様々なWebサービスを開発し話題を集める。「TwiCall」をAppBrew社に事業売却後、同社にJoinし、2021年4月から2023年5月までPdM・Webエンジニアとして活動。2023年6月よりフリーランス。 X 個人開発者のれとるときゃりーさんは、大学生時代に数々のWebサービスやアプリを開発し、SNSを中心に脚光を浴びてきました。2018年に公開した「みんなのボタンメーカー」というサイトは連日Twitter（X）でトレンド入りする大反響。202
Google Chromeの開発マネージャーであり、The CSS Working Groupのメンバーでもあり、VisBugやOpenPropsなどの開発者でもあるAdam Argyle氏による、2025年のUI/UX案件に役立つCSSのスニペットを紹介します。 一手間加えてCSSアニメーションを気持ちよく動かすスニペット、大きく進化したCSS変数の効果的な使い方、簡単にできるページ遷移、ポップオーバーやdetailsの遷移アニメーション、これまでより美しいCSSグラデーションの実装など、次のプロジェクトで試してみたいことばかりです。 6 CSS Snippets Every Front-End Developer Should Know In 2025 by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳していま
遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab
はじめまして、川口（@kazu_pon）です。私はソフトウェアエンジニアとして現在株式会社プレイドで働いています。OSS活動としては、Vue.jsコアチームメンバー、Nuxtエコシステムメンバーであり、Vue.js 日本ユーザグループ、そしてVue Fes Japanというカンファレンスのオーガナイザーをしています。 この記事では、日々の仕事をこなしつつOSSとどう出会い、どのようなOSS活動をしているか、これらの両立をどうやって築いていったのかなど、私のこれまでのソフトウェアエンジニアとしてのキャリアを振り返りつつ紹介します。 プロのソフトウェアエンジニアとして働くということ 始まりはゲームを作ってみたいという想いから 私がソフトウェアやIT業界に興味を持ったのは、幼少期に遊んでいたテレビゲームがきっかけでした。小学校の頃はファミリーコンピュータが全盛期で、ゲームがどうやって作られている
こんいす！バックエンドエンジニアのogatasoです。 今回は12月8日に開催された ISUCON14 に、私とshirakawaさん、yamakuraさんの3人でチームMirrormanとして参加しました。全員ISUCON未経験の状態から挑戦し、楽しく学びの多い体験になったので、この記事で共有したいと思います。 ISUCONとは？ ISUCON とは「Iikanjini Speed Up Contest」の略で、与えられた遅いWebサービスを制限時間内にどれだけ高速化できるかを競うコンテストです。 パフォーマンス改善を目的にインフラからアプリケーションまで多くのレイヤーに跨る技術知識を要求される総合格闘技的なところが魅力です。 ミラティブはISUCONのスポンサーであり、スポンサー枠が割り当てられていましたが、ISUCON経験者はすでに自分で枠を取っていたため余っており、私たちはmaki
前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基本となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載
103 Early Hints とは何か？ ～マイナーだけど革新的なHTTPステータスの世界～ - Repro Tech Blog
はじめに みなさまこんには。日々 Booster で楽しくコードを書いている杉浦(sugi) です。 Booster プロジェクトではタグを入れるだけでサイトを高速化できる「Repro Booster」という製品を作っていますが、そのためにも日々さまざまな最適化手法を調査・模索しています。 その中で個人的に期待しているのが、 103 Early Hints というHTTPステータスコードです。 この記事では Repro Tech Meetup #9 で行った発表(資料)を元に、103 Early Hintsはどのような仕組みなのか、なぜ高速化につながるのか、さらに現状の実装に関して解説します。 ちょっとマイナーな内容ですが、知っておくとウェブパフォーマンス最適化の大きな武器になるかもしれません。 103 Early Hintsの背景 従来のHTTP通信の課題 通常のHTTP通信においては、
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに このような記事を書くのは初めてなので、温かい目で読んでいただけると幸いです。 この記事では、私が通う学校で運行しているスクールバスの現在位置を確認できるシステム（サービス？）の開発記録を残しておこうと思います。 システムを開発するまでに至った経緯 多くの児童・生徒がスクールバスを利用している 私が通う学校は、幼稚園・小学校・中学校・高等学校をもつ学園であり、多くの児童・生徒が在籍していて、さまざまな地域から通っています。 そのため、どの地域からも安全に通えるように、各方面へ送迎するスクールバスを運行しています。 スクールバスが
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のリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い
以前の記事「マークダウンの力を引き出す！ Nuxt Contentで快適なウェブサイト制作」では、Nuxt Contentについて紹介しました。Nuxt ConetentはVue.jsのフレームワークであるNuxtのモジュールで、マークダウンなどのコンテンツからサイトを作る強力なプラグインです。 Nuxt Contentそれ自体も強力なコンテンツ管理、運用システムですが、WordPressやヘッドレスCMSといった既存のコンテンツ管理システムと比べると以下の課題があります。 マークダウンの知識が要求されるため、コンテンツの作成が難しい Nuxtを起動する必要があるため、環境構築する必要がある つまり、「開発者しかコンテンツが作成できない」のが大きな課題です。 Nuxt Contentを使いつつその課題を解決するのがNuxt Studioです。Nuxt StudioはNuxtのモジュールでは
こんにちは、UIデザイナーの小高です。デザイン業務に邁進しながらも、技術情報に関する悩みを抱える日々を過ごしています。アシアルにはエンジニアが多く在籍していますが、デザイナーがエンジニアやプロジェクトマネージャー（PM）のスキルにもう少し近づくことで、プロジェクトにどのような相乗効果を生み出せるのかを普段からぼんやり考えていました。 でも、一体どこから手をつければ良いかわからない。そんなもやもやを解決すべく、デザイナーの視点から「テック相談」を持ちかけてみました。今回は、その第1回目です。 プロフィール デザイナー 小：UIデザイナー。デザインの表層分野を得意としていますが、骨格・構造・UXリサーチなど広い範囲でのデザインを担えるよう、日々取り組んでいます。現在は主にデザインフェーズに注力していますが、設計や開発フェーズでも貢献できる方法を模索中です。 エンジニア S：エンジニアからPMの
自分のポートフォリオページが数年前からぶっ壊れていてそのままにしていたのだけど、今週、ふとそのあたりをちゃんとするか、という気持ちになった。今までいろんな方法でそれを作ってみては放置して、を繰り返してきてしまっていたのだけど、今回はそれをはてなブログで作ってみたところ、ぱっと見でブログっぽくはない、それっぽいページを作ることができた気がしている。 about.a-know.me 以下に、また似たようなことをやりたくなったときのための備忘も兼ねて、手を入れたポイントをまとめておく。 テーマ 以下のテーマを使わせていただいた。 blog.hatena.ne.jp はてなブログのテーマストアに登録されているもののうちのひとつなんだけど、テーマストアは見てるだけで楽しいというか謎のインスピレーションが湧いてくるので、自分は不定期的にチェックするようにしている。オススメです。（ストア、といいつつ、有
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? アクセシビリティを考慮したWeb開発の話題で、しばしば 「ロール（role）」 というものが登場します。 role="button" のような role属性 として紹介されていることもあります。 ロールは、Webアクセシビリティでとても重要な概念なのですが、わかりやすい解説記事があまり多くない印象です。一方で「role属性を使えばアクセシビリティが向上する」という誤解を招きそうな内容のものもちらほらと存在しており、それを信じて誤った使い方をすることで、かえってアクセシビリティを下げかねない状態になっています。 そこでこの記事では、rol
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜあなたのウェブサイトは遅いのか
人間によるコーディング禁止の CLINE 縛りでゲームを作らせてみた感想
「shadcn/ui」って何が凄いの？実装知らないWebデザイナーが調べてみた｜akane
話題のbrowser-use使ってみた - Qiita
サイト構築からデプロイまで。AIが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）
MarkdownAIで子ども向けスマホ動物園を作ってみた - Qiita
Rust/Tauriに入門したので画像変換デスクトップアプリを開発してみた
エディタ選びのポイント、ITエンジニア人生を左右するツールのいろは——Software Design 2025年3月号の特集記事を先行公開 | gihyo.jp
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
画像のalt属性には何を書けばよいか、WAIによるチュートリアルにその答えがありました
Markdownでお手軽に高品質な技術同人誌を出す方法｜erukiti
Github Copilot Agentでパワーが4倍に、1週間を振り返る｜sys1yagi
「デザイナー向けCursor」を実現するOnlookのアーキテクチャ - laiso
CSSのみで画面の幅と高さのウィンドウサイズを取得する方法｜BLACKFLAG
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック
負債になりにくいCSSをデザイナとつくるには？
Web制作者は要チェック！ 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ
初心者3人でISUCONに参加してめっちゃ楽しめた件 - Mirrativ Tech Blog
HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA
高校生が初めてシステムの個人開発に挑戦した話 - Qiita
ブラウザでマークダウンを編集！？ Nuxt Studioことはじめ - ICS MEDIA
デザイナーからのテック相談 エピソード１：UIデザイナーが、要件定義・設計フェーズに関わるメリット
自分のポートフォリオページをはてなブログで作ってみた - えいのうにっき
Webアクセシビリティにおける、ロール（role）の解説 - Qiita