Josh W. Comeau氏が、CSSでheight: 50%がしばしば失敗する理由と、パーセンテージのheightを親のheightやGrid、Flexboxで使えるようにする方法を、デモ付きで詳しく解説しています。
🦄Collective : 「気になる」をあとから探せる、Web制作のネタ帳
Josh W. Comeau氏が、CSSでheight: 50%がしばしば失敗する理由と、パーセンテージのheightを親のheightやGrid、Flexboxで使えるようにする方法を、デモ付きで詳しく解説しています。
思わずスクロールしたくなるwebサイト参考14選｜アニメーションや仕掛けが超秀逸 | トゥモローゲート
こんにちは。 先日のオフサイトミーティングで新たな組織図が発表され、改めて自分がフロントエンドエンジニアだということを自覚したトゥモローゲート意匠制作部フロントエンドエンジニアのタカウマです。 2、3ヶ月前とはうって変わって最近はフロントエンドの業務が増え（デザイナーからコーダーに仕事が回ってくる時期）、頭の中がコードで埋め尽くされております。そういう時期は参考になるブックマークサイトを徘徊したりします（普段からしろよって意見は全部スルーしますのであしからず。） 僕はゴリゴリのシステムエンジニアではなく、フロント周りの実装やアニメーションなどの「表現」やサイトとしての「企画」が好きなので、注目するポイントもそっち寄りだったりします。 今回はそういったアニメーションや企画が秀逸な「うまい」webサイトをピックアップして紹介していきたいと思います（記事を書く時間がないからではないですよ）。「う
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
UIにおける自己帰属感と余韻について｜Keita Yamada
Webサイトを作っています。山田啓太です。制作したWebサイトはポートフォリオサイトにまとめています。 この記事では具体的なUIを例に上げてそれぞれのUIを実装するときに僕が気をつけていることを書いていますが、その考えは渡邊恵太さんの著書、「融けるデザイン」の第1章〜第3章で語られている内容を非常に参考にしています。渡邉さんが独自の研究を通じて自己帰属感という単語に行き着くまでの過程も面白いのでぜひ読んでください。 自己帰属感とはある道具をまるで自分の身体の一部かのように扱えているとき、その道具は自己帰属感があると言えます。例えば大多数の日本人にとってお箸は自己帰属感のある道具でしょう。私たちがお箸を持って食べ物をつまむとき、まるでお箸が自分の指の延長になったかのように、お箸自体を全く意識することなく動作を行えます。 自己帰属感は自分の身体と扱う道具との高い連動性によって引き起こされると、
Frontendエンジニアが”融けるデザイン”を読んで変化した価値観
【結論】 UXの捉え方が「ユーザがサービスを道具として扱うための透明性と自己帰属感の実現」へと変化した。 突然ですが「UXとは何？」と聞かれたらなんと答えるでしょうか。以前までの私であれば”速さ・使いやすさ”といった回答をしていた気がします。しかし今回あるきっかけで融けるデザインという本を読む機会があり、そこで得た考えを言語化したいと思いこの記事を執筆しています。 ＊本記事は融けるデザインを読んだ個人の解釈をまとめたものですので、本の内容を解説するものではありません。所々解釈が異なる点がありましたらご了承ください。 「融けるデザイン」とは 本書はデザインの手法というより、インターフェイスとは何か？UXとは何か？という抽象的な概念に着目した一冊です。今回私が本書を紹介する理由としては、デザイナーだけでなくエンジニアにとっても有意義な内容が書かれていて、これまでの価値観を大きく変えてくれるもの
読みやすいコードを書く
読みやすいコードとは何か 読みやすいコードとは、脳に負荷がかからないコードである。脳に負荷がかからないコードとは、人間の脳の特性に配慮して書かれたコードである。したがって読みやすいコードを書くには、まず人間の脳の特性を把握する必要がある。読みやすいコードの特徴は、この人間の脳の特性から論理的に導かれる。 また、「コードを読む」とは過去から未来への情報伝達、または自分から他者への情報伝達であり、情報理論における以下の２つの数学的原理にも支配される。 頻出する情報には共通の符号を割り当てることで情報を圧縮することができる。 失われた情報を復元することはできない。 この記事に書かれた内容はプログラムに止まらず、ドキュメント、記事の執筆など、プレインテキストによって情報を伝達する際には一般に適用可能である。 もしもこの記事を読むのが面倒であれば、以下の５つだけを覚えておけばよい。 ひとつの処理の単
もしもいま、Webフロントエンドをイチから学び直すとしたら？ 現役Webエンジニア・大石貴則さんが考える学習ロードマップ - Findy Engineer Lab
めまぐるしく変化するテックの世界。技術を身に着けるうえで学ぶべきポイントや学習環境なども年々変わっています。 そこで「もしもいまの環境で、テックのことをイチから学び直すことになったら、自分はどんな風に勉強したいか」というIFストーリーを通じて、技術との向き合い方を考え直してみる企画「テック転生」。 今回は、現役Webエンジニア・大石貴則（@bicstone_me）さんに “自分だったらこう進めたい、ソフトウェアテストの学習ロードマップ” を伺いました。 はじめに はじめまして。大石貴則（おおいし たかのり）と申します。 私は現在物流業界向けのSaaSプロダクトのグロースを担当しています。Webフロントエンドを中心にWebバックエンドやネイティブアプリなどにも幅広く携わっています。 Webエンジニアとしてのキャリアは6年目で、最初はWebバックエンドエンジニアとしてスタートしました。その後、
速くて安いWebサイトを作る
速くて安いWebサイトを目指して作ったときのポイントです。 追記 2/20：Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました（50→500）
AIコーディングのプラクティス
・Claude Sonnet 3.7を使え ・Project Rules（.cursor/rules）を使え ・ビルド、lint、テストなどで高速にフィードバックさせろ ・1セッションあたりで依頼することはできるだけ少なくしろ ・よく使うコマンドやライブラリはチートシート作れ Yamada 補足 2025/03/06現在 Roo-Code は .cursor/rules を自動で参照しない。.clinerules, .cursorrules, .windsurfrules は自動で見ておりすべてを結合してコンテキストに入れる。Roo-Codeを使う人は .cursorrules を設定しておくのがよい。
【JavaScript】MDNが推奨する最強の書き方 - Qiita
はじめに MDNのドキュメントを眺めていたら、JavaScript のサンプルコードの作成ガイドラインという章を見つけました。第三者にコードを公開するような人向けにまとめられたものですが、正しい書き方の実践としてみることができるので、クローズドなプロジェクトの中でも使えるかもしれません。ただ、モノによってはチームで決めた慣習と食い違うこともあるかもしれないので、採用はケースバイケースになると思います。 上記のページが紹介された記事があまり見当たらなかったので、折角なので共有してみようと思います。あと、ところどころ補足を付け加えています。 対象読者 基本的には初心者向け ただ、幾つかは中級者の方でもためになるものがあるかも？ 規則の一般性 ☆：よく見かける書き方。一般的 ☆☆：あまり見かけないかもしれない書き方。あるいは、意識的には規則づけられてなかった書き方 ☆☆☆：クローズドなプロジェク
Webデザインのモーション集サイトを作りました
個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。 このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要 Webデザインにおける様々な動きに注目して、そのプリミティブな要素を紹介したサイトです。個々の作例には実装コードを掲載していて、コピペで利用することもできます。内容もよく紹介されているような基礎的なものは少なく、少し改造すれば使えるような実践的なものを紹介しています。そのためHTML・CSS・JavaScriptの基本を理解している前提のレベル感になっています。 そのほかWebの動きに関するコラムやTips的な読み物もあります。 使用技術 各使用技術についてそれぞれ説明していきます。 レンダリング戦略 サイトの性質として、そう頻繁な更新やリアルタイム性が求められるものではないのでSS
【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかりと理解することは、効率的で保守性の高いアプリケーション開発において不可欠です。今回はそのなかでも特に大切なものを20個解説していきます。 この記事を読むことで Reactの基礎から応用までの体系的な知識を一箇所で習得できる コンポーネント設計やステート管理など、直面する課題に対する解決策を理解できる パフォーマンス最適化やエラー処理などアプリケーション開発に必要な知識を得られる 最新機能（React 19、Suspenseなど）について学び取り入れられる 面接や技術的な議論の場で、Reactについて自信を持って説明
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
AIコーディングツール｢Cursor｣で記事を書くようにしたら、“考える余裕”ができた
AIコーディングツール｢Cursor｣で記事を書くようにしたら、“考える余裕”ができた2025.04.30 20:0048,811 かみやまたくみ 楽すぎる。 いろんなAIツールが登場している昨今、特に評判がいいのが｢Cursor（カーソル）｣です。AIにコードを書かせまくり、ひたすら楽してプログラム開発しちゃおう、って感じの開発ツールです。エンジニアに大好評で、大企業開発部署への導入がガンガン決まっていたりします。 結論から言うと、｢文章を書くのが仕事｣という人にもおすすめできます。 自分はエンジニアでも何でもなく、物書きなのですが、あんまりにも目にするので｢そんなにすごいの？｣と思って触ってみたら、よすぎて手放せなくなってしまいました。 CursorとはCursorはAIコーディングツール、本来的にはプログラムを開発するためのアプリケーションです。特徴は｢AIペイン｣｢エディタ｣｢ファ
パフォーマンスを改善する技術 - Repro Tech Blog
はじめに こんにちは。Repro Booster プロダクトマネージャーの Edward Fox です。普段はRepro Boosterの製品戦略立案やロードマップの策定を担当していますが、プロダクトの提供とは別にお客様サイトの根本課題を一緒に解決する取り組みも行っています。本記事では、最近担当した大規模ECサイトのパフォーマンス改善事例を題材に、技術面と組織面の両方から「パフォーマンス改善をどう進めればよいか」という観点で記事を書いてみました。 Repro Booster と伴走支援の位置付け Repro Booster は「タグを設置するだけでWebパフォーマンスを改善する」ことを目的にしたプロダクトです。一方、既存サイトに長年積み上がった負債や部門間の調整といった課題はツールだけでは解決が難しい領域でもあります。そこで私たちは、少人数の伴走チームを編成し「小さく試して、パフォーマンス
Google Chromeのローカル オーバーライドを活用して、GTM実装前のサイトでGTMの動作確認をする方法 - NRIネットコムBlog
はじめに Google Chromeのローカル オーバーライドとは ローカル オーバーライドを活用するメリットと活用場面 ローカル オーバーライドを使用し、GA4 の計測の検証に活用してみた Case1：GTMコードスニペットを差し替えて、検証環境でGA4 の基本的な計測を確認する 手順１：ChromeのDevToolsにて、ローカル オーバーライドを行う 手順２：GTMのプレビューにて、GTMが動作しているか確認する 手順３：GA4 プロパティにて、計測確認をする Case2：実装前のdataLayer.pushのコードを検証する 手順１：dataLayer.pushのコードを作成する 手順２：ChromeのDevToolsにて、ローカル オーバーライドを行う 手順３：GTMにて設定を行う 手順４：GTMのプレビューにて、データレイヤー変数がGA4 で計測できているかを確認する おわりに
生成 AI で英語を聞く量を一気に増やす。YouTube × Gemini で「多聴」をパワーアップさせよう｜Gemini - Google の AI
生成 AI で英語を聞く量を一気に増やす。YouTube × Gemini で「多聴」をパワーアップさせよう こんにちは。Google の AI「Gemini（ジェミニ）」の公式 note 編集部です。 英語を学ぶにあたって、たくさんの英語を聴くこと、すなわち「多聴」が非常に大事だと言われています。一方で、聞き取れないことでフラストレーションが溜まったり、教材の選定が難しかったりと、継続した学習に課題を感じる方も少なくないのではないでしょうか。 今回は、そんな多聴の実践および継続のハードルを低くするための生成 AI 活用についてです。 教えていただくのは、英語の習得をスピードアップできるような英語学習法を研究・発信している Kumiko さん。Gemini アドバイザーであるけんすうさんとの対談を通じて、Gemini を活用した英語の「多聴」の可能性をたっぷり教えてもらいます。 ※ Gem
“自分の機嫌は自分で取る” を美味しい物を食べたり欲しい物を買うことだと思っていたけれど違った、というお話
詩旅 紡 @tsumugi_utatabi 「自分の機嫌は自分で取る」というのを「美味しいものを食べたり欲しいものを買うこと」だと思っていたけれど、いつも結局虚無感に襲われてた。それよりも「感情を紙に書きまくる」「無心で外を歩きまくる」を反復するようになってから機嫌が落ち着くようになった。「消費」より「循環」がいい 2025-04-23 19:15:22
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクワット等でちんちんの健康を鍛えよう！勃起力アップ体験談 - posfie
【特集】 突然の「BitLocker回復キー」要求に慌てないようにする心得～BitLockerの仕組みをちゃんと知る
