CSS :last-child疑似クラス：最後の子要素を選択
😄この投稿は、codingeverybody.jpのコンテンツをもとに作成しています。 定義と使い方 :last-child疑似クラスセレクターは、親要素の子要素の中で一番最後に位置する要素を選択します。 :last-child疑似クラスセレクターは、:nth-las...
View Article画面は作れる。でも「なぜか使いにくい」。0から始めるエンジニアのためのUI/UX理論と実装プラクティス
はじめに：UI/UXは「センス」ではない。「工学」である 普段バックエンドやフロントエンドのロジックを書いているエンジニアが、自前でUIを作ったり、既存の画面を修正したりするとき、こんな経験はないでしょうか。 「デザインツールを使わずに Tailwind CSS でそれ...
View Article【CSS】display:noneとvisibility:hiddenの違いを完全に理解する
display:noneとvisibility:hiddenって何が違うの? 要素を非表示にしたいとき、なんとなくdisplay: noneを書いていませんか。 もしくは逆に、なんとなくvisibility: hiddenを選んでいませんか。 実はこの2つ、見た目が「消え...
View Article外部 API 由来の表示は、前回の値で先に描いてから更新する
こんにちは。小学生向けのニュースサイト、こどもニュースをつくっています。 このサイトのヘッダの背景は空の絵で、読者の地域の天気予報に合わせて晴れ・くもり・雨・雪・雷を描き分けています。この絵が、ページを開くたびに一瞬遅れて入れ替わっていました。直した形は「前回の値で先に描い...
View Articledocker,php,html,css,supabseを用いたログイン機能
Docker × PHP × Supabase ログイン機能付きToDoアプリ作成手順 Docker環境でPHPを立ち上げ、HTML/CSSの画面作成、PHPでのセッション認証、およびSupabaseとの連携を行うためのステップバイステップの練習手順です。 📁 ディレ...
View Articleフォーム実装、2026年はHTMLとCSSだけでどこまでできる？
フォームは、Webで最もJavaScriptとCSSハックが溜まりやすい場所だと思います。 入力に合わせて textarea を伸ばす → scrollHeight を測って height を書き換える エラーを表示する → blur を監視してクラスを付け外しする s...
View ArticleVue.jsでCSSをノーマライズする方法
modern-normalize を使う。 npm install modern-normalize そして例えば main.js で、 import 'modern-normalize' としておけばOKです。
View Articleバイラルメディア基盤のアーキテクチャ設計：突発的トラフィック処理とAI自動生成パイプラインの考察
バイラルメディア基盤のアーキテクチャ設計：突発的トラフィック処理とAI自動生成パイプラインの考察 SNS（特にX/TwitterやTikTok）経由のバイラル流入を主眼に置いたメディアやニュースマガジンを運用する場合、一般的な企業サイトやブログとは根本的に異なるシステム要...
View Article@layerでCSSの詳細度と戦うのをやめる
こういうCSSを見たことがある、あるいは書いたことはないでしょうか？ .card .title { color: #333; } .page .card .title { color: #666; } body .page .card .title[data-theme] ...
View Article画面では1枚に見えるのに、刷ると3枚に割れて中身が消えた。transform scale と印刷を実測してみた
紙に出すものをHTMLで作っていて、画面では完全に1枚に収まっているのに、刷ると3枚になり、1ページ目には上のほうしか出ていないという壊れ方を踏みました。 原因は transform: scale() でした。ただし最初に自分が下した診断（「印刷では背景グラデーションが落ち...
View Articlelalavelに移行する
はじめに本記事では、 Vanilla JS（バニラJavaScript）とSupabaseを組み合わせて、ユーザー認証（ログイン/新規登録）、動的な記事一覧表示、カテゴリフィルター、そしてお気に入り登録機能を備えたWebアプリケーションを構築する方法を解説します。 全体像と...
View ArticleBEMとCSS Modules徹底比較：コンポーネント指向CSS設計の「最適解」を見極める
BEMとCSS Modules徹底比較：コンポーネント指向CSS設計の「最適解」を見極める 皆さん、こんにちは！Web開発の世界は日々進化し、特にCSSの設計はプロジェクトの規模が大きくなるにつれて複雑になりがちですよね。コンポーネント指向の現代において、グローバルスコー...
View Article【最小構成】PWAをオフライン対応にする手順(manifest + Service Worker だけで動かす)
【最小構成】PWAをオフライン対応にする手順(manifest + Service Worker だけで動かす) はじめに PWA(Progressive Web App)は、Webサイトをスマートフォンのホーム画面に追加して、アプリのように使えるようにする仕組みです...
View Article【WordPress】固定ページの実装方法
はじめに この記事では、WordPress で固定ページを作成し、Web ページとして表示する実装方法を記載します。 Docker でローカル環境を構築済みの状態からスタートします。 開発環境 開発環境は以下の通りです。 Windows11 Docker Des...
View Article本文を3行で折りたたむときCLSを出さずJSなしでも読めるようにする
本文を 3 行で折りたたむとき、CLS を出さず、JS が無くても読めるようにする アニメ番組表サイトの作品ページに、あらすじを「冒頭 3 行＋続きを表示」で出すようにしました。よくある UI ですが、素直に実装すると次の 2 つを同時に踏みます。 読み込んだあとに縮...
View Article画像レビューは閾値をどこまで測れるか——12 頁 × 10 ルールを DOM の正解表で当てさせた（GPT 54/60）
画面のスクショを AI に貼って「規定を守れているか」を聞くと、どこまで当たるのか。自サイト 12 頁の「直す前」の画面を headless Chrome で測って 10 ルールの正解表を作り、同じ描画から等倍に切り出した画像 164 枚だけを GPT（ChatGPT の画...
View Articlehtml,css,purejs,supabaseを用いたwebアプリケーション
【HTML/CSS/JS + Supabase】DTMキュレーションサイト（MusicMachine）の技術選定と設計 1. はじめに 本記事では、DTM（デスクトップミュージック）プラグインや音源、ニュースなどをまとめるキュレーションサイト「MusicMachine」...
View Article【Tailwind CSS】「思った通りのスタイルじゃない」解消法まとめ5選
はじめに 異業種からIT企業に転職して半年以上の初心者です 今月は、Tailwind CSSを使ったスタイル修正作業をたくさん経験したので、思い通りにスタイルが当たらない場合の解決策をまとめてみました。 個人的には初めてTailwind CSSを使用してみましたが、css...
View ArticleView Transitions APIはどこまで本番で使える?
一覧から詳細へ遷移するとき、サムネイルがそのままヒーロー画像になる動きや、タブを切り替えると、下線がスッと移動するような動き。 こういう動きを自前で書こうとすると、FLIPを実装して getBoundingClientRect() で前後の位置を測り、差分を transfo...
View ArticleCSS :first-child疑似クラス：最初の子要素を選択
😄この投稿は、codingeverybody.jpのコンテンツをもとに作成しています。 定義と使い方 :first-child疑似クラスセレクターは、親要素の子要素の中で一番最初に位置する要素を選択します。:first-child疑似クラスセレクターは、:nth-ch...
View Article
