CSS│株式会社シーポイントラボ

【CSS】一番目以外の要素にスタイルを適用する

タイトルにある通り、一番目以外の要素にのみ指定したスタイルを適用したいという事があったので備忘録としてまとめ。最初、もしくは最後の要素だけというのは実装した事があるのですが、一番 […]

タイトルに React と付けましたが、一部を修正すれば HTML でももちろん動作します。 <svg> で描画した矩形を斜線で塗りつぶす方法についてです。ちなみに、 […]

　fr は CSS のグリッドレイアウト中で使用可能な値の単位です。これは端的にいうと利用可能な空間を等分して扱う時に使う値の単位です。fr は恐らく fraction（分数）の略 […]

モバイルの Web デザインで、なるほど！と思ったので備忘録としてまとめ。新規会員登録など、複数ステップある登録作業があるページを実装する際に、今なにをしていて、あとどのくらい作 […]

使用頻度が高くないので、毎回忘れてググっているのでまとめ。 CSS でマウスポインターの形状を変更する方法についてです。例えば、指定した div 要素にマウスオーバーした際に、ポ […]

今回は、CSS で画像を任意の位置でトリミングする方法についてです。普段は画像の中央をトリミングするだけだったので、位置の調整などは要らなかったのですが、今回は画像のやや上の方を […]

　よく管理画面で次の様なテーブルの行にカーソルをあわせるとその行の色が変わるデザインがあります。これは横幅が長い表において人間の目で左端と右端のデータを取り違えない点で特に有効なデ […]

　次の様なはみ出した文字が見えなくなる問題があります。　この問題が起きる場合のひとつとして異なる背景色に文字がまたがり文字色が片方の背景色に近い色の場合があります。　対処方法は […]

　題の通りです。少なくとも Firefox 97.0.1 で題の問題が起きます。これは次のコードとデモで再現できます。　これを Firefox で見ると次のスクリーンショットの様 […]

Web ページを印刷する際に、特定のコンテンツ間で改ページさせたい、という要望があったので、その手順についてのまとめです。初めて使ったのですが…そもそも CSS で改ページってで […]

　時折、ある程度は折り返してもよいが、折り返しのタイミングはてにおはや句点、読点にして欲しい、といった要望があります。そういった際には次の様に句単位で span をつけ、各 spa […]

Google Chrome や Microsoft Edge で再現しなかったので発見が遅れました…。タイトル通り、<table> 要素の <td> 内に […]