Web制作で役立つメモをWEB MEMO LOG

長い英語のテキストやURLを適切に折り返す方法。CSSのword-breakまたはoverflow-wrap（word-wrap）プロパティを使用いたします。 【例】 This is a long s・・・

CSSで数字や英字も含めて文字を縦書きにする方法 1.文字のみ縦書き（数字・英字を含めない） 縦書きの例（Vertical Text Example）Numbers and English Lette・・・

メニューや要素をスクロール可能なコンテナ内で特定の位置に固定・追従するのに便利なpositionプロパティ「Sticky」。サイドバーなどの要素を、下部で固定して追従させる方法。 3行目の「align・・・

いつもお世話になっている高機能スライダーSwiperですが、スマホだけスライダーを有効（PCはスライダーを無効）にするなど、ブレイクポイントで有効・無効を調整する方法。

フォームを簡単に制作できるプラグイン「MW WP Form」で、ラジオボタンやチェックボックスを画像にする方法をご紹介いたします。※残念なことに「MW WP Form」は開発終了となることが2023年・・・

カスタム投稿、カスタムタクソノミーでパーマリンクを親子関係を持つ形で変更する方法。登録したスラッグは下記の通りです。 【カスタム投稿タイプ】blog【カスタムタクソノミー】blog-cat【ターム】i・・・

モーダル表示時に背景までスクロールしてしまうことを防ぐ方法 【参考】CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

※動画のアスペクト比が7：5の場合 サンプル 【参考】変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ

コーディングを効率化するよく使うジェネレーター Gridレイアウト CSS Grid Generator ストライプ CSS STRIPE GENERATOR シャドウ（影） box-shadowジェ・・・

ページを開く際、アニメーション（opacity: 0から1）を使っている場合に、GoogleのPageSpeed Insightsで測定時、Largest Contentful Paint（LCP）が・・・