【CSS】疑似クラスnth-childの各種とnth-of-typeの使い方
nth-childは、CSSのセレクタに追加して使う疑似クラスの1つで子要素の番号などを指定し適用します。例えば、ulが親だった場合、親要素から見て複数の子要素（li）がある中で、一部の要素のみ背景色をつけたいなどといっ […]
HTML/CSS の記事一覧
CSSだけで作るアコーディオンメニュー
誰が手がけたのがわからないようなすでにあるサイトの更新時に「アコーディオンで開くコンテンツ追加してほしい」と言われjsは追加したくないけど実現させる、CSSだけでアコーディオンメニューが作れるコードです。 尚、以下コード […]
footerをウィンドウ下部に固定するjs
コンテンツ量が少ない場合、フッターがブラウザの下部で止まって欲しいのに、上に上がっちゃう問題を「footerFixed.js」で解決します。 javascriptライブラリとしてこちらで公開してくださっています。設置方法 […]
smooth-scroll.js（スムーススクロール）の使い方
備忘録。 js呼び出し DLして自サーバーから呼び出して使っていましたが、CloudflareのCDNが利用できるので以下のように呼び出し。<head> の書けって方もいますが、私はWordPressなどの場合は& […]
CSSでシンプルな横スクロールのリスト（ul）
施工実績や導入事例などで、サムネイル付きのリストを、横スクロールにする方法です。 [crayon-673f0ae073571454059406/] [crayon-673f0ae073576748619125/] liの […]
MixItUp3の基礎的な設置方法
ソートをアニメーションで楽しく動かすMixItUp3 https://www.kunkalabs.com/mixitup/ オプションが豊富で様々な面白い動きができるんですが、まず基礎的な設置方法がよくわからなかったので […]
特殊文字の記号一覧
「特殊文字」は機種依存文字とも呼ばれ、いろんなものがあります。 例えば、①、②、③ これも特殊文字。 単位などもありますね。 HTMLを書いている時に、機種依存文字をそのまま記載してし […]
CSS：フローチャートをCSSで作成
お見積もりまでの流れや、作業の流れなどのフローを作成する場合のチャートのCSSです。見た目はこんな感じ。 [crayon-673f0ae073b97942660945/] [crayon-673f0ae073b9d952 […]
CSS：FAQなどのリストで文字を下げる
通常の2行目以降のインデント下げは以下。 [crayon-673f0ae073e3b860579945/] ただ、これでは3行目以降がうまくいかないし FAQなどのリストの場合も不便。 CSSで2行目以降の文字を下げて、 […]
電話をかけるa href=”tel:〜をスマホ以外で無効にする。
スマホで見てもらった場合、すぐに電話をかけて欲しいとの要望から、 a要素のhref属性を “tel:〜”と設定し、ブラウザのタップですぐに電話をかけられるようにします。 [crayon-673f0 […]