web– category –
-
【JavaScript】クリックで表示/非表示
Webサイトでよくある「クリックでメニューを開閉する」機能を、シンプルなJavaScriptで実装する方法を紹介します。 コード内容 HTML構造 <button class="toggle_btn">メニュー</button> <div class="menu">ここにメ... -
@keyframesとは？CSSアニメーションの基礎と活用方法
今回はCSSアニメーションの基本となる@keyframesについて解説します。アニメーションを活用すると、Webサイトのデザインがより動きのある魅力的なものになります。 @keyframesとは？ @keyframesは、CSSでアニメーションの動きを定義するためのルールです。... -
【コピペOK】CSSのみでグラデーション背景をアニメーションさせる方法
今回はCSSでグラデーション背景をゆらゆら動かすアニメーションを作る方法を紹介します。シンプルな背景に動きを加えることで、サイトの印象をアップできます。 ではいく〜 背景をアニメーションで動かすには グラデーションの背景をアニメーションさせる... -
スマホでよく使う固定フッターメニューをスライドに合わせて表示する方法
スマートフォン向けサイトでは、画面下部に固定されたナビゲーションメニュー（フッターメニュー）がよく使用されます。しかし、常に表示されていると画面の視認性を妨げることがあります。 そこで、スクロールの動きに連動して 下にスクロールするとメニ... -
【PHPを学ぶ】return と echo の使い分け
PHPを書いていると「return と echo の違いがよく分からない…」ということはありませんか？ 私はめっちゃあります。 出力するのに変わりはないからどっち使っても一緒？って思っていると動かないし、、、。 そんな感じでreturn と echoを再度学び直してい... -
WordPress お問い合わせフォーム 作り方｜コンタクトフォーム7
お問い合わせフォームのカスタマイズ最終形態版です！コピペで繰り返し使えるので保存してね！ そんな感じでWordPressのプラグインContact Form 7を作ってきます〜。 フォームコードのサンプル カスタマイズしたお問い合わせフォームのコードです。これを... -
【 WordPress Contact Form 7 】テキスト入力フォームでひらがな、カタカナのみの記入欄を作る【コピペOK】
こんにちはrey( @reydesign8376) です お問合せフォームで、「名前のふりがなを入力するフォームなのに漢字でお問合せされてしまった！」何のためのふりがな入力フォームなんだ！と思ったことがあります。 お問い合わせした人は悪くありません。... -
【JavaScript】クラス名をつけるだけで下からふわっと現れるアニメーション【コピペOK】
JavaScriptを使って「.animate」クラスを指定した要素を、ビューポート内に入ったら「下からふわっと出現」させる方法を解説します。 HTML 以下のように「.animate」クラスを付与したHTMLを用意します。複数の要素を動かす場合は、クラス名「.animate」を... -
【CSS】サイト背景にざらざら質感を追加しておしゃれな背景に【webのノイズテクスチャ】
こんにちはrey( @reydesign8376) です都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。 最近、ノイズエフェクト、ノイズ加工、ノイズテクスチャなどと言われるざらざらした粒状感のあ... -
FTP要らず！ローカルから直接サイトにファイルを簡単アップロードするVS CodeのSFTPプラグインの使い方
こんにちはrey(@reydesign8376)です！ VS CodeのSFTPプラグインを使ってサイトにファイルをアップロードする方法を備忘録として残してきます。では早速〜 SFTPって？ SFTPプラグインは、VS Codeでローカルファイルをリモートサーバーに簡単にアップロード...
