CSS│株式会社シーポイントラボ｜浜松のシステム・RTK-GNSS開発

【React】<svg>で描画した矩形を斜線で塗りつぶしする

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

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

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

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

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

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

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

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

決められた位置に格子状でUIを配置していく技術をグリッドといいます。 cssでは「display: grid」と「grid-template-columns」と「grid-auto […]

ボタンパーツの中のclassNameの指定方法には以下のような変わり種も存在します。 cssで二つのセレクタ(ボタンの基本レイアウトと色を決めるセレクタ)を設定しておいて後からc […]

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

amazonやメルカリでも使われている配送状況をお知らせする配送フローチャートを作りました。 html CSS 使う場合は、文字列の長さを意識してください。(長さによって少しズレ […]