【React】画像を表示するパターン。
概要 Reactで画像を参照する方法は通常のhtmlとは方法が違うので、忘備録としてメモ。 また、画像を参照してCSSで背景画像として設定する方法もメモ。 画像を表示する方法 publicフォルダにある画像を参照する create-react-appでプロジェクトを作成するとpublicフォルダが作成されている。 publicフォルダ内に配置したどのようなファイルも、オンラインでアクセスできる。 例えば、publicフォルダにさらに画像だけのimagesフォルダを作成してpublic/images/dummy.jpgという画像が場合、ローカル環境（localhost）でReactを動かしているとき、画像は以下でアクセスすることができる。
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ
clip-path を使ってスマホで背景を固定表示する方法 - by Takumi Hirashima
スマホで背景を固定表示する方法を紹介します。 例えば、スマホでも background attachment fixed を使ったような表示をしたい時に便利な方法です。 clip-path を使った背景固定表示の方法 clip-path を使った背景固定表示の方法 背景画像を固定表示させる background attachment fixed は、スマホでは background-size: cover; と併用して使用することができません。そのため、背景を固定するためには、パソコンとスマホで別々の記述方法を利用する場合があります。 ですが clip-path を利用することで、パソコンとスマホを同じ記述で対応することができるようになります。 表示サンプルこちら。 HTMLはこちら。 <div class="fixed-wrap"> <div class="fixed"></div> <
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
デザインが楽になる、ずるい最新ツール・素材40個まとめ
「毎日のように数えきれない数のツールやサービスが登場し、どれが本当に必要なのかわからない」という方へ。 今回は、2024年に入って公開されたデザインに役立つ無料素材やツールをまとめてご紹介します。 「こんなのあったら便利なのに、」を叶える、かゆいところに手が届く便利ツール・素材を中心に、無料で利用、ダウンロードできるものをセレクトしています。 2024年のデザイントレンドでも何度も挙げられていた、「AIの力をうまく利用したツール」も増えています、合わせて確認してみましょう。 配色ツール Color Palette Generator キーワードを入力するだけで、それに合った配色を生成、見つけてくれる直感的なカラーツール。 Colors for Branding | Unlimited Graphic Design – Draftss 人間の感情に基づいて厳選したカラーパレット集。若々しい配
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
フォトショ(Photoshop)で背景を伸ばす方法4選を画像で解説| 株式会社LIG
こんにちは、Webデザイナーのまっつーです。 フォトショ(Photoshop)で背景を伸ばす簡単な方法について、実際の画像をお見せしながらわかりやすく紹介していきます。 写真を使ったデザインをしているとき、レイアウトの都合上「被写体はそのままで背景を伸ばしたい……」と感じることがあると思います。 この記事を読めば簡単にかつ自然に背景を伸ばす方法がわかります。 Photoshopで背景を伸ばす方法４選！ AI機能「生成塗りつぶし」で伸ばす もっとも簡単に精度高く背景を伸ばす方法、それがPhotoshopのAI機能を使った「生成塗りつぶし」です。 この機能が誕生してから作業時間が大幅に削減されました。 とっても便利な機能なのでぜひ覚えましょう！ 「切り抜きツール」から生成塗りつぶし まず初めに背景レイヤーのロックを外して通常レイヤーにします。 次にツールパネルから「切り抜きツール」を選択します
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
フォトショ(Photoshop)で背景を透過させる簡単な方法【図解】 | 株式会社LIG
こんにちは、Webデザイナーのまっつーです。 フォトショ(Photoshop)で背景を透過させる簡単な方法について、実際の画像をお見せしながらわかりやすく紹介していきます。 この記事を読めば背景を透明にする方法と透過データを書き出す方法がわかります。 フォトショで背景を透過する方法4選 ①新規作成時に透明の背景を設定する 最初から背景を透過させることが決まっていればこの方法を使いましょう。 まず「新規ファイル」をクリックします。 新規ドキュメントウィンドウが現れたら「カンバスカラー」のタブを開き「透明」を選択します。 最後に「作成」をクリックしましょう。 すると簡単に透明なカンバスができました。 ②マジック消しゴムツールを使う 「マジック消しゴムツール」はクリックした箇所と類似の色を消すことができる機能です。 「背景に色がついているけど透過させたロゴに変更したい」ときに便利なツールです。
商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン
サーバー不要＆外部とのデータのやりとり無しで画像から背景を削除できるオープンソースな軽量npmライブラリ「background-removal-js」を使ってみた
「background-removal-js」はブラウザ内だけで動作が完結する背景削除ライブラリです。サーバーとデータをやりとりしないため、サーバーコストが不要だったりデータが流出してしまう心配がなかったりと利点がたくさんありますが、実際のところ「ちゃんと切り抜いてくれるのか」が気になるところ。今回はデモを使ってさまざまな画像の背景を削除してみます。 imgly/background-removal-js https://github.com/imgly/background-removal-js background-removal-jsはパッケージマネージャーのnpm上で提供されており、簡単にウェブアプリに組み込めるようになっていますが、今回はすぐに利用できるデモ版を使ってみます。 デモ版の画面はこんな感じ。自分の画像をアップロードできるほか、手早く確認したい人のためにいくつかのサンプ
画像や動画から背景を切り取ることが可能なAIツール「Background remover AI」を使ってみた
画像や動画の加工を行っていると「画像や動画に映し出された被写体だけを切り抜いて、別の素材に流用したい」という状況になることもあるはず。一部無料のウェブアプリ「Background remover AI」を使えば好きな画像や動画から目的の被写体だけを切り取ることが可能とのことなので、実際に使ってみました。 Background remover AI - BackgroundRemoverAI.com https://backgroundremoverai.com/ Background remover AIにアクセスすると以下のような画面が表示されます。 Background remover AIの使い方は非常に簡単です。画像の場合「Remove image background(画像の背景を除去)」をクリック。 背景を除去したい画像を点線で囲まれたエリアにドラッグ＆ドロップします。 その後
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
CSS の element() 関数をご存知？
発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
商用利用でも完全に無料！ デザインやイラストにぴったり、高解像度8Kのテクスチャ素材がいっぱい -ResourceBoy
個人でも商用でも無料で利用できる、高解像度8Kのさまざまな種類のテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、段ボール、デニム地、水彩、グラデーションなどが揃っており、それぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。難点はダウンロードに少し時間がかかるくらいでしょうか。 テクスチャ素材はなんぼあってもいいですからね🍼
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#0003で半透明背景が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 21日目） | Ginpen.com
Blur Background
