あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD ビルド - Webデザイン制作

2023/04/30 228 users BUILD ビルド Web制作 Webデザイン制作 あなた

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient Animator Fuze グラデ... 続きを読む

オンライン会議用の背景画像を生成するやつを作った - hitode909の日記

2022/11/15 13 users hitode909 ヤツ オンライン会議用 日記 ジェネレータ

id:minemuracoffeeさんがAIを使って描いた絵を背景画像に設定されてる、というのをあさイチで見て、背景画像を自作するのは良いな、と思ったので、ちょっとブラウザでお絵かきするページを作って、ジェネレータを作った。 https://cute-grey-juice.glitch.me/ 使い方は簡単で、上のページをブラウザで開くだけ。 ただ開... 続きを読む

backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

2022/06/02 128 users background-image CSS アニメーション

CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackgr... 続きを読む

最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js

2022/04/06 23 users ライブラリ スクロール マウス スワイプ操作 Apple

マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作し... 続きを読む

あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/01 309 users Pulp Note Tips transform 現場 あなた

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 CSS 3D Transform Examples CSS 3D Transfor... 続きを読む

WEB会議などで使える背景画像 - 古典に親しむ | 国文学研究資料館

2021/01/06 328 users 古典 Web会議

在宅勤務やテレワーク、遠隔授業などでWeb・TV会議アプリケーション等の背景としてご利用いただける画像です。すべて国文学研究資料館が所蔵する資料から作成しています。ご活用いただければ幸いです。 「データベース」をクリックすると、使用している作品の書誌情報や他の画像をご覧いただくこともできます。 続きを読む

ビデオ会議などの自己紹介に役立つ「バーチャル名刺背景ジェネレーター」 - CNET Japan

2020/05/04 11 users 生成 キッズプレート CNET Japan ビデオ会議 ツール

キッズプレートは、名刺型背景をウェブ上で簡単に生成できるツール「バーチャル名刺背景ジェネレーター」を5月2日にリリースした。オンライン会議の背景画像に使うことで、自己紹介の場で活用できるという。 これはウェブ上に必要項目を入力し、任意の画像をアップロードするだけで、会議背景画像を生成。ダウンロードす... 続きを読む

WEB会議等で利用できる「仮面ライダーシリーズ背景壁紙」提供開始！ | 仮面ライダー公式ポータルサイト 仮面ライダーWEB | 東映

2020/04/22 11 users 遠隔 東映 背景 利用規程 会話

「仮面ライダーWEB」は、WEB会議などで背景としてご利用いただける「仮面ライダーシリーズ背景壁紙」を提供いたします。ぜひご活用下さい！ 【仮面ライダーシリーズ背景壁紙】利用規程 ・本画像データは個人が遠隔での会話を行うためのWEB会議アプリケーションを用いた背景画像としての利用を目的として提供しております... 続きを読む

アダルトゲームに「実在の洋菓子店」の外観、製作会社は謝罪して差し替えへ - 弁護士ドットコム

2019/11/22 30 users アダルトゲーム こやま 実在 パティシエ 外観

12月20日に発売予定のアダルトゲームに登場する店の外観に、人気の洋菓子店「パティシエ・エス・コヤマ」（兵庫県三田市）の外観が無断で使われていた問題で11月22日、ゲームの制作会社が謝罪、「背景画像をすべて差し替える」と発表した。 神戸新聞が、ゲームの主人公やヒロインたちが働く喫茶店として、「パティシエ・... 続きを読む

アダルトゲームに人気洋菓子店をモデルにした建物が登場し物議　該当箇所の背景差し替えへ - ねとらぼ

2019/11/22 25 users アダルトゲーム 物議 とらぼ こやま 背景

12月発売予定のアダルトゲーム「喫茶ステラと死神の蝶」に実在店舗をモデルとした建物が描かれていた問題で、同タイトルを手掛けるユノスが該当箇所の背景画像を差し替えると発表した。 ユノスの発表 神戸新聞NEXTによると、ゲーム内で兵庫県の人気洋菓子店「パティシエ・エス・コヤマ」の外観が無断で使用され、発売前... 続きを読む

SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ | Rriver

2019/10/11 26 users SVG Rriver width CSS アスペクト比

先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（ア... 続きを読む

Microsoft、「Wunderlist」の機能を統合した新生「Microsoft To Do」公開 - ITmedia NEWS

2019/09/10 54 users Wunderlist Microsoft 新生 移行 機能

Microsoft、「Wunderlist」の機能を統合した新生「Microsoft To Do」公開 Microsoftアカウントでマルチプラットフォームで使えるタスク管理ツール「Microsoft To Do」（旧「Microsoft To-Do」）がアップデートした。2015年に買収した「Wunderlist」の背景画像もあり、移行を呼び掛けている。 続きを読む

TRPGスタジオ｜オンラインセッションを簡単に楽しめる

2019/07/29 58 users オンラインセッション Twitter シナリオ 自作 合成音声

TRPGスタジオとは？ TRPGスタジオは、twitterのアカウントとシナリオとキャラシがあれば始められるテキストセッションツールです。 キャラクター立ち絵や背景画像は自作のものをアップロード可能で、フリーでつかえる素材も用意。 ティラノビルダーと連携することで合成音声を追加や、リプレイ動画も出力できます。 スマ... 続きを読む

filterプロパティで、どんな背景画像でもテキストが読める状態にする | かちびと.net

2019/05/07 10 users result fff ＢＧ background-image

Result どんな背景でもテキストを読める状態にする、というもの ちょっと語弊があるかもしれませんが、要は背景画像の明度とコントラストをfilterプロパティで抑えて#fffに指定したテキストの可読性を維持しよう、という内容です CGMサイトなんかで使う機会があるかも、と思ったので備忘録 css .bg { background-image:u... 続きを読む

シンプルで使いやすい！ブログやTwitterにぴったりの素敵な背景画像が生成できる国産の無料ツールが登場 | コリス

2018/07/05 29 users Twitter Facebook GitHub コリス 国産

ブログのアイキャッチ画像、TwitterやFacebookのカバー画像にぴったりの幾何学模様が美しいジオメトリックな背景画像が簡単に生成できる国産無料ツールを紹介します。 登録などの面倒なことは一切不要で、素敵な背景画像がじゃんじゃん作成できます。 GPIG -GeoPattern Image Generator GPIG -GitHub 作者様は以前、当ブ... 続きを読む

近未来用の背景画像！ターミネーターとかトロンにあるような時空間をワイヤーフレームで描いたデザイン素材 | コリス

2017/11/22 32 users コリス ワイヤーフレーム ターミネーター トロン 近未来

近未来の映画でよく見かける時空間をワイヤーフレームで描いた背景素材を紹介します。 個人でも商用でも無料で、Webやスマホアプリや動画でも同人誌などの紙のデザインでもロイヤリティフリーで利用できます。 Spacetime ...記事の続きを読む 続きを読む

FFシリーズ生みの親・坂口博信のお気に入り作品「ファイナルファンタジーIX」の美麗な背景画像を集めたアルバムが注目される - GIGAZINE

2017/07/05 38 users GIGAZINE Imgur ゲームクリエイター 坂口博信

2000年7月7日に発売された「ファイナルファンタジーIX」の美しい背景画像を集めたImgurのアルバムが、2017年になって注目を集めています。これはファイナルファンタジーの生みの親であるゲームクリエイターの 坂口博信 氏が「ファイナルファンタジーIXが一番お気に入り」と発言したことがきっかけとなっています。 声優のSungWon Cho氏が坂口博信と話しているムービーがコレ。 a specia... 続きを読む

背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】–[FIT BLOG-フィットブログ]

2017/06/29 22 users フェード 内藤 jQueryプラグイン 案件 康太

先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。そこでそれを可能にするjQueryプラグインを探していたところ、大変使い勝手の良いjQueryプラグインを発見したのでご紹介させていただきます。jQuery.BgSwitcher「jQuery.BgSwi...内藤 康太　/　2017.06.29 背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitch... 続きを読む

[CSS]object-fitの賢い使い方: インラインの動画を背景画像のようにブラウザいっぱいに表示するテクニック | コリス

2017/05/31 57 users スクリーン object-fit コリス デスクトップ スマホ

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。 レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示さ ...記事の続きを読む 続きを読む

個人的な Keynote ベストプラクティス 2017 - kakakakakku blog

2017/05/30 146 users kakakakakku blog KeyNote スライド

2017 - 05 - 30 個人的な Keynote ベストプラクティス 2017 Keynote 最近「どうやってスライドを作ってるの？」と聞かれる機会も増えてきたので，普段 Keynote を使っていて，特に意識しているポイントをベストプラクティスとしてまとめた．参考になれば！ Keynote Best Practice speakerdeck.com Unsplash 背景画像を選ぶときは... 続きを読む

背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」:phpspot開発日誌

2017/05/10 17 users phpspot開発日誌 fullPage.js パラメータ

fullPage.js - Parallax Extension 背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」 上下だけに画面が動くのでなく左右のスライド実装もできます。 挙動についてはパラメータでカスタマイズが効きます 関連エントリ スクロールと同時にアニメーションする様々なパララックスエフェクト実装「paroller.js」 続きを読む

カラオケＤＡＭの「選べる背景映像機能」を使って遊んでみたゾ！ - 　ヲサーンがコスしてカラオケとかｗ

2017/02/24 33 users DAM ヲサーン JOYSOUND レッツ カラオケDAM

2017 - 02 - 24 カラオケＤＡＭの「選べる背景映像機能」を使って遊んでみたゾ！ カラオケ討議 ひとりカラオケ スポンサードリンク ＤＡＭの選べる背景映像機能で遊ぼう！ レッツ、背景選択！ おさっぴろでぇす。 なんか久々にカラオケの話。 ＤＡＭにもＪＯＹＳＯＵＮＤにも、 好きな背景画像で歌う機能 が装備されている。 特にＤＡＭの方は、背景コンテンツが豊富で楽しい。 例えば・・・。 美女の... 続きを読む

無料・商用利用OK！塩を使った水彩画素材作りました | Webクリエイターボックス

2017/01/05 28 users Webクリエイターボックス 商用利用OK 水彩絵の具 技法

明けましておめでとうございます！本年もよろしくお願いします！最近手書き＆手描きにはまってるので、今年は小学生以来の手書き年賀状を作ってみました。その時水彩絵の具と塩で背景模様を作ったので、いくつかを素材として配布しようと思います。 背景画像としてそのまま使うのはもちろん、イラストなどでマスクを入れてもおもしろいと思います！ 素材をダウンロードする 水彩画＋塩の技法 簡単に、今回使った技法を紹介しま... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld ウインドウサイズ auto 横幅 img

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/01 826 users 実装 Webクリエイターボックス CSS小技集 コード タタ

はるか6年前に書いた記事「 少しのコードで実装可能な20のCSS小技集 」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像を... 続きを読む