タグ

2016年8月25日のブックマーク (3件)

  • flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita

    注)文中の「コンテナ」「アイテム」について 文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題(Safari) Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定(デフォ値なので、指定がなければそのままでOK) Safari10にて修正済み(つまり、SierraとiOS 10以降では対応不要) 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

    flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita
  • モダンでスマートなフロントエンド開発のための便利ツール使い方まとめ

    プリプロセッサーやタスクランナーなど、ここ数年さまざまなツールが登場しているWebのフロントエンド開発界隈。便利なツールでワークフローを効率化をしたいけど、複雑で難しそう…。そんなWeb制作者のためにツールの使い方を紹介する入門記事を紹介します。 1. ビジュアルテストでCSSの上書き、先祖返りを防ぐ 『やばっ!CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ』(WPJ) CSSの修正でいつまにか先祖返りしていたり、追加したセレクターで上書きしてしまったりと、開発中や運用中にデザインが壊れてしまうことがあります。それを防ぐのが、ビジュアルリグレッションテスト。DOMやプロパティの値をチェックするのではなく、見た目の差分を教えてくれるPhantomCSSの紹介です。 2. いまからgulpを始める人へ 『gulp.js を今一度キチンと!gulp.js 導入基礎』(H

    モダンでスマートなフロントエンド開発のための便利ツール使い方まとめ
  • Riot.js と Atomic Design ではじめるテクニカルクリエイター|Technical Creator Hub

    紫竹佑騎 2010年新卒入社。アメーバのサービスやソーシャルゲーム数タイトルのサーバーサイドを担当。著書に「Web制作者のためのGitHubの教科書」。BaPA1期生。 7月頃リリースされた AMESTAGE の Web 版を担当している 紫竹 です。 AMESTAGE は"芸能人とあそべる生放送"と銘打ったサービスでして、芸能人の放送する番組に対してコメントしたりギフトを贈ったり、クイズなどのコーナーに回答して一緒にあそんだりできます!!是非放送を見てみてくださいね^^ AMESTAGE 今回はこの AMESTAGE で利用した Riot.js というライブラリを使って、Web 開発しやすいコンポーネントをデザインの時点からワンストップで行うことができる手法をご紹介したいと思います。 俺がテクニカルクリエイターだ! ↑これは言ってみたかっただけなんですが簡単に自己紹介をすると、僕は