WordPressのプラグイン”Easy Table of Contents”を使ってスクロールの現在地ハイライト表示ができる目次をサイドバーに固定表示する
“Easy Table of Contents”を利用してサイドバーウィジェットにスクロール現在位置のカレント表示ができる目次を固定表示させる方法を紹介します。その目次をアレンジする際のCSSコード例も紹介しています。また、”Easy Table of Contents”の”Sticky TOC”についても紹介しています。
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
HTMLのチェックボックスを使ってアコーディオン型UIを作る方法
Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。
Webページ内のテキストの表示文字数（行数）をCSSで制限する方法
CSSを利用し、webページ内のテキストを省略して表示を希望する分量に制限する方法について紹介します。 今回紹介するのは、CSSの-webkit-line-clampプロパティを利用してテキストの表示を希望する任意の行数に制限し、テキストがその行数に収まらない場合には省略して表示させる方法です。
CSSのborderプロパティを使用して三角形、矢印などの図形を作成する方法
webサイトのページ内でよく使用する矢印や三角形などを、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。 三角形、矢印、大なり記号、チェックマーク、吹き出し、ステップ表示をCSSのborderプロパティを利用して作成する時の記述例などを紹介します。
WordPressの投稿や固定ページにそのページ固有のCSSやJavaScriptを設置する方法
WordPressサイト内の個別の投稿ページや固定ページだけに適用させたい固有のCSSやJavaScriptを設置する方法について紹介します。今回紹介する方法は、WordPressのプラグインなどを使わずにfunctions.phpにコードを設置してカスタマイズする方法です。
高機能なスライダーを設置できる”Swiper”(v11)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョンについて設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。
CSSのclip-pathプロパティを使って三角形、矢印などの図形を作る方法
webサイトのページ内でよく使用する矢印や三角形などの図形を、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。よく使われそうな図形である三角形、矢印、大なり記号、チェックマーク、吹き出し、ステップ表示をCSSのclip-pathプロパティを利用して作成する時の記述例などを紹介します。
CSS変数（カスタムプロパティ）の使い方
CSS変数（カスタムプロパティ）について簡単に使い方などを紹介します。CSS変数とはCSSファイル全体を通してプロパティを再利用できる仕組みのことで、これを利用することで同じプロパティの値を何度も繰り返し記述することを避けたり、1箇所のCSS記述を変更することでサイト全体を編集することができるなどのメリットがあります。