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

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

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

Cloudflare、「CAPTCHA」に代わる「Turnstile」に完全移行、誰でも無制限に使える無料版も提供

2023/10/20 106 users CAPTCHA CloudFlare Turnstile

Cloudflare、「CAPTCHA」に代わる「Turnstile」に完全移行、誰でも無制限に使える無料版も提供：簡単なのになぜbot対策ができるのか？ Cloudflareは、同社が発行する全ての「CAPTCHA」を、新しい代替機能である「Turnstile」に置き換えたと発表した。数行のコードを追加するだけで、他のプラットフォームのWebサイト運営... 続きを読む

【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集 - PhotoshopVIP

2022/07/15 551 users Twitter PhotoshopVIP NIKE テスラ

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサ... 続きを読む

この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

2021/11/30 211 users ブッダ Calc Flexbox CSS 成り行き

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer T... 続きを読む

最初の数行を入力すると小説の続きを書いてくれるAI登場　設定次第で俳句やニュースも

2021/10/21 287 users 俳句 吾輩 小説 最初 AI登場

ユーザーが冒頭の文章を数行書くと、続きをAIが作文するWebサービス「AIのべりすと」が登場した。小説の他に、俳句やニュースのような文章も生成できる他、文章の要約もできる。 ユーザーが冒頭の文章を数行書くと、続きをAIが作文するWebサービス「AIのべりすと」が登場し、一部で話題になっている。例えば、「吾輩は猫... 続きを読む

スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる | コリス

2021/07/13 168 users コリス ビューポート スクロール アニメーション ライブラリ

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using ... 続きを読む

2分間コーディングのすすめ、コードを書く習慣のハードルを下げる

2021/03/28 631 users コーディング作業 ハードル 最初 サンプルコード 習慣

最近私は「2分間コーディング」と呼んでいる取り組みを行っています。文字通り2分間で完了する程度の、非常に簡単なコーディング作業を繰り返すことで、 技術書の最初のページの数行のコードだけ写経して走らせる ネットで見つけたサンプルコードをコピペして走らせる など、多くはコピペするだけで終了するくらいの作業... 続きを読む

CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 | コリス

2019/10/29 52 users prefers-color-scheme コリス CSS

iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にラ... 続きを読む

意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法 | コリス

2019/08/30 217 users コリス 文末 CSS 省略 ライセンス

テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-c... 続きを読む

わずか数行のJavaScriptで機械学習をフル活用できる無料Webサービス「StackML」を使ってみた！ - paiza開発日誌

2019/07/03 107 users 骨格 0310lan 用途 顔検出 プログラム

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に機械学習を活用したプログラムをJavaScriptで構築できる無料のWebサービスをご紹介します！ 画像解析、顔検出、表情分析、骨格・姿勢解析、特徴分析…など、さまざまな用途において機械学習を活用したプログラムをJavaScriptで実現できるので、とてもユニーク... 続きを読む

Google、学習用データの匿名化ツール「TensorFlow Privacy」公開　差分プライバシー採用 - ITmedia NEWS

2019/03/07 51 users Gmail スマートリプライ ITmedia News 技術

開発者は数行のコードを追加するだけで、AIモデルのプライバシーを強化できるという。GoogleがGmailのスマートリプライなどで採用している「差分プライバシー」技術に基づいている。差分プライバシー技術は、米Appleも「iOS 10」で利用している。差分プライバシーは、大まかに言えば、リアルなユーザーデータを個人が特... 続きを読む

今すぐ導入可能！JavaScriptで3Dの地球上にデータを可視化できる「Gio.js」を使ってみた！ - paiza開発日誌

2018/09/06 78 users paiza開発日誌 JavaScript インパ 可視化 機能

どうも、まさとらん（@0310lan）です！ 今回は、わずか数行のJavaScriptコードを書くだけで3Dの地球上にデータをマッピングして可視化できるライブラリをご紹介します！ 初心者でも簡単に扱えるように設計されており、カスタマイズ性やインタラクティブな機能を追加するのも簡単です。 輸出入のデータ・統計情報・インバ... 続きを読む

「数行しかコード書いてないの。仕事しろよ」プログラマの仕事はコードのわからない人には理解できず戦争が勃発する説 - Togetter

2018/05/28 325 users パク Togetter 判明 ｗｗ プログラマ

プログラマの仕事 「うーんなんだこのバグ」 →コード読む →わからん →わかってきた！ →やっぱりわからん →またコード読む 一週間後にしてほんの数行のコードで解決することが判明 コードなんもわからん人 「ほーん一週間で数行しかコード書いてないの？wwちゃんと仕事しろww」 →そして戦争へ 続きを読む

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ

2018/04/20 101 users WPJ sticky position 草案 CSS

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できる position: sticky が便利で面白い使い方ができそうなので実験してみました。 仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れません... 続きを読む

ついにベールを脱いだ金融庁のフィンテック政策｜FinTechに詳しくなるノート｜note

2017/10/27 164 users FinTech プリンシプル ベール Note フィンテック

昨日（2017年10月25日）に、今後の金融行政の方針を占める「金融レポート」が 金融庁から発表 されました。今年の「金融レポート」では、あまり目立たないのですが、フィンテックに対する金融庁の方針が4つの原則（プリンシプル）として明確に打ち出されました。（ 要約版 には数行しか記載がないため、興味のある方は 「金融レポート」本体 の100-108ページをお読みください。） 　昨年の「金融レポート」... 続きを読む

たった数行のPythonコードで打者大谷翔平がどれだけ凄いのかを見てみる - Lean Baseball

2016/07/03 119 users 打者 Lean Baseball Pythonコード 新聞

2016 - 07 - 03 たった数行のPythonコードで打者大谷翔平がどれだけ凄いのかを見てみる Python Baseball SABR 先に言っておくと、 あくまでもネタです 機械学習 とか高度なネタは出てきません. あくまで参考程度に、ただし 世の中のスポーツ系サイトや新聞より まっとうにデータで見ている(と思われる) そんな感じで気楽に見てもらえればと. 打者「 大谷翔平 」の201... 続きを読む

JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく

2016/02/03 694 users パラメータ ライブラリ ウェブ 類似 グラフ

ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「 CanvasJS 」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご... 続きを読む

CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips | コリス

2015/11/04 581 users カンマ区切り コリス デバイス テクニック CSS

リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsは前回紹介した時（紹介記事）から倍近く量が増えているので、改めて全項目を紹介します。 CSS Pr... 続きを読む

[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips | コリス

2015/10/23 424 users jQuery GitHub コリス MITライセンス 商用

jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用... 続きを読む

わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ

2015/07/29 807 users APPGIGA エディタ ヤバイ Adobe製 0310lan

どうも、まさとらん（@0310lan）です！ 自分のWebサービス・アプリ内で、本格的な「画像編集」の機能を持ったツールを組み込んで使いたい人に朗報です！ 数行の「JavaScriptコード」を追記するだけで、Adobeが提供する画像編集に必要な機能全部入りのエディタが、自分のWebサービス上で使えるツールをご紹介いたします！ 【 Adobe Creative SDK 】 もともとは、「Aviar... 続きを読む

人工知能で“荒れない”コメント欄--「議論の場」醸成めざしメディアに無料提供 - CNET Japan

2015/07/07 72 users 人工知能 議論 CNET Japan クーロン コメント欄

人工知能や自然言語処理を活用したサービスを提供するクーロンは7月7日、機械学習や自然言語処理、行動分析にもとづく独自の人工知能を搭載した、読者が健全な議論を交わすための“荒れない”コメントシステム「QuACS（クアックス）」をウェブメディア向けに提供開始した。人工知能を活用したコメントシステムは世界で初めてだという。 ウェブサイトに数行のJavaScriptコードを埋め込むことで、読者が記事の内容... 続きを読む

プログラミングとなら、できること／図書館となら、できること番外編 読書猿Classic: between / beyond readers

2015/05/30 380 users 雑用 between スクリプト 大抵 少年

少女：聞きたいことがあるんだけど。プログラミングとかする？ 少年：しない。 少女：前に何かちょこちょこっと作ってたことなかった？ 少年：コンピュータ周りの雑用をやらせるスクリプトのこと？　大抵は数行くらいの使い捨てだけど。繰り返し使ってるのは、近代デジタルライブラリーからダウンロードして一つのファイルにまとめる奴くらい。 少女：あ、それ欲しい。そういうのってどうやったら作れるようになるの？ 少年：... 続きを読む

【翻訳】ReactをjQueryの数行に要約する | POSTD

2015/04/21 490 users React POSTD デバッグ アプリケーション 不変性

「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるか... 続きを読む

決済プログラミングをはじめてみよう - Yahoo! JAPAN Tech Blog

2015/02/16 133 users Yahoo JAPAN Tech Blog みよう 近藤 売り

こんにちは、決済金融カンパニーの近藤です。 Yahoo! JAPAN ウォレット FastPayをリリースして1年近くたち、定期的にアップデートをしております。 （弊社で開催するOpen Hack DayでもFastPayを利用しています） 数行で動くのが売りのFastPayですが、基本的なところの問い合わせをいくつか受けたりします。今回は決済になじみのないエンジニア向けに、クレジットカード決済に... 続きを読む

【翻訳】それでも独自のCSVを書くつもりですか？ | POSTD

2014/11/12 584 users コンマ POSTD 改行 CSV フィールド

あなたは自分でCSVを書いてみたいですか？　フィールドはコンマで区切り、行は改行で分けます。簡単ですよね。数行書けば勝手が分かるというものです。 でも、ちょっと待ってください。 フィールド内にコンマがある場合は？ ダブル […]あなたは自分でCSVを書いてみたいですか？　フィールドはコンマで区切り、行は改行で分けます。簡単ですよね。数行書けば勝手が分かるというものです。 でも、ちょっと待ってくださ... 続きを読む