Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
Beautiful CSS checkboxes examples - CSS Scan
All of these checkboxes were initially copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page Have you seen CSS Scan? The fastest and easiest way to check and copy CSS. Learn more → Beautiful box-shadow examples 90+ free beautiful CSS box-shadow, ready to use, click to copy. Learn more →
Doodle CSS
Doodle CSS A simple hand drawn HTML/CSS theme. By Chris McCormick (@mccrmx) Get the source code on GitHub. Support A button How to use it The main stylesheet is doodle.css: <link rel="stylesheet" href="doodle.css"> Then add the class doodle to the top level element you want to apply the theme to: <body class="doodle">...<body> Load the Short Stack web font: <style> @import url('https://fonts.googl
CSSでフォームの実装に悩んだら！ さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu
Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。 それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。 HTML Forms Library HTML Forms Libraryとは HTML Forms Libraryの使い方 HTML Forms Libraryとは HTML Forms LibraryはTailwind CSSやBootstrapやBulmaなど、さまざまなCSSのフレームワークで実装されたフォームのライブラリです。テンプレートを使用して、さまざまなフォームを簡単に実装できます。 ライセンスは、下記の通りです。 商用プロジェクトで無料で使用できます。 帰属は素晴らしいですが、必須ではありません。
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
CSSとSVGでチェックボックスを装飾しよう！
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css
フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。 フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssのデモ select-cssの使い方 select-cssの特徴 select-cssは、デスクトップ・スマホの各ブラウザで一貫して美しく見せるスタイルシートを適用します。IE 9以前など、一部のブラウザでは、アイコンのデザインはサポートされていませんが、コントロール可能で通常の目的には十分に適しています。
![[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css](https://cdn-ak-scissors.b.st-hatena.com/image/square/508788eb3e05c0be3c6bd36e3b8c8bf9ea7c50ae/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019022101.png)
The Current State of Styling Scrollbars in CSS (2022 Update) | CSS-Tricks
Your best bet for styling scrollbars in CSS, for as much cross-browser support as possible, is to use the special ::webkit prefixed scrollbar CSS properties (Chrome & Safari will need those for now) and the standardized scrollbar-width and scrollbar-color properties (for Firefox for now). So a basic setup would look like this: .styled-scrollbars { /* Foreground, Background */ scrollbar-color: #999
CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net
Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css/* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; text-align: center; padding: 9px 4px; background-color: #03A9F4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0
任意のテキストでチェックボックス
Result 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます css.text-checkbox { display: block; } .text-checkbox input { display: none; } .text-checkbox span { font-family: monospace; } .text-checkbox .checked { display: none; } .text-checkbox :checked ~ .checked { display: inline-block; } .text-checkbox :checked ~ .unchecked { display: none; }html<label class="text-checkbox"> <input type="checkbox" name="one"> <
Gorilla Dropdown - ドロップダウンをリッチに
HTMLの入力UIの中で非常に貧相に感じるのがドロップダウンです。単数選択、複数選択のいずれもシンプルで使い勝手もよくありません。テキストエリアはWYSIWYGにするライブラリが多数ある中、ドロップダウンはなかなか進化しません。 そこで紹介したいのがGorilla Dropdownです。ドロップダウンを格好良くしてくれるライブラリです。 Gorilla Dropdownの使い方 デモです。画像とテキストを載せられます。テキストも一行ではなく、複数行にできます。 カラーテーマ的な使い方もできます。 Gorilla Dropdownを使えばテキストや画像などを自由にドロップダウンの選択項目にできます。テキストだけで選択するのに比べて圧倒的にユーザビリティが高くなるでしょう。 Gorilla DropdownはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Licen
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
![[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox](https://cdn-ak-scissors.b.st-hatena.com/image/square/1dd910b325a6cc2c3c080f26dc7ac70824dc0015/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110701.png)
multi.js - 複数選択のドロップダウンをリッチに変身 MOONGIFT
WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。 今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。 multi.jsの使い方 multi.jsを使っていない場合はこうなります。正直選びづらいし、キーボードを組み合わせるのは面倒です。 それがこうなります。 絞り込みできます。選択すると右側のリストに追加されます。 すでに選ばれているものは色が薄くなります。 multi.jsを使うと複数選択するドロップダウンが一気に便利になります。大きさも変わるので、それに合わせてデザインを考える必要がありますが、ぴったりと当てはまるケースもありそうです。 multi.jsはJavaScript製のオープンソー
チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」
TOP > Design > チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」 webサイト上で何かを選択する際に利用することの多いチェックボックスとラジオボタン。デザインされることはあまりなく、比較的シンプルでベーシックなタイプが利用されることがほとんどですが、今回はそこにデザインや独自の動きを追加できる、チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」を紹介します。 Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches 派手な演出ではありませんが、取り入れることでデザインが
Dropify - ファイルアップロードを格好良く！ MOONGIFT
HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kenjinote/cmdchat: コマンド プロンプト (チャット風)
https://lokesh-coder.github.io/
imamura.biz