2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users CSS GitHub WEB制作者 一行 まとめ

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

Linuxの開発者であるリーナス・トーバルズ氏が、ふとしたきっかけで数行のコードを調整したところ、Linuxのパフォーマンスが2.6%向上した話

2024/11/14 51 users リーナス・トーバルズ氏 Linux Meta パフォーマンス

Jeffry Alvarado @jalva_dev Linuxの開発者であるリーナス・トーバルズ氏が、ふとしたきっかけで数行のコードを調整したところ、Linuxのパフォーマンスが2.6%向上しました。数百万台のサーバーで稼働するLinuxにとって、この2.6%の向上は非常に大きな成果です。参考までに、Metaのような企業では、サーバパフォーマンス... 続きを読む

数行のコードでAIエージェントがブラウザを操作！Python×Sentientを用いたブラウザ制御 - Qiita

2024/10/15 18 users Qiita AIエージェント 操作 ブラウザ コード

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 続きを読む

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サイト運営... 続きを読む

数行のコード追加でStable Diffusion生成画像を高品質にする「FreeU」、Llama2を10万トークンに低コストで増やす手法「LongLoRA」など重要論文5本を解説（生成AIウィークリー） | テクノエッジ TechnoE

2023/09/24 18 users seamless シームレス 生成AIウィークリー 論文単位

2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 1週間分の生成AI関連論文の中から重要なものをピックアップし、解説をする連載です。第13回目は、画像生成AIを高品質にする手法、画像と文章を中間言語を用いずに入出力するモデルな... 続きを読む

CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

2023/09/21 21 users プロパティ CSS CSSアニメーション アニメーション 実装

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をア... 続きを読む

創作の下調べキツいけど、好きなことなら苦じゃないんでしょ？→そういうことではないって話「数行のために20分」

2023/08/21 37 users 下調べ 司法解剖 創作 きついの ホラー

木古おうみ@2巻7/21、漫画版1巻7/25発売 @kipplemaker 創作の下調べがキツいの、好きなことなら苦じゃないでしょとかじゃなく、ホラー書くのは好きだけど怪死した被害者宅を警察が捜査するワンシーンの一、二行を書くためだけに何課が派遣されるのかとか司法解剖にどれくらい時間がかかるのかとか調べるのに20分使うとか... 続きを読む

短い投稿でも自然な見栄えになるブログテーマ「Short」で「日々のつなぎ目」を書き残す。 - 週刊はてなブログ

2022/12/14 18 users short つなぎ目 見栄え 一行 週刊

一行でもブログ！ はてなブログから、短文ブログを更新するのにうってつけの公式テーマ「Short」がリリースされました。 blog.hatena.ne.jp 記事タイトルを主張しすぎないデザインで、短い投稿でもすっきりと美しく見えます。数行の投稿でも自然な見栄えになる「Short」なら、気軽にブログを更新できるような気がしませ... 続きを読む

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

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

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

たった数行でも、自分が書いたコードで世界を変えられる。Webサービスに魅せられたエンジニアが諦めなかったこと - Findy Engineer Lab - ファインディエンジニアラボ

2021/12/15 14 users ファインディエンジニアラボ エンジニア コード ＣＴＯ 世界

エンジニア組織をそれほどアピールしていなかったプレスリリース配信サービスのPR TIMESで、2021年4月に開発者ブログが立ち上がりました。同月にCTOに就任した金子達哉（@catatsuy）さんによる改善の決意により始まったブログは、現在まで順調に多くのエンジニアによって更新されています。 金子さんは、ピクシブやメル... 続きを読む

この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置する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で実装できる小技テクニック12個まとめ 【簡単＆実用的】 - PhotoshopVIP

2021/02/12 13 users ウェブ PhotoshopVIP 仕様 Web制作 表現

ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用でき... 続きを読む

Web制作者が知っておくと便利なCSSの小ネタ | コリス

2021/01/27 18 users コリス 一昔前 進化 JavaScript CSS

CSSの進化はすごいですね? 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻... 続きを読む

「ドコモ口座」使った不正利用、七十七銀や中国銀で　　:日本経済新聞

2020/09/08 13 users ドコモ口座 大垣共立銀行 中国銀 NTTドコモ 不正利用

NTTドコモは8日、電子決済サービス「ドコモ口座」を使った銀行口座の不正利用が複数起きていると明らかにした。少なくとも七十七銀行（仙台市）や中国銀行（岡山市）、大垣共立銀行（岐阜県大垣市）で確認され、さらに数行で広がる可能性があるという。不正利用があった銀行口座の新たな登録を停止するなど対策を進めて... 続きを読む

ゼロからはじめるプログラミング言語Rust(3) 他のプログラミング言語から見たRustの特徴とは？ | マイナビニュース

2020/02/23 8 users rust インタプリタ プログラミング言語Rust ブログ

簡単ではないRust Rustは、開発者から愛されてやまないプログラミング言語なのだが、残念ながら楽ちんとは言い難い。インタプリタが利用できて、数行入力すればいろいろ試せるタイプのプログラミング言語ではないのだ。こうした点から、Pythonといったプログラミング言語とは違う立ち位置にいるのだ。 最初に学ぶプログ... 続きを読む

文章力を上げる｢テンプレート｣の作り方・使い方のコツ | ライフハッカー［日本版］

2020/02/10 6 users テンプレート ライフハッカー コツ 文章力 テンプ

報告書や企画書など、業務上避けて通れない書類の作成に、いつも悩まされていませんか？ こちらは数行書くにも四苦八苦するのに、同僚は時間をかけずにスマートな内容の文章を、ささっと仕上げてしまう。 実はこの違いは、｢テンプレート｣に沿って書いているかどうかの違いかもしれません。 文章力アップの早道は｢テンプ... 続きを読む

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 -Tiny slider | コリス

2019/07/17 35 users バニラJS ライブラリ コリス 単体 HTML

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -G... 続きを読む

わずか数行の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」で利用している。差分プライバシーは、大まかに言えば、リアルなユーザーデータを個人が特... 続きを読む