カテゴリー: CSS / Bootstrap / JS

ゼロから始める SEO 対策 ~ HTML ヘッダー編

SEO対策のTO DO リストをまとめました。まずはHTMLヘッダーで行う対策から。

Bootstrap 5 の標準機能を使った 脱 JQuery の lightbox

Bootstrap 5 のフルスクリーンモーダルを使い、JQuery に依存しない Lightbox の機能を実現します。

Google Analytics でクリック数がカウントできる脱 JQuery 独自ソーシャルボタン

ソーシャルボタンを自作するメリットとしては、思い通りのデザインで作れる、読み込み時に他のサイトとの通信が発生しないため描画速度が向上する、などがあり、かつ Google タグマネージャと組み合わせることでクリック数をカウントする事ができるようになります。

Swiper を使った様々なスライダー実装

Swiper はタッチ操作にも対応したスライダーのモジュールであり、多くのオプションが用意されており様々なシーンで利用できます。

グラデーションライブラリ

クールで利便理性高めのグラデーションCSSを置いていきます。随時追加更新していく予定です。

JQueriy スムーススクロールと Bootstrap との共存

JQuery のスムーススクロールと Bootstrap のクラス定義とを共存させる方法をご案内します。

APNG によるアニメーションバナー

PNG でアニメーションをサポートした新形式、APNG を使ったアニメーションバナーの作成方法をご案内します。

簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)

例えばプロダクトキーや API キーなど、長くて複雑な文字列を、訪問者に提供している場合、この機能を提供することで、訪問者のクリップボードに文字列をコピーして、その後はペーストだけすればよい、という形で利便性を高めること…
続きを読む

Bootstrap の Spinner を利用してロード中画面を表示する

Bootstrap の Spinner を利用してロード画面を表示するサンプルをご紹介します。

Collapse を特定して開閉アイコンを付けたい場合

ひとつのページ内に複数の Collapse を利用している場合の、Collapse を特定してアイコンを付与する方法です。

JavaScript で実装するカウントダウンリダイレクト

リダイレクトを設定する際に、おしゃれかつユーザビリティを高めた方法として、リダイレクトまでの秒数をカウントダウンして表示してあげる方法があります。

CSS で縁取り文字

画像を使わずに CSS だけで文字を縁取りして、白抜き文字や黒抜き文字を作ることができます。

CSS で印刷時に要素を非表示にする

印刷時に崩れて表示されたりして、いっそのこと印刷時には要素を非表示にさせたい場合があります。