この記事で行なっていること 凄すぎて”ズキズキワクワク"が止まりません はじめに ついこの間、ChatGPTは2022年1月までの情報を学習した、というい発表がありましたが、さらに今回のアップデートで 画像解析機能(GPT-4V) が追加され、アップロードした画像を使った新たなタスクの実行が可能になってます。そして、それが凄すぎます 衝撃的な投稿 まずはこちらの衝撃的な投稿をご覧ください。 動画は自転車の画像と共に「サドルを下げる手助けをしてください」で始まります。 ChatGPTからレコメンドが返ってきますが、それに対して、質問者は追加で ポイントになりそうな部分を拡大してアップロード マニュアルと自分の持っているツールの写真もアップロード します。 その結果、その質問者は、サドルを下げることに成功！そんな内容です。 自分の環境で、画像解析機能(GPT-4V)を使えるのか？ さて、画像解

今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア

先日、当社のPodcast「ミツエーテックラジオ」で公開した「#41『State Of CSS 2022から2023年のトレンドを占う』」でfont-paletteについて少し取り上げました。 なかなか耳ではイメージしづらい内容だったため、今回は改めてカラーフォントとfont-paletteについてご紹介します。 従来のテキスト表現における課題 Webサイトにおいて文字の色を変えるにはCSSのcolorプロパティを指定するのが一般的です。しかし、1つの文字が複数の色で形成されている場合はcolorプロパティでは表現できません。 例えば文字の一部にアクセントとして違う色を使う場合や、3D表現をするために陰影を表現する場合があります。そのように見た目が少しリッチなテキスト表現をする場合は、テキスト画像を作ったり、canvas要素によって処理することもあると思います。 テキスト画像は更新のコスト

2023年 08月 11日 読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察 カテゴリ： CSS3 HTML タグ：ルビ 日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。 例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に

はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。 しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。 この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。 パララックス（parallax）について まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイト

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体

ぱっと見は普通の角丸ボタン、CSSグラーデションで実装された美しい光がきらりとボーダーに沿って回転するボタンを実装したデモを紹介します。 小さなボタンですが、CSSコンテナクエリをはじめ、CSSによるマスク、hsl()の美しいグラデーション、繊細なbox-shadowとCSSのさまざまなテクニックが駆使されています。

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、覚えておくと便利なCSSのテクニックを紹介します。 これらのCSSの新機能はすべてのブラウザにすでにサポートされています。 6 CSS snippets every front-end developer should know in 2023 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに コンテナクエリの使用方法 scroll-snapによるエクスペリエンスの作り方 CSS Gridによるposition: absolute;の回避方法 簡単に円を実装する方法 カスケードレイヤーの使い方

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三

概要 2023/2/14から全ブラウザで対応になったコンテナクエリについて、 興味を持ってもらうための記事です。 コンテナクエリとは Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics. コンテナー クエリは、ビューポートサイズやその他のデバイス特性に基づいて要素にスタイルを適用するメディア クエリに代わるものです。 引用： CSS Container Queries - CSS: Cascading Style Sheets | MDNより メディアクエリでは、「画面幅」を基準にスタイルの分岐をしていましたが コンテナクエリでは、基準を「親要素のサイズ」に設定す

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリの基礎知識と便利な使い方を紹介します。 スタイルクエリを使用すると、複数のバリエーションを持つ再利用可能なコンポーネントが簡単に実装できます。 Getting Started with Style Queries by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています CSSのスタイルクエリとは スタイルクエリの使い方 スタイルクエリで実装したUIコンポーネント 1 スタイルクエリで実装したUIコンポーネント

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night

兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を紹介します。 このテクニックは、テキストとテキスト、見出し直後のテキスト、流動的なフォントサイズにも非常に効果的です。 My favourite 3 lines of CSS by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタムプロパティでのフォールバック値の仕組み The Stackではなく.flowを使うのなぜですか？ gapではなく、marginを使うのなぜですか？ 終わり

ダークモードのときは通常の画像ではなく、それように最適化した画像を使いたい場面があるでしょう。特にアイコンなどは黒ベースのものに対して文字色などに合わせて白ベースのものにしたいことがあります。そんなときの出し分け方法です。JavaScriptなど使わずネイティブの機能でHTML・CSSの画像の出し分けができます。 サンプルはこちら <img>タグの場合 <img>タグで読み込む場合は<picture>タグと<source>を組み合わせることで実現できます。 <picture> <!-- ダークモード用 --> <source srcset="hoge-dark.jpg" media="(prefers-color-scheme: dark)" /> <!-- ライトモード用 --> <source srcset="hoge.jpg" /> <img src="hoge.jpg" alt="

以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド