これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能
4/7にアップデートされたChrome 147に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など、Web制作者は要チェックです！ 下記はborder-shapeで実装されており、各要素はそれぞれ独立した形になっています。昔は横V字型の画像を使用していたのが懐かしい、、、 New in Chrome 147 Chrome 147 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タイムラインの名前付き範囲スクロール CSSのcontrast-color
角の形を自在に変える！ CSS corner-shapeプロパティ入門 - ICS MEDIA
CSSのcorner-shapeプロパティは、border-radiusで定義された角の領域に対して、「どのような形状で処理するか」を指定できるプロパティです。 これまで、角の形状を変えるデザインを実現するには、用途に応じて複数の手法を組み合わせる必要がありました。 丸くする：border-radius 斜めに切る：疑似要素やclip-path 内側にえぐる：SVGやCSS Masking（mask-image） たとえば「角を斜めに切り落としたボタン」を作る場合、clip-pathで多角形を指定する方法があります。 /* 四隅を斜めに切り落とす */ button { clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10p
Anchor Positioningが全対応。HTML・CSSだけのポップオーバーが完全体に
2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ
タイポグラフィCSS
typography.md タイポグラフィ font-family フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。 Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。 Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。 Mac/iOS はヒラギノ角ゴ ProN が適用される。 アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で
HTML・CSSだけで作れる！ リストのホバー演出アイデア集 - ICS MEDIA
リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。 ▼ 今回紹介する実装例一覧 サンプルを別ウインドウで開く 1. 横にアイコンが表示される サンプルを別ウインドウで開く コードを確認する ホバー時に、アイコンに指定しているCSSのscaleプロパティの値を0から1に変化させることで、拡大しながら現れるようにしています。初期状態でscale: 0に指定しておくことで、アイコンを非表示のように隠しておけます。 2. カーソルが変化する サンプルを別ウインドウで開く コードを確認する ホバー時に表示されるカーソルをオリジナル画像に変更しています。CSSを以下のように指定すると、カーソル位置やクリック範囲を細
【CSS】clip-pathを使って斜めにセクションを区切る
clip-pathで要素を斜めに切り抜く まずはデモページをご覧ください。 デモページはこちら ⇒ デモページ セクションを斜めに区切る方法は、borderを使った方法、transform: skewY()を使った方法などいくつかの方法がありますが、clip-pathで要素を切り抜く方法が一番簡単でおすすめです。 ※もうIE11は諦めてください、、、 今回も三角形と同じで、polygonを使います。 座標の取り方は下記ツールに頼ります。 簡単に切り抜くことができるオンラインツール Clippy CSS clip-path maker https://bennettfeely.com/clippy/ マウスで好きな形に変更すると、画面下の方にコードが出てきます。 右上がり斜めに区切る <div class="sec-wrap1"><!--sec-wrap1--> <section id="s
What Can We Actually Do With corner-shape? | CSS-Tricks
When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when border-radius came onto the scene, I remember everybody thinking that it was the best thing ever. Web designs were very square at the time, so to have border-radius was super cool, and it saved us a lot of time, too. Chris’ border-radius article fro
インパクト抜群！CSSで演出するグリッチ効果26選 - コハム
25+ CSS Glitch Effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブやモバイルアプリケーションにテクニカルなひずみのある外観を追加するためのグリッチ効果のコレクションをお探しでしょうか。 今回の記事では、GitHub、CodePenなどの一流サイトから収集した無料のHTML、CSSグリッチ効果のコードサンプルをご紹介します。 ぜひチェックしてみてください！ グリッチ効果はウェブページ上でちらつきや歪んだ外観を表現するのに役立ちます。 テクノロジーのトラブルを模倣するエフェクトで、単純で退屈なサイトにインパクトを与えます。 創造性と目を引くようなアニメーションを持つ、素晴らしいCSSグリッチ効果をご紹介していきましょう。 01. Glitch Effect 02. SVG Glitch 03. glitch
HTMLを愛する人のためのUIライブラリ、シンプルなHTMLでさまざまなレイアウトやUIコンポーネントを実装 -Kelp
軽量のCSS classレスのHTMLとセマンティックユーティリティおよびコンポーネント用のCSSを組み合わせています。 Webコンポーネント ブラウザネイティブのWebコンポーネントでUIを段階的に拡張しています。 ビルドステップは不要 CSS変数、カスケードレイヤー、HTML属性で自由にカスタマイズできます。 ライセンスはFair-codeで、オープンソースに似ていますが実用的になっています。個人や社内または非営利プロジェクトで無料で利用できます。収益が目的の場合はプロライセンスが必要となります。詳しくはライセンスページをご覧ください。 Kelpのデモ Kelpでどんな感じに実装できるかは、デモページをご覧ください。
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
CSSのみでdetails要素のアニメーションを実装する方法 – TAKLOG
約1年前、JavaScriptを使用したdetails要素のアニメーションの実装方法についての記事を投稿しました。しかし、その後の CSS の進化により <details> 要素の開閉アニメーションが CSS のみで実装可能になりました。 正確には、開く際のアニメーションは以前から CSS で実現できましたが、閉じる際のアニメーションは open 属性が即座に削除されるという仕様上、 JavaScript なしでは不可能でした。 この度、 details-content 疑似要素がサポートされたことにより、 CSS のみで閉じる際のアニメーションも実現できるようになりました。 ::details-content - CSS | MDN The ::details-content CSS pseudo-element represents the expandable/collapsible
daisy UIの魅力と使い方 - Qiita
daisy UIとは？ daisy UIは、Tailwind CSSベースのCSSライブラリです。Bootstrapのような使い勝手で、さまざまなコンポーネントを簡単に実装できます。 daisyUI — Tailwind CSS Components ( version 4 update is here ) 特徴 コードが簡潔で、スタイル適用が爆速 daisyUIを使うことで、Tailwindのみを使う場合よりも、少ないコードで同じUIを作成できます。 Tailwindのみの場合: Tailwind + daisyUIを使用した場合: 豊富なテーマ daisyUIには多彩なテーマが用意されており、デザインのバリエーションが広がります。 テーマ一覧 daisyUI themes Theme Generator さらに、テーマのカスタマイズも可能です。公式サイトのTheme Generator
Chrome135の新機能を使ってCSSだけで実装するカルーセルを試してみた
Xで「Chrome 135からCSSだけでカルーセルを実装できる」という投稿を見かけたので実際に試してみました。 Chrome for DevelopersでもCSS を使用したカルーセルとして紹介されていました。 この記事によるとCSS Overflow Module Level 5の機能として、スクロールを操作するボタンやマーカーが実装できるようになったとのこと。これを使えばJavaScriptなしのCSSだけでカルーセルが実装できるみたいです。 完成形 最初に最終的に作成したカルーセルを置いておきます。すべてJavaScriptなしで実装されています。（Google Chromeの135以降で確認してください） Xで動画も投稿しているので、動きだけだったらこちらでも確認できます。 基本的な実装 元記事ではリッチなサンプルが紹介されていますが、実装が紹介されているのは基本的な部分だった
フォントをもっと自由に！ CSSのfont-variant活用術 - ICS MEDIA
font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon
CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 - ICS MEDIA
2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？ このスペースはテキストにline-heightプロパティを設定した際
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはかなり万能に使える！ たった3行のCSSで、要素を中央に絶対配置する新しい記述方法
https://codepen.io/hermesgrau/pen/NWoqNae
Tailwind CSS 入門と実践
Bootstrap to Tailwind Converter | Free Online CSS Migration Tool 2024
Preline UI - Tailwind CSS components library
