「シンプルなリンクカードジェネレーター」の使い方
シンプルなリンクカード（ブログカード）のジェネレーターを作りましたので、使い方などについて紹介します。 シンプルなリンクカードジェネレーターは、リンクカードを作成したいページのURLを入力するとHTMLとCSSのコードを生成します。そのコードを貼り付けるだけでリンクカード（ブログカード）を設置することができます。
WordPressサイトにCSSやJavaScriptのファイルを読み込ませて利用する方法
WordPressで制作したサイトで、WordPressに元々含まれていない外部のCSSやJavaScriptのファイルを読み込ませて利用する際の方法として、推奨されているやり方について紹介していきたいと思います。CDN経由でのファイル読み込み方法とサイトに設置したファイルの読み込み方法についてそれぞれ紹介します。
WordPressのプラグイン”Easy Table of Contents”を使ってスクロールの現在地ハイライト表示ができる目次をサイドバーに固定表示する
“Easy Table of Contents”を利用してサイドバーウィジェットにスクロール現在位置のカレント表示ができる目次を固定表示させる方法を紹介します。その目次をアレンジする際のCSSコード例も紹介しています。また、”Easy Table of Contents”の”Sticky TOC”についても紹介しています。
HTMLのdetailsタグとsummaryタグで作るアコーディオン型UI
HTMLのdetailsタグとsummaryタグを利用してアコーディオン型のUIを作成する方法について紹介します。detailsタグとsummaryタグは比較的新しい要素なのでこれらのタグについての紹介から、これらの要素を使ってアコーディオンを作る方法、作成したアコーディオンをアレンジする方法まで紹介していきます。
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
HTMLのチェックボックスを使ってアコーディオン型UIを作る方法
Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。
HTMLとCSSだけで作るタブ型のUI
Webページなどでよく見られるタブ型のUIを作る方法について紹介します。 タブ型のUIもいろいろな実装の方法があると思いますが、この記事内ではHTMLとCSSだけを使って設置する場合の方法についてお話ししています。 HTMLとCSSによるタブ型UIの仕組みの紹介から作成の流れ、実装する際の記述例まで紹介しています。
Webページ内のテキストの表示文字数（行数）をCSSで制限する方法
CSSを利用し、webページ内のテキストを省略して表示を希望する分量に制限する方法について紹介します。 今回紹介するのは、CSSの-webkit-line-clampプロパティを利用してテキストの表示を希望する任意の行数に制限し、テキストがその行数に収まらない場合には省略して表示させる方法です。
HTML要素をCSSで中央寄せする３つの方法
今回はCSSのdisplay: grid;、display: flex;、position: absolute;の３つのプロパティを使ってHTML要素を中央に配置させる方法について紹介していきます。それぞれの方法ごとに画像を中央に配置する場合と、テキストを中央に配置する場合とについて例を挙げながら紹介していきます。