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