「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！
フロントエンドのコンポーネント設計に立ち向かう - 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のライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
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
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になった SVGが（PNGによる代替画像を用意することなく）使えるようになった video要素、audio要素が使えるようになった ::before, ::after 擬似要素をダブルコロンで書けるようになった :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった addEventListener(), getElementsByClassName(), String.prototype.trim, Arr
picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 | フロントエンドBlog | ミツエーリンクス
2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者 宇賀 数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況（Can I use） srcset属性のサポート状況（Can I use） 画像のレスポンシブ対応 通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
W3CのNu Html CheckerとCSS Validatorをローカルで動かす - CLOVER🍀
HTMLやCSSのチェックに使われる、Nu Html CheckerとCSS Validatorというものがあります。 こういうやつですね。 Ready to check - Nu Html Checker The W3C CSS Validation Service それぞれURLを指定したり、ファイルをアップロードしたり、対象を直接テキストで入力してチェックすることができるサービスです。 これらのローカル環境での構築手順が公開されているので、ちょっと試してみたいと思います。 Nu Html Checker Nu Html Checkerでは、以下のページの「How to to run your own copy of the Nu Html Checker」の部分に概要が書かれています。 About the Nu Html Checker Webベースで動かす方法、コマンドラインで使う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual CSS flexbox builder | Webflow