フロントエンドのコンポーネント設計に立ち向かう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
BackstopJSを使ったCSSのリファクタリング | フロントエンドBlog | ミツエーリンクス
皆さんはCSSをメンテナンスする際に、あるセレクターを削除したら思いもよらないページでレイアウトが崩れていたなどの経験がありませんでしょうか。サイトを運用していくに当たって、CSSのメンテナンスはサイトの構造を熟知していない人が触るとサイト全体のデザインが崩れる可能性があります。その理由として、以下が良く上げられると思います。 セレクターが全てグローバル変数的な扱いになること 悪い意味でスタイルがカスケードをしてしまうこと スタイルを消すことを恐れてスタイルの詳細度を上げて上書きしていくこと 最近、JavaScriptではJasmine、Mocha、QUnitなどテストツールが数多くありますが、CSSをテストするツールは多くはありません。その中で今回は上記の問題を解決するための手段としてサイトの見た目はそのままでCSSの構造を改善するためのリファクタリングツールをご紹介します。 Backs
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ
年末に、オンラインブックマークでたまってしまいがちな「あとで読む」とか、「一応保存」とかを整理することにしました。 そしたら、同じような内容や機能のWebサービスのページをいくつもブクマしてることに気づいてしまいました。 そこで、似たようなものは自ブログにまとめて少しブクマ数をスッキリさせることにします。 で、実はあんまり使ってないけどいざって時にあると助かる「スクリプトの圧縮＆デコードツール」をまとめてみたいと思います。 まずは圧縮編から。 ファイルの改行やインデントを無くしたりしてファイルサイズを軽くするツール 私がやるような規模の案件ではまず使うことはないのだけど、サイト規模が大きくなるとこういう配慮も必要なのかも。 やってることはどのサイトでも一緒なので、各自見やすい・使いやすいと感じるやつを選んでいただければよろしいかと。 CSS編 CSS Compressor 圧縮度合いを4段
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript/CSS 2015 Autumn
CSSに死を！これはJSerの叫び！ #kbkz_tech
7 CSS and JavaScript Performance Tips
How to Make FullScreen Page Transitions with CSS
How to Create a Youtube Menu Effect with CSS & JS