styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
Beautiful Buttons for Twitter Bootstrappers
How to Use This CSS Generator This is an extension to the Twitter Bootstrap framework. It makes creating pretty buttons easy. (Send improvements to @charliepark.) First, monkey with the sliders on the left. Use your arrow keys for extra precision. (Button Puffiness might not affect all browsers.) Second, copy the CSS in the box below. You should be able to just pop it into your CSS file. Apply the
HTML and CSS Table Border Style Wizard
CSS and HTML Source Code The box below shows example CSS and HTML source code. The code will update dynamically as you press the buttons above. You can select text in the box and then copy and paste the starter code. Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Inter
jQuery：hoverで背景色が変わった後、交互に背景がついているところの色を元に戻す方法
マウスを乗せると横の行の色が変わるようになっています。 そしてマウスがはなれると、元の色に戻るというもの。 CSSでやるならとってもシンプルなことですよね。 失敗した時のスクリプト $('#test1 tr').hover(function(){ var bgColor = $(this).css('backgroundColor'); $(this).css({ backgroundColor:'#ff47a3', color:'#ffffff' }); },function(){ $(this).css({ backgroundColor:bgColor, color:'#333333' }); }); これを動作させようとするとマウスががoutしたとき、 背景色がホバーの時のままで変わらなくなってしまいます。 エラーになってしまうのです。 あたまの中での仕組みとしては、 マウスがho
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
GridViewで固定のヘッダーを作成する方法
Super Tables - HTML Tables with Fixed Headers and More Posted on February 08, 2008 06:34:50 PM --- 17395 Views What are Super Tables? Something that's not really that super yet but may be someday. Super Tables are large HTML tables enhanced with cross-browser fixed vertical and horizontal scrolling headers with custom skins and features. How do they work? Using a small (10kb uncompressed) jav
便利なＣＳＳテクニック３０選:phpspot開発日誌
30 Exceptional CSS Techniques and Examples | Six Revisions In this article, I’ve pieced together 30 excellent CSS techniques and examples 便利なＣＳＳテクニック３０選ということでエントリがまとまっていたので紹介。 特に気になったものを以下にまとめました。 Hoverbox Image Gallery - 画像ギャラリー上でマウスホバー時に画像拡大 デモはこちら CSS Photo Zoom - 文書に添付の画像にカーソルを合わせると画像拡大。テキスト位置も自動調整 デモはこちら whatever: hover - windowsのスタートメニュー風の階層メニュー デモはこちら Content Overlay with CSS - オーバーレイでdescr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの優先順位〜CSSテクニック〜
IDEA * IDEA
Google Code Archive - Long-term storage for Google Code Project Hosting.