コーディング

CSS

CSSで画像や要素を反転させる方法

画像や擬似要素など、要素を反転したい機会って意外と多く遭遇します。 わざわざ新しく画像切りたくないし長々とスタイル加えたくない!そんなとき、transformを使うことで簡単に反転させることができます。 See the Pen CSSで左右...
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でテキストを回り込ませると上の図のように、画像が浮くことでそこにテキストが回り込み、画像の高さ分を超えたテキストは幅いっぱ...
CSS

エリアの比率を変えずにレスポンシブ対応させる方法

レスポンシブ対応に必須の、エリアの縦横比を維持したまま可変させる場合の計算方法を紹介します。 今回は、一般的な写真サイズ(L版)と同じ比率のエリアにいらすとやさんからお借りした正方形の風景イラストをエリアいっぱいに表示させたいと思います。 ...
コーディング

jsに苦手意識を持つコーダーが、サイトに動きをつけるときにやること

私(コーダー)はあんまりJavaScript(以下、js)が得意ではない。なので、「こういう動きをつけてほしい」などという依頼は正直カンタンに言うなって…と身構えてしまう。 ただ、苦手意識が先行しているだけで、やってみたら意外とチョロかった...
スポンサーリンク