CSS 【独りごと/CSS】擬似クラス「:has」がめちゃくちゃ便利！
すみません、独りごとです。 特定の子要素を持つ親要素へスタイル付けができる擬似クラス、:has。今までjsを使わないとできなかったことがCSSだけでできるのはうれしい！ 使いたいけど、Firefoxが非サポート（2023年1月現在）、、早く...
CSS
CSS 
CSS 【CSS】position: fixed; が、content-visibility が原因で固定されなかった話
WordPressのとある既存テーマをカスタマイズしていたときにposition: fixed;を付与したのに、固定されずスクロールしてしまう現象に遭遇しました。原因を突き止めてみたら、至極当たり前のことでした。考えたら当たり前なんだけど、...
CSS CSSでn個目系を指定する擬似クラス「:nth-child」「:nth-of-type」の、よくわかる解説
CSSで、要素の何番目かを指定する擬似クラス（ここでは勝手に「n個目系」と呼びます）を使う機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。 n個目系擬似クラスの種類 n個目系擬似クラスには、以下の種類がありま...
CSS コピペでOK！画像を使わずCSSで三角形をつくる方法×2
以前なら三角形は画像一択でしたが、単純な三角はCSSで表現が可能です。三角形のジェネレーターも存在しますが、今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。 1.塗りつぶしの三角形 まずは、塗りつぶしの三角形を紹介し...
CSS 画像下揃えでテキストを回り込ませる方法
ある日、支給されたデザインを確認したときに画像とテキストが下揃えになったテキスト回り込みに出会いました。普通floatでテキストを回り込ませると上の図のように、画像が浮くことでそこにテキストが回り込み、画像の高さ分を超えたテキストは幅いっぱ...
CSS エリアの比率を変えずにレスポンシブ対応させる方法
レスポンシブ対応に必須の、エリアの縦横比を維持したまま可変させる場合の計算方法を紹介します。 今回は、一般的な写真サイズ（L版）と同じ比率のエリアにいらすとやさんからお借りした正方形の風景イラストをエリアいっぱいに表示させたいと思います。 ...
CSS CSSで画像をトリミングする
画像を使い回したいけど、場所によって比率が異なるときなど、CSSで画像トリミングができると便利です。 今回は、背景画像の場合と、imgタグの場合のトリミング方法をまとめました。 元画像はこちら（hamarikyu.jpg） 都会のオアシス・...
CSS liタグを複数列で縦並びさせたいとき、超絶簡単な方法があった！
liタグを、縦並びで、複数カラムで表示したいときの方法です。言葉だけではうまく伝えられないので、さっそく紹介していきます。 方法1、2とも、HTMLは共通です。山のラインナップの偏りはスルーしてください。。 【方法1】column-coun...
CSS aタグをリンクさせたくないとき、CSSで解決できる
とりあえずリンクは設置するけれど、期日が来るまでリンクを無効にしたいときのための良い方法がありました。 CSSの「pointer-events」で設定 HTML CSS プレビュー リンクしないよ たったこれだけ。なんて簡単！わざわざdiv...
CSS iOSでスクロールバーが出ない時の対処法
スクロールさせるレイアウトの場合、 高さを固定してはみ出した分は HTML CSS とすればスクロールバーが表示される仕組みです。 ところがタッチデバイスの場合はスクロールバーが表示されず ユーザーにスクロールできるエリアだとわかりにくかっ...