Headless UICompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。 Working with JavaScript Media Queries by Marko Ilic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに matchMedia()の使い方 条件の変化を継続的にチェックする方法 昔ながらの方法 まとめ はじめに メディアクエリと言われて最初に思い浮かぶのは何ですか？ おそらく、下記のようなCSSでしょ
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
CSS Grid
CSS Grid is a brand new layout system in CSS! It's not a framework or library - it's an addition to the language that allows us to quickly create flexible, two dimensional layouts. We can use it to place, size, align and architect designs that were previously difficult or even impossible with floats or flexbox. CSS Grid may seem a bit daunting with new syntax and layout ideas, but it's fairly simp
そろそろクリティカルCSS（Above the fold）について説明しておこうか | Yuhiisk
先日HTML5minutesという勉強会でクリティカルCSSについてLTをしてきたのだが、 あまり日本では馴染みの無い単語なのでここで説明しておこう。 クリティカルCSSとは 某RPGの大打撃を与える印象のクリティカルヒットとかそうゆうのではなくて、 CSSにおけるブラウザ表示パフォーマンスのTipsである。 クリティカルというのはクリティカルパスのことで、クリティカルパスCSSなどとも呼ばれる。 クリティカルパスとは、プロジェクトの各工程を、プロジェクト開始から終了まで「前の工程が終わらないと次の工程が始まらない」という依存関係に従って結んでいったときに、所要時間が最長となるような経路のこと。クリティカルパスに含まれる工程に遅延が発生すると、その分だけプロジェクト全体のスケジュールも遅延するため、クリティカルパスに含まれる工程は特に遅れてはならない重要な工程として重視されることになる ク
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 公開日: 2017年4月26日 タグ: css, ie, accessibility 事情があって游書体関連の話題をいろいろ読み漁っていたところ、「游ゴシックにすると IE では数ピクセル上にずれてしまうので、CSS ハックを使って別のフォントを適用する」という手法を紹介しているのがあった1。どういうハックかと思って見てみたら次のようなもので、ちょっとこれどうなのよ? とか思ったのであった。 @media (-ms-high-contrast: none) { /* IE10/11 に適用する*つもりの*フォント指定 */ } 試しに “ms high contrast” で検索してみると同じコードがけっこう出てくるので、もしかしてある程度広く認知されてる手法なのだろうか…あまり信じたくはないのだけ
日本語向けフォントスタックの現状 - yuhei blog
日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。 Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。 Macでは問題なく游ゴシックが利用できるので、ヒラギノ
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
区分分断の変換規則(2017/4/25 追記アリ) - まいはにっき
書こうと思ってだいぶ月日が流れてしまったけどメモ。 Firefox52でCSS Text Module Level3の区分分断の変換規則が実装された。原文でいうとSegment Break Transformation Rulesというやつ。 こういう表示をしようとして、HTMLを書いたとき <p> 庭には 二羽 にわとりがいる。 </p> 要素の中で改行すると、ブラウザの表示では改行の箇所にスペースが挿入されてしまう。 こんな感じに。 これが、例えば英語で <p> The quick brown fox jumped over the lazy dogs. </p> としたときには the のあとの改行の箇所にスペースが入らない場合、改行の前後の the と lazy がくっついて The quick brown fox jumped over thelazy dogs. となってしまう
もっと細かい値を基準にしたVertical Rhythm - yuhei blog
本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多分そういうルールに則ってる」という話を聞いた。なるほど良さそうと思ったものの、細かい数字になってくると計算がめんどくさそう。 Rhythmic Sizingを利用できれば、それはかなり簡単に実現できる。要素のサイズやline-heightの値を、必ず指定した数値の倍数になるようにできるというやつだ。以下はline-heightを4pxの倍数にする例。 html { line-height-step: 4px; } .text { font-size: 1rem; // 16px line-he
Interneting Is Hard
Our tutorial contains 250 diagrams that present complicated HTML and CSS concepts in simple, visual ways. Take our CSS Selectors chapter, for example. Instead of building your own mental model of how CSS selectors connect to HTML elements, you can visualize it the same way we do: We think pretty matters, and our passion for pretty things permeates into the example projects you’ll be working on, to
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
Media Queries Level 4
Media Queries Level 4 W3C Candidate Recommendation Draft, 25 December 2021 More details about this document This version: https://www.w3.org/TR/2021/CRD-mediaqueries-4-20211225/ Latest published version: https://www.w3.org/TR/mediaqueries-4/ Editor's Draft: https://drafts.csswg.org/mediaqueries-4/ Previous Versions: https://www.w3.org/TR/2020/CR-mediaqueries-4-20200721/ History: https://www.w3.org
CSSの疑似クラスは非DOM。JavaScript/jQueryで直接操作は不可能。style要素の動的変更で対処せよ - モバイル通信とIT技術をコツコツ勉強するブログ
jQueryで要素のセレクタを記述する際， :before などの疑似クラスを含めることができない。 その理由は，そもそもJavaScriptから疑似クラスを操作できないからだ。 要素.style でDOMのCSSプロパティを取得できるけど，疑似クラスはその中に含まれていない。 擬似要素とjQuery -クリックイベント編- - べたな雑記帳 http://yami-beta.hateblo.jp/entry/201... そもそも:beforeや:afterで表示されている文字列は、ブラウザで表示した場合にソースに存在しない 現在の仕様では、擬似要素をjQueryオブジェクト化できない javascript - Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) - Stack Overflow
Responsive vertical center with overflow hidden
After searching both Stack Overflow and Google I still wonder how to vertical center a image that is bigger than it's parent element. I use no height, just max-height, because I want to make a responsive solution, without jQuery. If possible. Here is some code: <div style="max-height: 425px; overflow: hidden;"> <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg"> </div>
Style webkit checkboxes
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-
How make bootstrap class="form-inline" work on resolutions < 768px
We are making a Google sites where we will put a form made on Bootstrap. The width that we have to put the form is 500px; The code its alright but the <div class="form-inline"> just work on a specific size of screen, and we need to specify that size, where should we change that? Thank you. <div class="form-group"> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="Input
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bulma: Free, open source, and modern CSS framework based on Flexbox
CSSで固定比率レイアウト - @yoshiko_pg