実務 【CSS】mask-image使用時にローカル環境（file://）で背景色が消える原因
CSSの mask-image を使用して要素を型抜きした際、ローカル環境とテスト環境で表示が異なる現象に遭遇したため、その原因をまとめます。前提（実装内容）共通の吹き出し画像を以下の通り mask-image で実装し、6つある吹き出しの...
実務 Web制作学習 デイトラモダン開発 DAY 33 Next.jsでSEOに関する設定を行おう
TD設定TDの設定には以下の2つを使う！metadata：通常ページで使用generateMetadata：動的ページで使用（paramsで取得）ハッサク上記2つとも、使う時には「import type { Metadata } from ...
Web制作学習 デイトラモダン開発編 DAY31 「SSR」「SSG」「ISR」の動きを確認しよう
比較fetchが動くタイミングが違う！SSR：常に最新の状態標準の仕様。（毎回feachする）メリットデメリット常に最新の情報を取得ができる（管理画面の投稿を変えると即反映）ページスピードが遅くなる可能性があるSSG：build時にページの...
Web制作学習 デイトラモダン開発編 DAY26 WordPressのREAT APIを活用して「お知らせ一覧」ページと紐付けよう
2つのURLの違い「IDだけ返ってくる」か「中身（画像URLなど）まで全部セットで返ってくる」かの違いです。パラメータなし：パラメータあり：1..../posts/（パラメータなし）「軽量版」です。関連するデータはすべてID番号だけで返って...
Web制作学習 デイトラモダン開発編 DAY14 TypeScriptを導入
DAY14 TypeScriptを導入TypeScriptの命名ルール（慣習）⚫︎型 (type, interface, class)：PascalCase（先頭を大文字にする）例: UserName, UserData, StringOr...
Web制作学習 デイトラモダン開発 DAY11 共通ボタンのコンポーネントを作成しよう
CSS Modulesについてクラスの書き方により、タグの書き方が変わる。①キャメルケースの場合.buttonTest {}②ハイフンで繋ぐ場合.button-test {}①キャメルケースの場合<span className={style...
Web制作学習 デイトラ モダン開発編DAY6〜7
DAY6 JavaScriptの基本を復習する2・同期処理処理が終わったタイミングで、JSコードが上から順に実行・非同期処理functionsの前にasyncを書くと、JSコードがとばされず、上から順に実行される(例)export defa...
便利情報 作成したWebサイトを表示する「モックアップ」作成ツールおすすめ
ハッサクこんにちは！フリーランスコーダーのハッサクです。Webサイトを納品後にポートフォリオを更新するのですが、その時に作成するのが「モックアップ」。URLを開かなくても、パソコン・スマホの表示が確認出来て便利ですよね。▼モックアップイメー...
便利情報 パイナップル検査！飛蚊症は軽減するのか？
「パイナップルを3ヶ月食べたら、飛蚊症が軽減されたという論文が発表されたらしい！」※飛蚊症：明るいところを見ると、黒や透明の点や線が、空中に漂って見える生まれつき飛蚊症はあったのですが、あまり気になりませんでした。ですが去年から少し気になり...
実務 Swiperのloopで2周目以降1枚目→2枚目がカクつく
以下デザインのスライダーを作った時に、「2周目以降、1枚目から2枚目に移動するときに、スライドにつけた段差が一瞬なくなる」という挙動が発生しました。※デザイン：真ん中のactiveクラスが一番低く、左右に階段のように段差があるスライダースラ...