タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。 下記は、デモでの操作をアニメーションgifにしたものです。

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく

📣 👋 Hey everyone!This article is almost 2 years old! I’m glad that it’s still helping people after all this time. But, this 2-year-old article has some issues: ❌ Not windows compatible❌ Only handles single files❌ A little bit over-engineeredI wrote a better way of using using node-sass with npm that addresses a lot of the comments I’ve received from y’all. You can find this tutorial (with source

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

たぶん1000回くらいは言われてきているがいまだに絶滅しないので、もう1回言う。ファイル名でもソースコード上の変数でもCSSのセレクタでもなんでもいいけど、相対的なネーミングはやめよう。 Safe Harbor Statement この投稿は個人の（中略）であり、所属する組織とは関係ありません。 なぜ相対的なネーミングをしてはいけないか 名前をつけた人の主観が入り込むため 時間が経つにつれ名前が実態と乖離し混乱を招くため 実装に無駄な制約をかけるため なぜ相対的なネーミングがなくならないか なにが相対的なネーミングなのか理解していないため じゃないかな多分。 避けるべき語 というわけで相対的なネーミングを回避するための禁止ワードのうち代表的なものをあげておきます。 new, 新, latest, 最新, old, 旧 など これらの時系列を表す語は、比較対象がないと新なのか旧なのかわかりま

スマートフォン系 buttonのスタイル iOS Safariのbuttonスタイルはブラウザデフォルトのスタイルが適応されているので、スタイルを指定したい場合は明示的に外す。

こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f

If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

A year ago today, Firefox was the first browser to ship into stable their CSS Grid implementation. Closely followed by Chrome and Safari. It’s been quite a year for my favourite layout method. It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It has also been interesting to me to discover the things people want to do,

An optimistic design choice that ends up compounding complexity April 05, 2018 #rwd I’m currently in the process of rolling out yet another Card UI. Since Pinterest, the end-state of every list view with decent imagery is to become a Card UI. But thar be dragons! I’m here to share some of the pitfalls Paravel have encountered building Card UIs over the years. Matching Card Heights Rendering a grid

はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（リスト）を使って