CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました

2023/11/28 147 users スライダー CSS ライブラリ HTML テクニック

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦... 続きを読む

一番星はてのとおしゃべりできるようになりました - 一番星はての開発ブログ

2023/05/01 171 users 一番星 OpenAI ChatVRM App デフォルト

先日、pixivさんがChatVRMという3Dキャラクターと会話できるオープンソースを公開していたので早速一番星はてので試してみた。 下のサイトは一番星はてのの3Dモデル、人格設定、声設定がデフォルトになっているだけのChatVRMのデモページと同等である。 https://chat-vrm-hateno.vercel.app/ おしゃべりするにはOpenAIの... 続きを読む

日本語Alpacaデータを用いてJapanese-Alapaca-LoRAを作ったので公開します【デモページあり】｜kun1emon｜note

2023/03/26 130 users Note

⚠️注意今回公開するのはLoRAを用いて作成したLLaMAの日本語化Adapterでありモデル自体ではありません。 LoRAをマージするベースのLLaMAは商用不可であり、今回公開するAdapterで日本語化したモデルも商用利用はできません。 OpneAIの利用規約で、OpenAIサービス、ChatGPTの出力結果を競合モデル開発用途に利用することは... 続きを読む

中国産の画像AI「ERNIE-ViLG」が“二次元キャラ”に強いと話題　新しいデモページ公開

2022/09/01 249 users baidu 画風 油彩 水彩 大規模データ

デモページでは、画像のイメージを言葉で入力し、画風を指定することで、イラストを1回につき6通り生成できる。画風は「水彩」「油彩」「アニメ風」など7種類。Baiduは中国語での利用を推奨しているが、英語も入力できる。 ERNIE-ViLGは、Baiduが手掛ける大規模データ「Wenxin」を基に、同社が開発しているAI群の一つ。... 続きを読む

画像生成AI「Stable Diffusion」を低スペックPCでも無料かつ待ち時間なしで使う方法まとめ

2022/08/24 705 users Stable Diffusion NVIDIA製GPU

2022年8月23日に無料公開された画像生成AI「Stable Diffusion」は、「ボールで遊ぶ猫」「森の中を走る犬」といった指示を与えると指示通りの画像を出力してくれます。Stable Diffusionはデモページで画像生成を試せる他、NVIDIA製GPUを搭載したマシンを用いてローカル環境で実行することも可能です。しかし、デモページ... 続きを読む

PHPとSQLiteをWebAssembly化し、Webブラウザ上でWordPressを実行可能にしたデモをVMwareが公開

2022/08/21 151 users MySQL CMS SQLite VMware PHP

VMwareのWasm Labsは、Webブラウザ上でWordPressを実行可能にしたデモを公開しました。 デモページをWebブラウザで開くと、実際にWebブラウザ上でWordPressが実行されます。 WordPressはオープンソースで開発されている代表的なCMSです。PHPで開発されています。バックエンドデータベースとしてMySQLが使われることが一... 続きを読む

「全ての住所フォームがこうなってほしい」　SIerが公開した“使いやすい入力欄”の作り方が話題　ソースコードも掲載

2022/03/01 305 users SIer 知見 ひとまとまり ソースコード 住所フォーム

SIerのオープンコレクターが公開した、使いやすい住所入力フォームを作る知見をまとめたブログ記事が話題だ。「郵便番号を入れる枠はひとまとまりに」といった機能の必要性などを説明しており、デモページやソースコードも掲載している。 「郵便番号を入れる枠はひとまとまりに」「郵便番号を基にした住所の自動入力を搭... 続きを読む

200行のVue.jsでスネークゲームを作った - Qiita

2019/09/28 99 users スネークゲーム GitHub Qiita github.io

こんにちは、猫チーズです。 社内のVue.js勉強用プログラムとして1時間ほどで簡単なスネークゲームを作ったところ、メンバー各々が魔改造などして、一時的に社内でスネークゲームが流行りました。 デモページ https://miyauchiakira.github.io/vue-game-snake/ GitHub ソースコード https://github.com/miyauchiakira/vu... 続きを読む

[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css | コリス

2019/04/09 63 users フレームワーク コリス 外部CSS head内 CSS

シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSのフレームワークを紹介します。 class付与を一切必要としないスタイルシートで、HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できます。 water.css water.... 続きを読む

難解なコードをAIで要約、可視化。Facebook AI Researchがデモページと論文を公開 | Ledge.ai

2019/02/28 112 users Research Facebook 関数 イスラエル工科大学

機械翻訳を活用し、難解なコードの要約、構造の可視化をしてくれる「Code2Seq」の論文とデモページをイスラエル工科大学とFacebook AI Researchが公開しました。 膨大な量のコードを簡単な文章で要約他人が書いたコードは、「どんな処理なのか」を知るだけでも、理解が容易になります。Code2Seqは、関数の中でどんな処理... 続きを読む

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs | コリス

2019/02/25 703 users コリス dependencies Issue 階層 言語

フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、... 続きを読む

Vim を WebAssembly に移植した - はやくプログラムになりたい

2018/07/09 676 users WebAssembly vim github.com 実物

久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこち... 続きを読む

Vim を WebAssembly に移植した - はやくプログラムになりたい

2018/07/09 676 users WebAssembly vim github.com 実物

久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこち... 続きを読む

JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場　「Coinhiveより嫌」「悪夢」と話題 - ITmedia NEWS

2018/06/20 498 users Coinhive 物議 スクリプト 了解 悪夢

JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場　「Coinhiveより嫌」「悪夢」と話題 閲覧者に無断でCoinhiveを設置したサイト運営者が摘発され物議をかもす中、すべてのJavaScriptについて、閲覧者に許可を取るには――そんな発想で作られたデモページが公開された。スクリプトの実行のオンオフをいちいち選... 続きを読む

[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル | コリス

2015/07/27 232 users コリス NAV チュートリアル CSS スニペット

レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery<... 続きを読む

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js | コリス

2015/06/30 90 users コリス script プルダウン エレメント Body

デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定... 続きを読む

最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ | コリス

2015/04/05 478 users コリス CSS Ope CodyHouse 最新チュートリアル

最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Ope... 続きを読む

あっと驚くウェブサイトをつくろう！プレミアム新作WordPressテンプレートまとめ - Photoshop VIP

2015/02/10 93 users ウェブサイト Photoshop Vip テクノロジー 参考

WordPressを使ったウェブサイトが増えているいま、最新トレンドやテクノロジーを採用した、高機能なテンプレート素材がたくさん公開されています。今回は充実したコンテンツを作成できる、プレミアム新作WordPressテンプレート素材をまとめてご紹介します。 どのテンプレート素材もうまく今年のデザイントレンドを取り入れており、デモページを眺めているだけでもサイト制作の参考になりそうなデザインばかりで... 続きを読む

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR | コリス

2014/12/19 65 users Onepager コリス div section要素 Step

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファ... 続きを読む

JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス

2014/12/10 129 users ローディング コリス SVG Step SVGファイル

JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGフ... 続きを読む

Illustfolio 3 - イラストポートフォリオサイトを一瞬で作れるTumblrテーマ

2014/11/05 120 users Tumblrテーマ 無料Tumblrテーマ 一瞬 好評

The easiest way to make your own portfolio. イラストポートフォリオサイトを一瞬で作ろう Illustfolio 3は、イラストポートフォリオサイトが一瞬で作れる無料Tumblrテーマです。 バージョン3.0は、今までで最も大きなアップデートです。より簡単・より快適に使えるようにしました。 デモページを見る デザインを一新 Illustfolio 2で好評... 続きを読む

Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive | コリス

2014/09/09 238 users コリス Responsive static Adaptive

デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わ... 続きを読む

東のエデンのジュイスをHTML5でできる限り再現してみた - Qiita

2014/08/21 55 users Qiita Eden エデン HOYA HTML

デモページ 実際の出力はデモページで試すことができます。 http://garoo.jp/demo/eden/ やりたかったこと ナビゲーションの音声を作りたくて、CCFFVIIの戦闘のナビゲーションの音声を作ってみた。 ・HTML5の音声合成でコンピューターが話している感じの音声を実現してみる どうせなら日本語で実現したいので、東のエデンのジュイスにもチャレンジしてみた。 やったこと HOYAの... 続きを読む

レスポンシブデザインに対応したHTML5テンプレート集「HTML5 UP」 ｜ ライフハッカー［日本版］

2014/07/19 205 users レスポンシブデザイン ライフハッカー CSS テンプレート

「HTML5 UP」はレスポンシブデザインに対応したHTML5テンプレートをたくさん集めたサイトです。デモページがそれぞれ用意されているので、画面サイズによりどのように変化するのかを確かめることができます。また、テンプレートはCSSやJSとともにダウンロード可能です。 以下に使ってみた様子を載せておきます。 まずHTML5 UPへアクセスしましょう。さまざまなテンプレートが目に入ってきます。このよ... 続きを読む

サイトで右クリックしたら他のサイトへ飛ばすjQuery｜WEB Drawer

2014/07/16 50 users jQuery WEB Drawer 約束 右クリック禁止 以下

こんにちは、かしゅうです。 右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。 デモページ デモページは以下から。右クリックすると別ページの飛ぶので注意。 右クリックしたら他のサイトへ飛ばすのデモページ JavaScript デフォルトだと、みんな... 続きを読む