AI CSS Animations Make complex animations with your voice and AI. Your animation will appear here 🎬 No saved or generated animations available, prompt an animation above. Browse examples below for inspiration.
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
みなさんこんにちは、あんどう（@t_andou）です。 最近、画像生成AIの「Stable Diffusion」がとても話題になっていますね。 オープンソース・商用利用可能・精度も良いということで、僕もこれを使って何かしたいと思いましたが、ただ画像を生成するだけでは面白くありません。 そこで、 ・AIが生成した画像や「呪文（画像生成に使う文章）」を売買出来るマーケット ・生成した画像のNFT化をするサイト などを作れたら面白そうだと思ったのですが、時間がかかりそうなので、まずはサクッと着手できそうなところから試してみました。 作ったもの 前置きが長くなりましたが、今回作ったのはタイトルにもあるように『画像の素材配布サイト』です。 imagemart.net 画像の生成、ドメイン取得やサイト構築など全てを5時間くらいで作ったため、使い勝手はまだまだですが、どうぞ自由に使ってください。 画像の
2022年8月23日に無料公開された画像生成AI「Stable Diffusion」は、「ボールで遊ぶ猫」「森の中を走る犬」といった指示を与えると指示通りの画像を出力してくれます。Stable Diffusionはデモページで画像生成を試せる他、NVIDIA製GPUを搭載したマシンを用いてローカル環境で実行することも可能です。しかし、デモページは待ち時間が長く、NVIDIA製GPUは所持していない人も多いはず。Googleが提供しているPython実行環境「Colaboratory」を利用すれば、NVIDIA製GPUを所持していなくともStable Diffusionを待ち時間なしで実行する環境を無料で整えられるので、実際に環境を構築する手順や画像を生成する手順を詳しくまとめてみました。 Stable Diffusion with 🧨 Diffusers https://huggingf
レスポンシブサイトをテストする さまざまな電話モデルを使用すると、さまざまな解像度で応答サイトをテストできます。 最小の320px（iPhone 5）から最大の393px（iPhone 15 PRO）まで ワンクリックで電話を変えることができ、本当にシンプルで速い サイトのモバイルバージョンを表示するためにいくつかのボタンをクリックする必要はなく、このシミュレーターを使用すると、ワンクリックで実行できます。 そして、コンピュータバージョンに戻るには、それは同じように簡単です 以下のような 50 を超えるデバイスが利用可能です。 iPhone 5（CSS 320px解像度） iPhone 11（CSS 375px解像度） Galaxy S22（CSS 360px解像度） iPhone 15（CSS 393px解像度） Xiaomi Redmi Note 6 PRO (CSS 393px解像度
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
アプリケーションのテストなどで利用できる、リアルな架空の個人情報データ（疑似データ）を生成するツールです。
入力されたテキストに対してルビをつけて返してくれます。 パラメータについて 今回少し変わってると感じたのは、gradeパラメータです。 小学校何年生までの漢字にルビをつけるか、という粒度で設定ができます。 もし、gradeで3を設定すると、1~2年生で習う漢字にふりがなをつけず、 それ以上の難しさの漢字にのみルビをつけてくれます。 1: 小学1年生向け。漢字（注2）にふりがなを付けます。 2: 小学2年生向け。1年生で習う漢字にはふりがなを付けません。 3: 小学3年生向け。1～2年生で習う漢字にはふりがを付けません。 4: 小学4年生向け。1～3年生で習う漢字にはふりがなを付けません。 5: 小学5年生向け。1～4年生で習う漢字にはふりがなを付けません。 6: 小学6年生向け。1～5年生で習う漢字にはふりがなを付けません。 7: 中学生以上向け。小学校で習う漢字にはふりがなを付けません。
Web制作のたびに繰り返し手こずって、時間のかかってしまう作業ってないでしょうか。 作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツールをまとめてご紹介します。 面倒な作業もあっという間に終わるだけでなく、どれも無料で利用でき、これまでのWeb制作がガラリと変わるコード不要の「ノーコード」Webページビルダーや、AI技術を活用したサービスも続々増えています。 「Web制作をもっと手早く終わらせたい」と考えているひとは、まずは自分だけのお気に入りツールを見つけてみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール 面倒なWeb制作におさらば！便利すぎる新登
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
当ブログで何故か一番アクセス数がある、User Agent Switcher の携帯用のXML(2007年11月) で配布してる、 UserAgent切替できるFirefox拡張『User Agent Switcher 』用のuseragentswitcher.xmlが、だいぶ古くなってきたので見直してみました。 下記のzipをダウンロードして解凍してください。 useragentswitcher.xml.zip (22KB) 丁度、iPadの確認が欲しかったのでw おまけで個人的趣味でゲーム機も追加してます。 User Agent SwitcherへXMLの導入方法 事前準備） ・User Agent Switcher をFirefoxにインストールする（要Firefox再起動） ・useragentswitcher.xmlをダウンロードしてローカルに保存しておく Firefoxのメニュ
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
CSSのプロパティを正しい並び順でソートし直してくれる『CSScomb』 CSScomb OnlineはCSSファイル内のプロパティを一定のルールにしたがった正しい並び順でソートしてくれるオンラインツール。 使い方はコードをペーストして『RESORT』をクリックすれば結果が右半分に表示されます。 変換したコードは『Copy result code』をクリックすればすぐにコピーができます。 ソートのルールはあらかじめ設定されていますが、必要に応じ『Setting』からカスタマイズすることも可能です。 こちらのオンライン版以外にも各種エディタ用のプラグインなども公開されているので、興味のある方は試してみてはいかがでしょう。 書き方によってはエラーとなる場合があるようですが、具体的にエラーとなるケースなどはこちらのページでに詳しく載っています。 （特にLESSやSASSの記法では注意するケースが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![2/4 無料のウェブ作成ソフトMicrosoft Expression Web 4 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/65b750dd8a3c1a1e5ec50e0f32522775683fc03f/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F6%2F3%2F0%2F7%2F201805291227%2Ftopimg_original.jpg)
