未分類 SCSSでつくる「気持ちいいfluidデザイン」
1. なぜ今さら「fluid」なのか？ clamp時代のSCSSユーティリティの価値最近のfluid設計は、ほぼ clamp() 一強です。font-size: clamp(16px, 4vw, 24px);みたいな書き方は、Smashin...
未分類
未分類 Web技術 タップ時の「青いハイライト」を自在にコントロールする完全ガイドモバイルWebのための -webkit-tap-highlight-color 実務レシピ
スマホでリンクやボタンをタップすると、iOS Safari や Android Chrome では要素の上に一瞬「色付きのハイライト」が出ます。これはユーザーに「タップが認識された」ことを伝える大切なフィードバックですが、UIのトーンと合わ...
未分類 CSSで使うborder-image の徹底解説｜使い方・注意点・実践例まとめ
border-imageとは？CSSの border-image プロパティは、通常の単色や破線・点線ではなく、画像を枠線として使える特殊な機能です。装飾性の高いデザインや、オリジナルの枠線を作りたいときに便利で、画像を9分割して枠線に適用...
未分類 【完全解説】Contact Form 7で自動挿入されるpタグ・brタグを削除する2つの方法
はじめにWordPressでお問い合わせフォームを作成する際、最も人気のあるプラグインの一つが Contact Form 7 です。導入の手軽さや拡張性の高さから多くの現場で使われていますが、実務でよく遭遇する問題のひとつが、勝手に<p>タ...
未分類 【保存版】HTMLとCSSで作る横スクロールできるテーブルの実装方法｜レスポンシブ対応とUX改善のポイント
はじめにWeb制作において、表（テーブル）をスマホでどう見せるかは大きな課題です。PCでは十分な横幅があるため問題ありませんが、スマホ画面では以下のような悩みが発生します。列が多すぎて テーブルが画面からはみ出す無理やり縮小されて 文字が読...
Web技術 【保存版】WordPressで@font-faceが表示されない！CORSエラーの原因と解決方法
Webサイトでオリジナルフォントを使おうと、@font-face を設定したのにブラウザで表示されない…。DevTools（デベロッパーツール）の Networkタブ を確認すると「CORSエラー」と表示されていることはありませんか？この記...
未分類 【フロントエンド実務向け】URLを入力するだけでHTML/CSS/JSを解析できるおすすめツールまとめ
フロントエンド実務では、「デザイナーから、このページみたいにアニメーションを実装してください」と言われることがよくあります。しかし最近はGSAPやScrollTrigger、SwiperなどのJSライブラリ、さらには複雑なスクロールアニメー...
未分類 スクロールに応じてフォントサイズが拡大する作り方を徹底解説
ウェブサイトに動きのあるデザインを取り入れたいと考えていませんか？そんな時に役立つのが、スクロールに応じてフォントサイズが変化するダイナミックなエフェクトです。この技術は、視覚的なインパクトを与えるだけでなく、ユーザー体験を向上させる効果も...
未分類 ScrollTriggerで途中から横スクロールさせる方法を徹底解説！初心者でもわかる詳細な実装手順とコード付き
Webサイトにおけるスクロールアニメーションは、ユーザー体験を向上させるための強力な手段です。その中でも、縦スクロールから途中で横スクロールに切り替えるアニメーションは視覚的なインパクトを与えるため、注目されています。この記事では、Scro...
未分類 HTML、CSS、JavaScriptでスクロールに合わせてパスを描く方法を徹底解説！初心者でもわかるコード付き実装ガイド
Webサイトをより魅力的にするために、スクロールに連動してパスを描くアニメーションを追加するのは非常に効果的です。この技術を使用することで、ユーザーの注目を集め、サイトの滞在時間を延ばすことができます。この記事では、HTML、CSS、Jav...