CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

2024/12/10 16 users 100vh 単位 バーチャルキーボード 期待通り これら

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を... 続きを読む

UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit

2024/12/05 10 users 線形 Orbit グリッドベース レイアウト 従来

ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Or... 続きを読む

【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita

2024/11/30 184 users Qiita React getter Vue.js HTML

TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(... 続きを読む

Tailwind CSS v4 で導入される CSS First Configurations

2024/11/30 72 users テーマ 設定 ファイル内 変更点

Tailwind CSS v4 で導入される CSS First Configurations 2024.11.30 Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。 続きを読む

イマのCSSでできる
インタラクション最前線 + CSS最新情報

2024/11/23 183 users イマ

クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website 続きを読む

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/21 249 users width Calc マージン かなり 左右

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能な... 続きを読む

Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能

2024/11/14 14 users アコーディオン 要チェック WEB制作者 機能 アップデート

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下... 続きを読む

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/12 18 users デベロッパーツール デバッグ AIアシスタント 検証

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。 5 Cool Things To Do with DevTools AI Assistance AI assistance panel AI assistance fo... 続きを読む

2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など

2024/11/07 15 users フレームワーク プロパティ エバーグリーン 疑似クラス 現状

CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例... 続きを読む

CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA

2024/11/06 132 users 文節 ICS MEDIA 活用術

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れた... 続きを読む

CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

2024/11/06 10 users コンテナ パク スタイルクエリ ラベル テクニック

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detec... 続きを読む

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

2024/10/31 49 users auto height width アニメーション テキスト

CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたi... 続きを読む

これは便利なVS Codeの機能拡張！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!

2024/10/24 70 users CLAMP フォントサイズ 関数 実装 レスポンシブ対応

CSSの実装に便利なVS Code用の機能拡張がリリースされました！ レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。 Clamp It! -GitHub Clamp It! -Visual Studio Marketplace レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 Clamp It!... 続きを読む

［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側

2024/10/21 331 users リソース 本書 目次 通信プロトコル クライアント

はじめに 本書を読むにあたって 目次 第1章：ブラウザを知る──Webサイトを表示するアプリケーション ブラウザの役割❶──Webクライアントとしてのブラウザ クライアント／サーバモデル Webクライアント Webサーバ インターネットとWeb 通信プロトコル HTTP URLによるリソースの指定 DNS ブラウザの役割❷──レンダリングエン... 続きを読む

最近リリースされたCSSの新機能と新しい関数のまとめ

2024/10/16 18 users 新しい関数 ワーキングドラフト まとめ 新機能 プロパティ

CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を... 続きを読む

これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/10 126 users ヘッダ hide スクロール方向 解説 JavaScript

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide ... 続きを読む

便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver

2024/10/08 10 users MutationObserver DOMツリー プロパティ

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新... 続きを読む

CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法

2024/10/03 6 users 謎スペース 無反応 通常 ラベル 問題

ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか？ 通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介... 続きを読む

CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました

2024/10/01 16 users None display Firefox アニメーション 要素

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: an... 続きを読む

HTMLのselect要素がCSSでカスタマイズ可能になる

2024/09/30 12 users select要素 HTML カスタマイズ セレクトボックス

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 し... 続きを読む

私がマージンをできるだけ使いたくない理由 - Qiita

2024/09/19 192 users Qiita margin マージン 理由 皆さん

はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので... 続きを読む

スタイルをカスタマイズ可能な新しい `<select>` 要素

2024/09/21 44 users select JavaS プラグ Chrome Canary

Note 2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaS... 続きを読む

こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法

2024/09/17 8 users 拡張 サイバ デザイン 方法 名称

はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバ... 続きを読む

はてなブログの自動生成アイキャッチでおみくじをひけるようにした - k-murakami0609の日記

2024/09/05 16 users おみくじ k-murakami0609 omikuji 日記

はてなブログの新機能が出てた。 staff.hatenablog.com htmlとcssを書けるんだから何か変なことできるでしょって思って、おみくじ以外を思いつかなかったのでとりあえずやってみることにした。 実装は chatgpt に聞いたらすぐ答えてくれた。animationで頑張れば良いらしい。 .omikuji { font-size: 36px; font-weight: b... 続きを読む

HTML/CSSでできる、押したくなる最新Webボタンエフェクト集

2024/09/04 75 users コピペ HTML ひと カスタマイズ ウェブサイト

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの... 続きを読む