HTML/CSS

Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。

JavaScript/jQuery

“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョンについて設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。

HTML/CSS

いろいろなブラウザのユーザーエージェントスタイル(UserAgentStyle)の違いによる表示のズレを統一するために、公開されているCSSリセットを利用する方も多いかと思います。 今回は、最近よく使われている各種CSSリセットについて、主なHTML要素への適用結果とそれぞれのファイルサイズについて比較してみました。

JavaScript/jQuery

jquery.inviewはディスプレイのビューポート内(画面内)に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。

WordPress

WordPressサイトで画像の遅延読み込みが簡単にできるプラグイン”Native Lazyload”の使い方と注意点を紹介します。

WordPress

WordPressで子テーマを作って運用するときの子テーマを作る方法をまとめておきます。
下記の3つの手順で管理画面メニューの「外観 > テーマ」に親となるテーマのstyle.cssを引き継いだ子テーマが表示されるようになります。

HTML/CSS

表示される画面の幅に応じて文章の改行をコントロールしたい時の手段の一つとしてCSSでの対処が考えられます。
そんな時の記述方法の例を二つ紹介します。

WordPress

Word Pressのカスタマイズなどをするときにそのページがどのテンプレートを使っているのかを知りたい時があります。
そんなときに便利な”Show Current Template”というプラグインを紹介します。

HTML/CSS

Google Fontsを利用するときに使用する文字だけを読み込ませて軽量化する方法をご紹介します。

HTML/CSS

Google Fontsで日本語フォントを使う時の手順と、特定のブラウザで指定したフォントが表示されない問題の対策をご紹介します。