タグ

ブックマーク / parashuto.com (2)

  • Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

    Flexboxを使っていて「なんでこの幅になるんだろう?」と疑問に思ったことはありませんか? 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜! まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow(またはf

    Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
  • WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ?

    このブログでもレスポンシブイメージについて何度か紹介していますが(ココとかココで)、2015年の暮れにリリースされたWordPress 4.4 Clifford からsrcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ(srcsetとsizes)が使われていることになるそうです。 このブログも先日WordPress 4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。 基的な仕組み 管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入される ポリフィル(Picturefill)は

    WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ?
  • 1