CSS 【HTML/CSS】iframeの下に謎の余白が空く問題
iframeで要素を埋め込んだとき、下の要素とピッタリつけたかったのに何故か隙間が空いていることに気づきました。探ってみると、盲点すぎる原因でした。
iframeタグは、インライン要素
早速ですが、下に、同じHTMLのレイアウ...
コーディング
CSS CSS 【CSS】gridを使って要素を縦並びで複数カラムにする簡単な方法
要素を複数カラムで縦方向に並べるのって、結構悩みどころです。。今回は、gridを使って縦並びにする方法をご紹介します。
gridで縦並びにするカギは、grid-auto-flow
gridを使った縦並びは、grid-auto-...
CSS 【CSS】transformを使って要素を反転させる
画像や擬似要素など、要素を反転したい機会って意外と多く遭遇します。
わざわざ新しく画像切りたくないし長々とスタイル加えたくない！そんなとき、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
電話番号のハイフン入力が必須のフォームでハイフンの入れ忘れが多くて困ってる、との相談が。人間は忘れる生き物なので、そらそうだ。それならハイフンを自動で追加することはできないものか？
と思い、作成しました。紹介するコードをコピペで使え...
CSS よくわかる、CSSでn個目系を指定する擬似クラス「nth-child」「nth-of-type」の解説
CSSで、要素の何番目かを指定する擬似クラス（ここでは勝手に「n個目系」と呼びます）を使う機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。
n個目系擬似クラスの種類
n個目系擬似クラスには、以下...
CSS コピペでOK！画像を使わずCSSで三角形をつくる方法×2
以前なら三角形は画像一択でしたが、単純な三角はCSSで表現が可能です。三角形のジェネレーターも存在しますが、今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。
1.塗りつぶしの三角形
まずは、塗りつぶしの...
CSS 画像下揃えでテキストを回り込ませる方法
ある日、支給されたデザインを確認したときに画像とテキストが下揃えになったテキスト回り込みに出会いました。普通floatでテキストを回り込ませると上の図のように、画像が浮くことでそこにテキストが回り込み、画像の高さ分を超えたテキストは幅いっ...