ie11がお亡くなりになった後に利用可能なcss周辺 - Qiita
aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない .parent { position: relative; width: 100%; &:before { content: ''; display: block; padding-top: 56.25%; /* 16 : 9 */ } .child { position: absolute; top: 0; left: 0; } } min(), max(), clamp() 便利css関数 例えば以下のようなコードをminを利用すると1行で置換可能 追記：minとmaxの認識が逆になっていました。。申し訳ありません。 ↓この様な認識が正しいですね。 min('基本幅', '最大幅') max
State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
Understanding Layout Algorithms
Understanding Layout AlgorithmsThe mental model shift that makes CSS more intuitive A few years ago, I had a Eureka! moment with CSS. Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center. I figured that if I understood broadly what each property did, I'd have a deep understanding of the language as a who
一生見てられる…カワイすぎるローディングをCSSコピペで実装！ 【 アニメーション 】｜デシノン
CSSで使えるかわいいローディングをまとめてみました！ codepenから引用しています かわいいローディング コピペで実装 今回はずっと見ていられるような可愛いローディングデザインを集めました！ ローディングも可愛くデザインしたい方にオススメ ぜひコピペで実装してみてください！ ピカチュウ！！！！！ ピカチュウがスマホを見て歩いてるだけ！でもそれだけでかわいい！！ See the Pen Pikachu Loading Page by Hazem Ashraf (@Tetsu) on CodePen. のびのびにゃんにゃん 猫の胴体が伸びる！？ See the Pen Loading Cat – 2 by tkain (@tkain) on CodePen. ロケットレース ロケットがレースコースをぐるぐると See the Pen Loading Spaceship by Titulu
LoadLab | Pure CSS Loaders
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
FreeFrontend
We are thrilled to present our latest update, featuring a meticulously curated collection of free HTML and CSS background pattern code examples. This compilation showcases a wide range of captivating patterns that will instantly elevate the visual appeal of your website. With our January 2023 update, we have scoured reputable sources like CodePen, GitHub, and other reliable platforms to bring you
【2023年版】おすすめのリセットCSSまとめ！基本知識と使い方を解説 | Web Design Trends
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。 リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。 今回は、2023年最新のおすすめリセットCSSや、リセットCSSの基本と使い方をご紹介していきたいと思います。 リセットCSSとは？ リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのことを
ブラウザキャッシュはもう怖くない！きちんと更新されるキャッシュバスターの付け方 - Qiita
この記事は 弁護士ドットコム Advent Calendar 2019 16日目の記事です。 はじめに 弁護士ドットコム というサービスのUXエンジニアをやっている白井と申します。 日々ユーザー体験を向上させるべく様々な開発を行っていますが、Webサイトの速度改善もその1つです。 今回はその一環で実施した、ブラウザキャッシュ戦略の再設計の事例についてご紹介します。 対象リソース この記事では、以下のようなリポジトリで管理されているリソースを主な対象としています。 JavaScript, JSX, TypeScriptなどのスクリプト類 CSSなどのスタイルシート類 画像やフォント類 これらは頻繁に変更される傾向にあるため、ブラウザキャッシュを適切に制御する必要があります。 注意深く設計しないと、以下のような問題が発生する場合があります。 ブラウザキャッシュのよくある問題 問題① ユーザーの
prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
Intro macOS Mojava は OS レベルで Dark Mode に対応した。 しかし、 Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature I
Create A Dark/Light Mode Switch with CSS Variables
Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits. Let's begin! If you don't have a website of your own to which you wish to add this functionality, use this demo website to
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
html <div class="day">Day (initial)</div> <div class="day light-scheme">Day (changes in light scheme)</div> <div class="day dark-scheme">Day (changes in dark scheme)</div> <br /> <div class="night">Night (initial)</div> <div class="night light-scheme">Night (changes in light scheme)</div> <div class="night dark-scheme">Night (changes in dark scheme)</div> css .day { background: #eee; color: black;
word-breakとword-wrapはややこしい
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
Typescale - Create stunning typography, generate CSS, and find inspiration.
Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/chocodogmagic/status/1524906863837736961?s=12&t=AvDAmnr8EzHQzx53GEN8jg
https://codepen.io/huckbit/pen/RRmyzY
Dark Mode with CSS Variable
Dark mode using prefers-color-scheme rule and CSS variables - Juhana Jauhiainen
"prefers-color-scheme" | Can I use... Support tables for HTML5, CSS3, etc