今回はスマホ表示でもパララックスができるsimpleParallax.jsの使い方を紹介します。 デモページ 実装内容は以下 スマホでもタブレットでもパララックスさせるbackground-image...

今回はCSSでIE11を判定して表示を切り替える方法と、JavaScriptでIE11だけpolyfillを読み込む書き方について紹介します。 前提条件は以下 JavaScriptは事前にトランスパイ...

今回はjQueryではなく、ネイティブのJavaScrip（Vanilla.jsとも呼ぶ）で、個人的に良く使う書き方についてまとめてみました。今後も少しずつ追加していきます。 【脱jQuery】よく使...

今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。 説明環境は以下 macOS Catalina v10.15...

今回はHTMLとCSSで漢字にルビを振る方法を紹介します。 前提条件は以下 IE11に対応するAndoroidに対応するサイト全体でgooglefontsのNoto Sans JP、もしくはNoto...

今回はIntersection Observerを使ったスクロールアニメーションを実装する方法を紹介します。まずはデモサイトを作成したので確認してみてください。 デモサイト 前提条件は以下 jQuer...

今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介します。縦向きと横向きの画像を一緒にスライダーさせたいときなど、画像の横幅や高さが違う場合にオススメの実装方法です...

今回はGoogle Maps APIを使った地図の埋め込みと、カスタマイズ方法を紹介します。 実装内容は以下。 GoogleMap APIは取得済みブログではなく、企業ホームページに埋め込み地図の色や...

今回はテキストやサムネイル画像をクリックしたときに、YouTube動画をポップアップ表示してくれるプラグインを紹介します。まずはデモサイトを作成したので表示を確認してみてください。 デモサイト 実装内...

サイトを効率的に作成していくにはファイルの管理方法や、クラスの命名規則など、統一されたルールが必要です。今回は自分なりのFLOCSSを含めたサイト設計について説明します。 説明する前提条件は以下。 あ...