CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説
Firefoxが2024年7月9日にリリースしたバージョン128で、CSSの「@property」に対応したことにより、主要なブラウザ全てで「@property」の記法を使用できるようになりました。「@property」を使うことで実現できるデザインの一例について、ウェブエンジニアのライアン・マリガン氏がブログに投稿しました。 CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ マリガン氏がデモとして提示したのは下図のようなボタンのアニメーションです。 最初にマリガン氏はボタンの周りをループする光について解説しています。カスタムプロパティとして「--gradient-angle」を宣言し、宣言においてこのカスタムプロパティには「angle(角度)」の値を設定可能で、初期値
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin
売れるウェブの最新HTML/CSSテクニック40選
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Timed Cards Opening カード型の画像カルーセルのスライドに合わせて、背景のフルスクリーンが切り替わる、ヒーロー要素を想定したスニペット。 See the Pen Timed Cards Opening by Dilum
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Flexboxで左と右の両端揃えにしたい 解決方法1: マークアップを追加する 解決方法2: flex-growを使用する 解決方法3: margin: auto;を使用する はじめに これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います
Adaptable metallic texture for the web
MetalliCSS is a tiny, dependency-free JavaScript library that makes your CSS shine! Using the library is as simple as adding the class metallicss to an element, and using CSS properties for configuration. The effect will auto-adapt to the elements size, border-radius and background color. See usage examples Install using npm i metallicss or use the CDN version. Playground MetalliCSS+ Want to ren
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック
近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。 CSS Tricks to Create that Dark Futuristic Web3 Look by Trisha Lim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに かっこいいグラデーション使用したテキストのスタイル かっこいいグラデーション使用したボタンのスタイル かっこいいグラデーション使用した背景のスタイル はじめに ダークモードのWeb3の美しさ
決定版?!50個のCSSボタンを一発コピペ、自分好みにカスタマイズできるCSSButtons.io
先日、コピペで利用できるCSSボタンスタイルを多数公開中の便利サイトをご紹介しましたが、また新しいサービスが公開されています。 クリックひとつでコピペできるだけでなく、気に入ったボタンはHTMLとCSSによるカスタマイズ、保存も可能です。 決定版?!50個のCSSボタンをコピペで利用、自分好みにカスタマイズできるCSSButtons.io CSSButtons.ioは、ボタンやチェックボックスなど、ウェブ制作に使えるCSSコンポーネントを公開しており、すべてのコンテンツはオープンソースで、無料で活用できます。 現在、CSSボタンは48種類公開されており、シンプルで使い勝手の良い素材から、アニメーションを使った波ウェーブ型やグリッチエフェクト、動くグラデーションなど、あらゆるCSSボタンスタイルに対応できる優れもの。 ボタンの他に、こちらもHTML/CSSのみでスタイリングできるチェックボッ
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
UI Buttons