内包要素の数が変動しても僕には擬似クラスと間接セレクタがある - dskd
公開日2013-12-04タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ４日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや？プロパティの方に恩返しがありませんね？ — げこたん (@GeckoTang) 2013, 12月 2 と言われてしまったので２回目を登録しました。 要件 「データがある時はリンクを出したい」などのニーズで内包要素の数がページによって増えたり減ったりすること、けっこうありますよね。それが普通のテキストリンクではなくタブだとかサムネだとかでレイアウトにも関わるとき、要素の数によってスタイルを切り分けなきゃいけないわけですが、タブが２つの時には .tabs2。５つの時には .tabs5 とかいちいちクラス付与させるのも面倒くさいわけです。 どういう
una.im | Locally Scoped CSS Variables: What, How, and Why
Locally Scoped CSS Variables: What, How, and Why Published on June 5, 2017 CSS Custom Properties (also popularly called CSS Variables) are here! This is really exciting because we finally have true variables in CSS! What do I mean by true variables? I mean variables that can be updated and altered dynamically in the file. While we had “variables” with pre/post-processors (like Sass and PostCSS), t
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
CSSアニメーション(transition)で起こるバブリングの原因と対策 | UNORTHODOX WORKBOOK | Blog
正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、CSS界隈では有名な事象なのかもしれない。ただ、ググっても出てこないし、そもそも何てググればいいのかもよく分からず、この現象にあうたびにデベロッパーツールを開いてなんだかんだやっていたので、その原因を忘れないように書き残しておく。 どういう現象か visibility: hidden;とopacity: 0;で非表示にした要素を、マウスホバーで表示、マウスアウトで非表示に切り替える（アニメーション付き）際に、マウスアウトして完全に非表示となっているのにも関わらず、その要素が表示されていた部分にマウスをもっていくと消えた要素が再表示されてしまうという現象です！ 基本的には問題の
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
CSS Grid Layout について - Qiita
先日の macOS と iOS のアップデートに CSS Grid Layout Module が実装された Safari のバージョンが入り、とうとう全てのモダンブラウザで使用可能となりました。非常に柔軟に、直感的にグリッドを表現することができます。 Can I Use Grid の定義 ある要素をグリッドレイアウトしたいとき、その親要素に display: grid もしくは display: inline-grid を指定します。この親要素のことをグリッドコンテナ、グリッドレイアウトされる子要素のことをグリッドアイテムと言います。 グリッドコンテナには grid-template-column と grid-template-row というプロパティを指定することができます。それぞれ、列と行のグリッドのサイズをその数だけ指定します。 例: 3行5列のグリッド .container {
Writing modular CSS (Part 1) — BEM | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/css-architecture-1. We hope to fix this soon!). Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably wou
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
Flex-grow 9999 Hack
The Germans broke my CSS a while ago. Well, not literally, but their long words did. A few days before the issue occurred, I saw a talk by Zoe Mickley Gillenwater at Frontend United entitled "Using Flexbox Today". That talk inspired me to solve the problem with flexbox. Before I explain the flex-grow 9999 hack in detail, let me briefly describe what it does. The flex-grow 9999 hack makes a flex it
Responsive CSS Patterns without Media Queries — SitePoint
Let me start by saying that despite the title, this article is not about doing away with media queries or media query bashing in any way. Media queries are incredibly useful and I use them all the time for all sorts of things. However, they don’t solve all our responsive design problems. It’s often desirable to effect changes to an arrangement of elements based on the dimensions of their container
CSS Transitionend Events: Multiple Transitions & Syncing JS
Rob will have you saying “Hello” to the right solution and “Bye” to `transitionend` headaches. I was recently working on some code that would handle a toggling menu’s open-close state after the animation had finished. In order to do this, we used the transitionend event to determine when we should modify the state of the DOM nodes to show the new state correctly. However, when the animation was en
Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説
普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox works — explained in big, colorful, animated gifs 前編（翻訳版: Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説）では、主にコンテナ要素に適用されるプロパティを解説しました。今回は子要素に適用されるサイズ変更のプロパティについて解説します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイ
Animate to Different End States Using One Set of CSS Keyframes | CSS-Tricks
Animate to Different End States Using One Set of CSS Keyframes I have recently live coded a pure CSS random rainbow particle explosion. There’s a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing that requires a lot of work and code, but it’s something I did quite quickly and with o
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry
12 December, 2016 CSS Shorthand Syntax Considered an Anti-Pattern Written by Harry Roberts on CSS Wizardry. There’s a very small but surprisingly significant (and even more surprisingly frequent) issue I spot a lot in other peoples’ code, either when working directly with it, refactoring it, or auditing it: the use of shorthand syntax in CSS. Typically we would view shorthand syntax as a benefit:
CSS の -webkit-line-clamp プロパティについて: Days on the Moon
この記事の内容は古びている。この記事が最初に執筆されたのちに、CSS Overflow Module では line-clamp プロパティが定義された。この line-clamp プロパティは max-lines、continue、block-ellipsis プロパティに対する一括指定プロパティである。 結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。 -webkit-line-clamp CSS プロパティとは何か 複数行でも3点リーダーをきかせることができるというもの。 このプロパティはどうやって使うか -webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。 selector { display: -webkit-b
SourcemapをRequest Headerから指定させて捗らせる話 - Qiita
SCSSなどのprecompileを使うときにはもはや当たり前のになってきたたSourcemap。 あんまり気にせず使うことも出来るが、レガシー環境などで快適に使いたくなったりするとちょいと工夫が欲しくなる。 Sourcemapを使う方法 Sourcemapを読み込む方法として、だいたい3つぐらい手法が用意されている 該当の出力コードにインラインで記載する 該当の出力コードに、別途出力したSourcemapファイルの位置を指定する X-Sourcemapのリクエストヘッダで、別途出力したSourcemapファイルの位置を指定する 出力コードに手を加えるやり方 1, 2のソースコードが手法はわりとメジャー。 結構良く説明されている。qiitaでも下記のあたりの記事が見つかった http://qiita.com/kyaido/items/04658c04a7dbe9f05c16 http://
QiitaのCSS構成2016 - Qiita
Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Trigger CSS transition on appended element