CSS【CSS】HTMLを入れ子にせずに、要素の内側に線を引く方法
エリアの枠やボタンなどで登場しがちな、少しだけ内側に線が引いてあるデザインを再現する方法について考えます。見出しなどにも応用できるので覚えておくと重宝します。 HTMLを入れ子にする方法 要素を入れ子にして、いちばん外側の要素...
コーディング
CSS
CSSPhotoshopの「光彩（外側）」を、CSSで再現トライ！
PhotoshopでWebページのデザインを作成するときにテキスト領域に「光彩（外側）」をつける。 デザイナー兼コーダーの身としては絶対やりませんが、支給されたデザインで遭遇したことがあります。そして、自分ではやらないくせに、支給デ...
CSS【CSS】番号付きリスト（ol）の番号を装飾する方法
番号付きリスト（ol）の番号を装飾したいとき、ありませんか？デフォルトの数値を非表示にしてテキストで入力するのは、マークアップ的にスマートじゃない感じがしますし、番号が増減するとき更新が手作業になるのが面倒です。 ということで今回は...
CSS【HTML/CSS】iframeの下に謎の余白が空く問題
iframeで要素を埋め込んだとき、下の要素とピッタリつけたかったのに何故か隙間が空いていることに気づきました。探ってみると、盲点すぎる原因でした。 iframeタグは、インライン要素 早速ですが、下に、iframeの下にdi...
CSS【CSS】gridを使って要素を縦並びで複数カラムにする簡単な方法
要素を複数カラムで縦方向に並べるのって、結構悩みどころです。。今回は、gridを使って縦並びにする方法をご紹介します。 gridで縦並びにするカギは、grid-auto-flow gridを使った縦並びは、grid-auto-...
CSSCSSで画像や要素を反転させる方法
画像や擬似要素など、要素を反転したい機会って意外と多く遭遇します。 わざわざ新しく画像切りたくないし長々とスタイル加えたくない！そんなとき、transformを使うことで簡単に反転させることができます。 See the ...
CSS【HTML/CSS】テキスト入力するときチカチカ点滅する棒みたいなやつ、何て名前？ついでに消し方も紹介
フォームでテキスト入力するときチカチカする縦棒、ありますよね。inputで点滅するやつ。 先日これの名前がわからなくて、ちょっと困りました。ググりたいけどそもそもなんてググればいいかわからないとき、ありますよね笑？ そんな人の...
CSS【独りごと/CSS】擬似クラス「:has」がめちゃくちゃ便利！
すみません、独りごとです。 特定の子要素を持つ親要素へスタイル付けができる擬似クラス、:has。今までjsを使わないとできなかったことがCSSだけでできるのはうれしい！ 使いたいけど、Firefoxが非サポート（2023年1月...
CSS【CSS】position: fixed; が、content-visibility が原因で固定されなかった話
WordPressのとある既存テーマをカスタマイズしていたときにposition: fixed;を付与したのに、固定されずスクロールしてしまう現象に遭遇しました。原因を突き止めてみたら、至極当たり前のことでした。考えたら当たり前なんだけど...
JavaScript【JavaScript】入力された電話番号に自動でハイフンを追加するTips
電話番号のハイフン入力が必須のフォームでハイフンの入れ忘れが多くて困ってる、との相談が。人間は忘れる生き物なので、そらそうだ。それならハイフンを自動で追加することはできないものか？ と思い、作成しました。紹介するコードをコピペで使え...