2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
【2022年】Chromeで画像がぼやける場合のCSS対処法
参考：ドット絵やQRコードをボケさせたくないときに使えるCSS – Qiitaブラウザ依存が強く、2021年現在ではベンダープレフィックスで対応する必要があります。 今回使用した「image-rendering: -webkit-optimize-contrast;」は「image-rendering: crisp-edges;」のChrome用ベンダープレフィックスになります。 効果の確認方法当ページでChromeデベロッパーツールを開いて以下の画像を選択し、以下の画像のように「image-rendering: -webkit-optimize-contrast;」をオンオフ切り替えてみてください。 劇的な変化はしませんが、よく見ると画像が少しハッキリと表示されるのが見れるかと思います。 その他の対処法以前にも複数の解決法が提案されていましたが、どれも何かしらの問題がありました。 bac
【prettier】htmlWhitespaceSensitivityのignore/css/strictはどれ?
htmlWhitespaceSensitivityのignoreやstrict templete内のhtmlの改行がいやで少し設定をいじりました。ホワイトスペースをどう扱うかに付随して改行も変わってしまうようです。 rules: { 'prettier/prettier': [ 'error', { // htmlタグの改行方針 // htmlWhitespaceSensitivity: 'ignore' htmlWhitespaceSensitivity: 'css' // htmlWhitespaceSensitivity: 'strict' } ], } 公式サイトをみると、 whitespace is significant in inline elements. と書かれています。ホワイトスペースはインライン要素で重要とありますが、レイアウトに関わるからでしょう。改行を綺麗に入れ
stylelintの設定ファイル
stylelint.config.js �� ] V `��\ V module.exports = { plugins: ['stylelint-order', 'stylelint-scss'], rules: { indentation: 2, 'color-hex-case': 'lower', // hex値は小文字指定（大文字を禁止） 'color-hex-length': 'short', // hex値は短い表記（冗長な表記は禁止） 'color-named': 'never', // 名前付きカラー指定を禁止 'color-no-invalid-hex': true, // 無効な16進数の色指定を禁止 'function-comma-space-after': 'always-single-line', // 単一行のカンマ後には空白が必要 'function-comm
2022年のCSS | gihyo.jp
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
Pico CSS • Minimal CSS Framework for semantic HTML
Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 12.1K GitHub Stars 74.1K Monthly Npm Downloads (Last month) 3.2M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great s
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
モダンCSSでよく使用されるレイアウトを実装するまとめ
ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを解説します。 Layout patterns 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSで実装するレイアウト アスペクト比が維持される画像カード 最大値と最小値を決め、伸縮するカード コンテナに合わせて最適化されるカード スペースに合わせて伸縮するパンケーキ 聖杯レイアウト ラインナップ 積み重なるパンケーキ RAM (Repeat, Auto, Minmax) メディアクエリなしのサイドバー これからの
Layout patterns | Patterns | web.dev
Stay organized with collections Save and categorize content based on your preferences. Layout patterns built using modern CSS APIs to help you build common interfaces such as cards, dynamic grid areas, and full-page layouts. ���G_U `ӥG_U �� H_U We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for co
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the
自動で読み込まれたcssファイルを無効にしたい
CMS(Content Management System)は複数のユーザーでコンテンツを編集することが可能なWebサイトの管理/構築用のプラットフォームを指します。また、会社単位で運用管理するものはECMと呼びます。 JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！
当ブログではCSSの新機能をたくさん紹介してきましたが、今回紹介するのはこれまでのCSSの実装方法が大きく変わるものです。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化（階層化）できます。CSSのオーバーライド、リセットやサードパーティの外部CSSファイルの扱いが、今までよりはるかに楽になります。 できたてほやほやの新機能ですが、主要ブラウザがエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）になった現在、いつの間にかすべてのブラウザにサポートされているかもしれません。 Cascade Layers? by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【訳者注】最後の一文まで、必ず目を通してください。 【更新】2022/6:
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET
[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） まとめ IE、Edge、Chrome、Safari、Firefox でスクロールバーを非表示にする実装方法はこちらです。 コード <div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div> <style> .container { height: 150px; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .container::-webkit-scrollbar { /* Chrome, Safari 対応
![[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/f69b4dd23e097182d68b71fbe62eef9d3a44a02c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F626.png)
CSSだけでスマホの横スクロールを実装する
ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。 タイル状に並べて表示 横スクロールできるように表示 今回はリスト構造を使用して、実装する方法をご紹介します。 ソースコードの記述実例はこちらです。 html <body> <ul class="scroll_list"> <li class="list1"><img src="img/image1.jpg" alt="image1"></li> <li class="list2"><img src="img/image2.jpg" alt="image2"></li> <li class="list3"><img src="img/image3.jpg"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.web-development-kb-ja.site/ja/css/%E8%A6%AA%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E7%84%A1%E8%A6%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BC%9Acss%E3%81%A7%E9%9D%9E%E8%A1%A8%E7%A4%BA/1067711522/
.stylelintrc - Qiita
