Webサイトをダークモードに対応させる方法 | システム設定連動から切り替えボタンまで
Webサイトをダークモードに対応させるための実装方法を解説します。システムの設定に連動させる方法と、ページ内にダークモード/ライトモードを切り替えるボタンを設置する方法を、具体的なコード例を交えて説明します。
簡単にダークモード対応サイトにできる”Darkmode.js”の使い方
webサイトを簡単にダークモード対応サイトにすることができる”Darkmode.js”の使い方を紹介していきます。“Darkmode.js”は、すでに出来上がっているサイトにも数行のコードを追加するだけでサイトをダークモードに対応させることができるライブラリです。
Bootstrapの使い方ガイド【Webサイト内でBootstrapを使うための準備をする】
BootstrapをWebサイトに導入してサイト内でBootstrapの各機能を利用できるようにするための準備の方法について紹介します。具体的な内容としては、CDNを利用する場合と、ダウンロードしたBootstrapのファイルをサイトに設置して利用する場合の二つの方法について紹介していきます。
Bootstrapの使い方ガイド【レスポンシブなレイアウトを作成する】
Bootstrapを利用してレスポンシブなレイアウトを簡単に作成する方法について紹介します。Bootstrapを利用してレスポンシブなレイアウトを作成する際に押さえておくべき要素のうち主なものについて簡単に紹介した後、Bootstrapを使ってレスポンシブレイアウトを作成するときの具体的な実装例をいくつか紹介します。
「シンプルなリンクカードジェネレーター」の使い方
シンプルなリンクカード（ブログカード）のジェネレーターを作りましたので、使い方などについて紹介します。 シンプルなリンクカードジェネレーターは、リンクカードを作成したいページの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とCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
HTMLのチェックボックスを使ってアコーディオン型UIを作る方法
Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。