【CSS】疑似クラスnth-childの各種とnth-of-typeの使い方
nth-childは、CSSのセレクタに追加して使う疑似クラスの1つで子要素の番号などを指定し適用します。例えば、ulが親だった場合、親要素から見て複数の子要素（li）がある中で、一部の要素のみ背景色をつけたいなどといっ […]
HTML/CSS の記事一覧
CSSだけで作るアコーディオンメニュー
誰が手がけたのがわからないようなすでにあるサイトの更新時に「アコーディオンで開くコンテンツ追加してほしい」と言われjsは追加したくないけど実現させる、CSSだけでアコーディオンメニューが作れるコードです。 尚、以下コード […]
CSSでシンプルな横スクロールのリスト（ul）
施工実績や導入事例などで、サムネイル付きのリストを、横スクロールにする方法です。 [crayon-64848617a89fd192761685/] [crayon-64848617a8a03359906384/] liの […]
特殊文字の記号一覧
「特殊文字」は機種依存文字とも呼ばれ、いろんなものがあります。 例えば、①、②、③ これも特殊文字。 単位などもありますね。 HTMLを書いている時に、機種依存文字をそのまま記載してし […]
CSS：フローチャートをCSSで作成
お見積もりまでの流れや、作業の流れなどのフローを作成する場合のチャートのCSSです。見た目はこんな感じ。 [crayon-64848617a8cd6416830239/] [crayon-64848617a8cdf505 […]
CSS：FAQなどのリストで文字を下げる
通常の2行目以降のインデント下げは以下。 [crayon-64848617a8f94629771344/] ただ、これでは3行目以降がうまくいかないし FAQなどのリストの場合も不便。 CSSで2行目以降の文字を下げて、 […]
電話をかけるa href=”tel:〜をスマホ以外で無効にする。
スマホで見てもらった場合、すぐに電話をかけて欲しいとの要望から、 a要素のhref属性を “tel:〜”と設定し、ブラウザのタップですぐに電話をかけられるようにします。 [crayon-64848 […]
CSS：Clrefixについて再考しました。
長い間、「class=”clearfix”」にお世話になっておりました。 しかし、これもメンテナンスする時期かなーと再考することにしました。 旧 clearfix 私がよく使っていたclearfi […]