HTML / CSS / jQuery コーディング

画像をポップアップ表示できるFancyboxの使い方を解説します。 まずはデモページをご覧ください。 デモページを見る   最初に「jQuery」と「fancybox」をCDNで読み込みます ...

お問い合わせページがあるサイトでは、多くがページ内にメールフォームを設置していると思います。 メールフォームは、これといった対策をしていないと海外から大量のスパムメールが送られてきてしまいます。 Wo ...

コピペで使えるページネーションです。 多少編集が必要かと思いますが、WordPressでも使えると思います。 まずはデモページをご覧ください。 デモページを見る   HTMLはシンプルにリス ...

主にレスポンシブデザインとして利用されると思いますが、画面の横幅サイズに応じて画像を別の画像に切り替える方法をご紹介します。   まずはデモページをご覧ください。 画像切り替えの確認は、ブラ ...

上部メニューを固定する際によく利用する「position:fixed」ですが、幅を指定して、「margin:0 auto;」にしても中央寄せが出来ません。 この解決方法と、ついでにページ内リンクのずれ ...

以前に入力フォームの「placeholder」についての記事を書きましたが、今回もフォーム関連で、入力項目のフォーカス時にChromeで自動表示される枠線を消す方法を解説します。 実際はChrome以 ...

メールフォームでテキストを入力する項目でよく使う「placeholder」ですが、ブラウザによってテキストの色が異なります。 そのため、例えばテキスト入力フォームの「placeholder」を薄い色に ...

過去に同じ内容の記事を書きましたが、内容が古くなっているので新しく作り直しました。 新着情報などでよく見る、日付・カテゴリ・タイトルを並べて表示する形式です。 スマホで見た場合は、タイトルが改行されま ...

2021年7月現在でのfaviconのサイズと設置について解説します。 サイズについて favicon（ファビコン）のサイズは何種類もありますが、下記の4つがあれば十分だと思います。 ・16px × ...

ページを読み込み中に表示するローディング画面は、現在ページを読み込んでいると思ってもらうためや、会社や店舗のイメージを伝えるためにも、あると良い演出です。 色々なアニメーションのローディングがあります ...

過去にレスポンシブの「table」を紹介しましたが、今回はスマホによってレイアウトを変えるのではなく、そのままのレイアウトで横スクロールで表示する方法を紹介します。 列の項目が多く、横に長い「tabl ...

年内最後の投稿になる今回は、今までで一番アクセスの多い「レスポンシブな「dl dt dd」を作る」の最新版をご紹介します。 以前の内容では「float: left;」を使って横並びにしていましたが、最 ...

画像にオンマウスすると、影が付いたり拡大する効果を「transition」「box-shadow」「transform」を使って作ってみました。 それぞれの効果について解説していきます。 最初にデモペ ...

今回は、スクロールで要素が表示された時に、フワッとしたアニメーションで表示する「ScrollReveal.js」を紹介します。 各要素を時間差で表示させることも出来るので、例えば複数の画像を同時に表示 ...

「Font Awesome」をCSSの疑似要素で指定した際に、アイコンが表示されなかったり、文字化けしたりする場合の解決方法です。 結論から言うと「font-weight」を指定します。 例えば、リス ...

IEのサポートが終了したことで、堂々と使えるようになるCSSが出てきます。 そんな中で今回は、ユニークな小技になりますが、簡単に反映できるCSSをご紹介します。 お問い合わせフォームなどで利用する、入 ...

画像の端や一部にテキストを被せる（乗せる）デザインです。 ◆まずはデモページをご覧ください。 デモページを見る   テキストを縦中央に配置するために、テキストの子要素に下記の記述をするのがポ ...

CSSで横幅を指定しても「padding」や「border」を入れることで、指定した横幅以上に広がってしまう事があります。 そこで「padding」や「border」を記述した場合とその見え方、解決方 ...

軽量で実装が簡単な「simpleParallax.js」を使い、パララックス効果を与える方法を解説します。 HTMLの記述もシンプルです。 ◆まずはデモページをご覧ください。 デモページを見る &nb ...

「img」タグに「loading="lazy"」を追記するだけで、画像の遅延読み込み（lazy-load）が実現でき、ページの表示を早くすることが可能になりました。 遅延読み込みは、ブラウザのスクロー ...