高機能なスライダーを設置できる”Swiper”(v11)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョンについて設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。
HTMLのチェックボックスを使ってアコーディオン型UIを作る方法
Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。
各種CSSリセットの比較
いろいろなブラウザのユーザーエージェントスタイル(UserAgentStyle)の違いによる表示のズレを統一するために、公開されているCSSリセットを利用する方も多いかと思います。 今回は、最近よく使われている各種CSSリセットについて、主なHTML要素への適用結果とそれぞれのファイルサイズについて比較してみました。
”jquery.inview”を使って画面内に現れた要素にフェードインなどの動きをつける方法
jquery.inviewはディスプレイのビューポート内（画面内）に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。
画像の遅延読み込みが簡単にできるプラグイン”Native Lazyload”
WordPressサイトで画像の遅延読み込みが簡単にできるプラグイン”Native Lazyload”の使い方と注意点を紹介します。
WordPressで子テーマを作る方法
WordPressで子テーマを作って運用するときの子テーマを作る方法をまとめておきます。
下記の3つの手順で管理画面メニューの「外観 > テーマ」に親となるテーマのstyle.cssを引き継いだ子テーマが表示されるようになります。
Webサイト内の文章の改行をCSSでコントロールする方法
表示される画面の幅に応じて文章の改行をコントロールしたい時の手段の一つとしてCSSでの対処が考えられます。
そんな時の記述方法の例を二つ紹介します。
WordPressページのテンプレートがわかるプラグイン”ShowCurrentTemplate”
Word Pressのカスタマイズなどをするときにそのページがどのテンプレートを使っているのかを知りたい時があります。
そんなときに便利な”Show Current Template”というプラグインを紹介します。
Google Fontsでの日本語フォントの使い方と注意すべきポイント
Google Fontsで日本語フォントを使う時の手順と、特定のブラウザで指定したフォントが表示されない問題の対策をご紹介します。