タグ

2015年6月11日のブックマーク (2件)

  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

    どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
  • display:inline-blockがけっこう便利。だけど…

    小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。 しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。 inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもら

    display:inline-blockがけっこう便利。だけど…