Maison de la mer– Author –

お問い合わせフォームで地味に多いのが、メールアドレスの入力ミス 確認用のメールアドレスが一致していない 余計なスペースが入っている（コピペで混入しがち） 全角が混ざっている（＠や英字が全角になってる） これがあると、せっかくのお問い合わせに...

Contact Form 7で電話番号の入力欄を設置したものの 『090-1234-5678 ハイフン有り』の番号や『ハイフン無し 09012345678』 どちらも許可したい…でも文字入力は防ぎたい… 🤔 そんなこと、ありませんか？ 今回は『ハイフン有り／無し両対応』と『数...

先日、この2つを完全に勘違いしてしまい、時間をかけてしまったという苦い経験をしました。。。サーバー移転のノリで作業し「そっかドメイン移管だからめっちゃ時間かかるやつやん」ってなった感じです。 同じミスを二度としないため、そして同業の方の事...

最近のWebデザインでは、ノイズエフェクト（ノイズ加工）と呼ばれるざらざらとした粒状感のある質感がトレンドになっています。 単調になりがちなフラットデザインもこの「ノイズ」を少し加えるだけで 奥行き 情報量 視覚的な心地よさ を簡単にこなれ感を...

今回は、最近特に注目されているCSSプロパティaspect-ratioについてご紹介します。レスポンシブ対応で画像やボックスの比率をきれいに保ちたいとき、すごく便利なプロパティです◎画像のサイズ比率、崩れてませんか？ こんなときに便利！ 画像の比率を固定...

私、レスポンシブのコーディンがめちゃ下手です！「フォントサイズやボタンの幅、どうやって調整してる？」 「メディアクエリを減らしてレスポンシブ対応したい！」めんどくさがりなので、楽してコーディングしたい。。。って考えてます。そんな感じで、レ...

Webサイトでよくある「クリックでメニューを開閉する」機能を、シンプルなJavaScriptで実装する方法を紹介します。 コード内容 HTML構造 <button class="toggle_btn">メニュー</button> <div class="menu">ここにメ...

今回はCSSアニメーションの基本となる@keyframesについて解説します。アニメーションを活用すると、Webサイトのデザインがより動きのある魅力的なものになります。 @keyframesとは？ @keyframesは、CSSでアニメーションの動きを定義するためのルールです。...

今回はCSSでグラデーション背景をゆらゆら動かすアニメーションを作る方法を紹介します。シンプルな背景に動きを加えることで、サイトの印象をアップできます。 ではいく〜 背景をアニメーションで動かすには グラデーションの背景をアニメーションさせる...

スマートフォン向けサイトでは、画面下部に固定されたフローティングメニューがよく使用されます。しかし、常に表示されていると画面の視認性を妨げることがあります。 そこで、スクロールの動きに連動して 下にスクロールするとメニューが表示され、上に...