CSS– tag –
-
【CSS mask-image】SVGを使ったクリッピングマスクのサイズや位置を自由に調整したい！
この記事は 【CSS clip-path】SVGを使ったクリッピングマスクの位置を右から○pxにするには の続編です！ デモはこちら clip-pathを使ったバージョンでは、デザインデータがそもそも「シェイプでマスク」をつかった前景と、不透明度を使った背景の2枚の画像... -
【CSS clip-path】SVGを使ったクリッピングマスクの位置を右から○pxにするには
CSSのclip-pathを使ったクリッピングマスクを、SVGのパスで作ることができます。しかし、レスポンシブ対応や位置の調整が難しいものです。 今回は、クリッピングマスクの位置を「画面の右端から○○px」という指定にしておしゃれなメインビジュアルにしたい... -
【jQuery】details要素・summary要素でアコーディオン【メモ】
デモはこちら 【実装】 HTML（ベースの構造と動作） <details class="c-accordion js-accordion"> <summary class="c-accordion__title js-accordion__title"> <span class="c-accordion__title__icon">Q</span>よくある質問です... -
IE11とさよならしたら全力で使えるHTML/CSSまとめ【40個以上】
Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした！（Windows8.1終了までIE11頑張るみなさん、お疲れ様です） 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません！ とい... -
サイト全体のletter-spacing設定を子要素にうまく継承するには
Webサイトのデザインをするとき、サイト全体のテキストに対して文字間100＝letter-spacing:0.1emを指定する、なんてことがありますよね。 でも、コーディングの仕上がりで微妙に最終的なletter-spacingが異なる…なんで…。確認してみたところ、letter-spaci... -
遅延読み込みしたGoogle FontsのFOUTを、Font Loading APIを使って軽減してみた
【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版 にて、Google Fontsを遅延読み込みする方法についてまとめました。 しかし、この方法では「 FOUT（Flash of Unstyled Text）」という現象が避けられません。 ページ... -
【メモ】縮小表示した画像のレンダリングとimage-rendering:crisp-edgesの使用結果まとめ
以下の3ブラウザでの画像のレンダリング状態の調査と、image-rendering: crisp-edgesを使った場合のレンダリング具合のメモ。 Chrome 98（Edge 98も見た目おんなじでした）Safari 15.2IE11 様々なブラウザでの表示確認用に作ったページ 【Chrome×縮小表示... -
【帳票CSS】A4印刷用のHTMLを作ろう（Chrome用）
「そろそろ真面目に、HTMLで帳票を描く話をしようか」https://qiita.com/cognitom/items/d39d5f19054c8c8fd592 を参考にしました！ありがとうございます。 【Chromeできれいに印刷できる帳票をHTMLで作ろう！】 今回はこちらの請求書のWordテンプレートを... -
【CSS】コツはパーセント計算！positionをレスポンシブで使うとズレるときに気を付けること
「position レスポンシブ」「position レスポンシブ ずれる」などの検索キーワードで当ブログを訪れてくださる方がいることに気づいたのですが、【css】position:absolute怖くなくなるまで徹底解剖！の記事では「基準位置の要素の大きさも、配置する要素の... -
【css】paddingが効かないと思ったらdisplayを疑え！ floatにも注意
paddingといえば下記が有名ですが【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから IE11のmain要素以外にもpaddingが効かなくなることはよくあります。 【dispalyをinline-blockやblockに明示的に変えないと、paddingが効かないorバグる...