【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
全ブラウザ対応したcontainer queryは何がスゴイのか？
全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ
Neumorphism（ニューモーフィズム）は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事では、ニューモーフィズムの基本や作成上の注意点、コピペで実装できるHTML/CSSスタイリング、参考スニペットまでまとめてご紹介します。 ニューモーフィズムって何？ ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New（新しい）＋Skeumorphism（スキューモーフィズム）からきた造語。 dribbbleで4500以上のいいねが付いている、ニューモーフィズムの火付け役となった作品 Skeuomorph Mobile Banking by Alexander Plyuto 少し前までは、マテリアルデザインの登場によって「
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
知っておかないと驚くかも！CSSにおけるセキュリティの脆弱性について
ネットでは時々、CSSにおけるセキュリティの脆弱性について驚かせるような記事が出回ります。最近話題になったCSSのセキュリティの脆弱性、CSSでできることの可能性、ブラウザの対応状況について紹介します。 CSS Security Vulnerabilities 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 訪問済みリンクの懸念 CSSによるキーロガー CSSによるデータシーフ インラインスタイルブロックのうん○ もっとたくさんあると思います はじめに 記事のタイトルを見て、心配しないでください。CSSにはセキュリティ上の危険な問題はなく、ほとんどの場合、心配する必要はありません。 しかし、時々驚かせるような記事が出回り、CSSでできることの可能性について注意を払う必要があります。最近、話題になった記事をまとめました。
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
Recreating the GitHub Contribution Graph with CSS Grid Layout | bitsofcode
While learning CSS Grid Layout, I’ve found that the best way to internalise all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using alm
CSS でチェックボックスとラジオボタンを装飾する方法 | SONICMOOV LAB
まりぞーです(∩°ω°∩) 鳥さんのおしりに夢中です。 CSSのみでチェックボックスやラジオボタンを装飾したい衝動に駆られたのでご紹介します。 Chrome、Firefox、IE9+ で確認済みです。 基本的には、チェックボックス或いはラジオボタンの実体であるinput要素とspan要素を並べてlabel要素で囲み、checkedの状態かそうでないかでCSSを切り替えます。 実際の見た目に反映するのはlabel要素の中のspan要素や疑似要素になります。 デモはこちら [sourcecode lang="css"] /* 汎用てきなもの ================================================== */ input[type="checkbox"], input[type="radio"] { margin:
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
WEB+DB PRESS Vol.93 [詳解]モダンCSS - rochefort's blog
WEB+DB PRESS Vol.93 作者: 原田騎郎,吉羽龍太郎,松浦隼人,須藤涼介,生沼一公,森下雅章,前島真一,鍛治匠一,伊藤直也,のざきひろふみ,うらがみ,高山温,佐々木健一,わかめまさひろ,ひげぽん,遠藤雅伸,海野弘成,はまちや2,竹原,藤田正訓,WEB+DB PRESS編集部出版社/メーカー: 技術評論社発売日: 2016/06/24メディア: 大型本この商品を含むブログを見る OOCSSとBEMについての説明があったのが良かったです。 他には、スタイルガイドツールのHologram、Radimu、cssnext、CSS Modulesなど。 CSS Modules も含めてCSS in JSってどうも違和感があります。 ローカルスコープが実現できて一見良さそうなんですが、 JS側（View）とCSSが1対1になるのが前提に設計されてますが、 はたしてそうなんだろうかという気
![WEB+DB PRESS Vol.93 [詳解]モダンCSS - rochefort's blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/30f531e810bf4b9e818a211238c196573097e396/height=288;version=1;width=512/https%3A%2F%2Fimages-fe.ssl-images-amazon.com%2Fimages%2FI%2F61qF0ik4B0L._SL160_.jpg)
webpackのcss-loaderでCSS Modulesをやる - Qiita
はじめに CSS Modulesの発想はよくわかったけど、具体的にどうやって導入したらいいかわかりにくく感じたので、webpackでCSS Modulesを使うための設定と、ReactでCSS Modulesを使う簡単な例を紹介します。 CSS Modulesの概要やいいところについてはこのあたりをどうぞ。 CSS Modules 所感 - morishitter blog CSSモジュール ― 明るい未来へようこそ CSS Modulesを行うための方法はwebpack以外にもいくつかあるようです。 Browserify pluginのcss-modulesifyも人気そうです。(発音できない) やってみる まずは、必要なモジュールをインストールします。 CSS Modulesを使うために、style-loaderとcss-loaderが必要です。 React+babel+webpack
Modern CSS: architecture, future specs and build flow
at DevFest Tokyo 2016.
(黒魔術) CSS の色を sRGB にあわせるには | tech - 氾濫原
Chrome と Firefox では CSS の色にカラーマネジメントが適用されず、sRGB の画像と色をあわせることが基本的に無理です。 で、無理なんですが無理ではなくて、実は頑張れば sRGB にあわせることができることがわかりました。 デモ https://lowreal.net/2017/colorprofile/ 以下のような感じになっていて、書いてある通りです。Chrome と Firefox だと上3つと下3つの色が異なります。Safari だと全て sRGB 扱いされるので全部同じに見えるはずです。ただしカラーマネジメントが有効かどうかの判定を入れてないので、カラーマネジメントに対応してないシステムでも全部同じになっています。 一番下の色が JS で CSS のルールを書きかえて sRGB にしたものです。 やっていること 要は使う色をあらかじめ sRGB プロファイルの
CSS の色空間は sRGB のはずだけど… | tech - 氾濫原
Chrome, Firefox, Safari で調べたところ、 Chrome: カラーマネジメントされない ( sRGB は適用されない) Firefox: デフォルカラーマネジメントされない (後述。オプションによる) Safari: sRGB が適用される Firefox の場合 gfx.color_management.mode によって挙動が変わる。2がデフォルトだが、2の場合は sRGB が適用されない。1の場合は sRGB が適用される。 カラープロファイルがない画像 CSS の色指定 canvas の色指定 に影響する。 CSS の色と画像の色をあわせるには 現状では画像に ICC Profile をつけないようにするのがベスト。色の再現を捨ててあわせにいく感じ。 CSS の色を sRGB にあわせたい場合は CSS も含めてあわせるのは無理 (ということにしておくと吉)
社内でCSSの新しい方針について話したメモ - Qiita
社内で新しいドメインを設立するにあたり、CSS Modules, PostCSS, cssnextを試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コンポーネント時代のスタイリング 2. グローバルCSS、BEM、そしてローカルCSS 3. CSS Modules、そしてJSXへの割り振り 4. cssnextと、その書き方 5. 我々のPostCSSスタンダード 新ドメインの CSS環境（案） CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジ
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
CSS Modules 所感 - morishitter blog
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
