CSS Modules で作る SVG Icon Component
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
小林 I Webデザイナー on Twitter: "ロゴ画像についてた白背景を消すCSSコード https://t.co/CyA51IEvTF"
ロゴ画像についてた白背景を消すCSSコード https://t.co/CyA51IEvTF
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
視野が広がるCSSの妙 〜object-fit 編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。毎日ソファで寝る男、フロントエンドエンジニアのザワです。 この度、知らなければ損をしている、知っておけば得しかない、視野が広がるCSSの妙シリーズを開始する運びになりました。 今回は、object-fit編です。 はじめに object-fit、みなさんはバリバリ使いこなしていますか？ 私はというと、バリバリ使っています。それこそ、レガシーなCSSやっちゃってるんじゃないの！？ SEOで画像検索に注目が高まっているのにbackgroundやっちゃってるの！？ なんて上から目線で言いたくなってしまいます。だって、object-fitを知っているから。 じゃあobject-fitって何ができるの！？ 美味しいの！？ ってな具合に気になってしまいますよね。そうでしょう。 ざっくり説明すると、background-sizeプロパティでcoverやらcontainやらで、諸々やっていたこ
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
CSSやJavaScriptで画像の保存を防止する方法4種類 ｜ Tips Note by TAM
画像の保存を完全に防ぐことはできませんが、右クリックなどから画像を保存されにくくする実装方法を4種類試してみましたのでご紹介します。 ■目次 画像の上に要素をかぶせる pointer-eventsを使う -webkit-touch-calloutとuser-selectを使う contextmenuとdragstartを使う 1. 画像の上に要素をかぶせる 画像の上に要素をかぶせて、画像をクリックできないようにする方法です。 See the Pen img-protect01 by tam_yi (@tam_yi) on CodePen. .img-protectの疑似要素を画像と同じ大きさにして、画像の上にかぶせるようにしています。 <div class="img-protect"> <img src="http://via.placeholder.com/160x120" class=
体感速度をぐぐっと改善！Medium風プログレッシブ画像ローダーの実装テク
このサイト、表示が遅いな…とユーザーに思われないためによく使われる、画像の遅延読み込み。見栄えがよく、シンプルで使いやすい実装方法を紹介。 ページをスクロールして要素がビュー内に入ると、ぼやけた低解像度の画像がフル解像度の画像に置換される「プログレッシブ画像」をFacebookやMediumで見たことがあることでしょう。 プレビュー画像は幅20pxほどと小さく、高圧縮のJPEG画像です。ファイルサイズは300バイト未満なのであっという間に表示され、読み込みが速い印象を与えます。実際の画像（フル解像度）は必要に応じて読み込まれます。 プログレッシブ画像はすばらしいテクニックですが、いまのところ出回っているソリューションは複雑なものです。幸いなことに、ちょっとしたHTML5、CSS3、JavaScriptで以下のようなコードを作成できます。 わずか463バイトのCSSと1007バイト（圧縮後）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳