web– category –

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

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

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

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

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

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

PHPを書いていると「return と echo の違いがよく分からない…」ということはありませんか？ 私はめっちゃあります。 出力するのに変わりはないからどっち使っても一緒？って思っていると動かないし、、、。 そんな感じでreturn と echoを再度学び直してい...

お問い合わせフォームのカスタマイズ最終形態版です！コピペで繰り返し使えるので保存してね！ そんな感じでWordPressのプラグインContact Form 7を作ってきます〜。 フォームコードのサンプル カスタマイズしたお問い合わせフォームのコードです。これを...

こんにちはrey( @reydesign8376) です お問合せフォームで、「名前のふりがなを入力するフォームなのに漢字でお問合せされてしまった！」何のためのふりがな入力フォームなんだ！と思ったことがあります。 お問い合わせした人は悪くありません。...

JavaScriptを使って「.animate」クラスを指定した要素を、ビューポート内に入ったら「下からふわっと出現」させる方法を解説します。 HTML 以下のように「.animate」クラスを付与したHTMLを用意します。複数の要素を動かす場合は、クラス名「.animate」を...