JavaScript

【JavaScript】上向きスクロールで表示されるヘッダーの作り方｜Vanilla JS・CSS transition・throttle・モバイル対応まで解説

JavaScriptで上向きスクロール時にだけ表示されるヘッダーの作り方を完全解説。Vanilla JS（jQuery不要）でのスクロール方向判定、CSS transitionによるスムーズなアニメーション、requestAnimationFrame/throttleによるパフォーマンス最適化、モバイルの慣性スクロール対策、スクロール量に応じた表示制御、コピペで使える完成コードまで網羅。
2023.07.26
JavaScript
HTML/CSS

【CSS】n番目のみなど特定の順序の要素にスタイルを適用する方法

CSSはウェブページを美しく、魅力的に、そして使いやすくする強力なツールです。 しかし、それを最大限に活用するためには、その多く
2023.07.26
HTML/CSS
HTML/CSS

PCとスマホで異なるCSSを適用する方法

スマートフォンからタブレット、PCまで、現代のウェブは多様なデバイスで利用されています。このような状況下で、ウェブデザイナ
2023.07.26
HTML/CSS
HTML/CSS

【CSS】画像を視覚的に暗く見せる方法

Webデザインでは、視覚的な影響力を持つ画像は、ユーザー体験を向上させるための強力なツールです。しかし、場合によっては画像が明
2023.07.26
HTML/CSS
HTML/CSS

【CSS】textareaのサイズを固定して変更できなくする方法

こんにちは、皆さん！ある特定のレイアウトを維持することが重要なウェブデザインに取り組んでいますか？フォーム要素がページの
2023.07.24
HTML/CSS
HTML/CSS

超簡単！Google Fontsを使ったWebフォントの導入方法

Webフォントは、ウェブページに独自のスタイルや見た目を与えるためのツールであり、Google Fontsのような外部ライブラリから使
2023.07.24
HTML/CSS
HTML/CSS

【CSS】横並び要素でボタンの下揃えを行う方法

近年、CSS FlexboxはWebデザインの世界で確固たる地位を築いてきました。その驚くべき柔軟性と強力な機能により、Webデザイナーと開発者
2023.07.24
HTML/CSS
HTML/CSS

【CSS】初心者向け：Flexboxを使った子要素の等間隔配置テクニック

Flexboxは、Webデザインとレイアウトをシンプルかつ効果的に行うための強力なCSSツールです。その中でも、子要素を均等幅で配置する
2023.07.24
HTML/CSS
HTML/CSS

【CSS】美しく整える！CSSでテキストの両端を揃える方法

テキストの両端を美しく揃えることは、ウェブデザインにおいて重要な要素の一つです。CSSを使用することで、テキストを均等に配置し
2023.07.24
HTML/CSS
WordPress

【WordPress】一覧ページに特定の投稿を表示しない方法｜カスタムフィールド＋pre_get_postsで除外

WordPressのトップページ・一覧ページから特定の投稿を非表示にする方法を、カスタムフィールドのチェックとpre_get_posts＋meta_queryでのクエリ段階の除外で解説します。ループ内で隠すとページネーションが崩れる理由と、Custom Field Suite・ACF・標準カスタムフィールドいずれでも使える実装を紹介します。
2023.07.22
WordPress
jQuery

【jQuery】「jquery.mb.YTPlayer」プラグインを使用してYouTube動画をWebサイトのメインビジュアルの背景に設定する方法

ウェブデザインのトレンドは常に変わっていきますが、一つ注目すべき傾向として、動的で視覚的なコンテンツがウェブサイトにおけるユ
2023.06.27
jQuery
jQuery

【jQuery】追従ヘッダーの高さに合わせてアンカーリンクの移動先を調整する方法｜オフセット補正完全ガイド

モダンなウェブデザインでよく使われる追従ヘッダー（固定ヘッダー）ですが、アンカーリンクを設定した際に追従ヘッダーの存在によって
2023.05.13
jQuery
jQuery

jQueryでアンカーリンクのスムーズスクロールを実装する完全ガイド｜固定ヘッダー対応・easing付き

アンカーリンクをクリックすると、指定された要素までスムーズにスクロールすることができる、スムーススクロール機能は、ウェブ
2023.05.04
jQuery
jQuery

簡単に作れる！jQueryを使ったアニメーション付きハンバーガーメニューの実装方法

今回は、jQueryを使ったハンバーガーメニューの実装方法について解説します。 ハンバーガーメニューは、スマートフォンやタブレット
2023.05.04
jQuery
WordPress

【WordPress】Contact Form 7に完了画面を追加する方法｜wpcf7mailsentでリダイレクト・ページ内メッセージ

Contact Form 7の送信後に完了画面を表示する方法を、wpcf7mailsentイベントでサンキューページへリダイレクトする方法と、リダイレクトせずページ内に完了メッセージを表示する方法の2通りで解説します。特定フォームだけに限定する書き方も紹介します。
2023.05.04
WordPress
HTML/CSS

視覚効果が魅力的！jQueryとCSSを活用したズームインアニメーションスライドショーの実装方法

ウェブデザインにおいて、トップページのメインビジュアルは、訪問者に強い印象を与えるために重要な役割を果たします。特に、フ
2023.05.04
HTML/CSS
WordPress

Contact Form 7に確認画面と完了画面を追加する方法｜Multi-Step Forms・wpcf7mailsentリダイレクト

Contact Form 7に確認画面と完了画面を追加する方法を、Contact Form 7 Multi-Step Formsプラグインで解説。完了画面へのリダイレクトは非推奨のon_sent_okではなく、現行CF7のwpcf7mailsentイベントで実装します。MW WP Formなどの代替手段も紹介します。
2023.05.04
WordPress
WordPress

Contact Form 7で宛先をカスタムフィールドから取得して動的に変更する方法（安全な実装）

Contact Form 7で投稿のカスタムフィールドからメール宛先を取得し、フォームの送信先を動的に変更する方法を解説。hidden値を信用せず送信時にpost_idからサーバー側で宛先を再取得する、オープンリレーを防ぐ安全な実装を紹介します。
2023.05.03
WordPress
HTML/CSS

斜めに伸びる要素を実現するCSSアニメーション

こんにちは！今回は、CSSアニメーションを駆使して、斜め方向に伸びるオブジェクトを作成する方法をご紹介します。このアニ
2023.05.03
HTML/CSS
WordPress

【WordPress】絞り込み検索機能を実装する方法｜セレクトボックス・チェックボックス・pre_get_posts

WordPressで絞り込み検索機能を実装する方法を、セレクトボックスとチェックボックスの2例で解説。pre_get_postsでのフィルタリング、$_GETパラメータのサニタイズ（absint）やis_searchガードなどセキュリティ面の注意点まで実装コードで紹介します。
2023.05.02
WordPress
次のページ