css troubleshooting
イシュー
line-heightが正しくない、累積の計算方法がわからない
CSSのline-heightの計算値は、
line-height = 行送りの数値（px）÷ フォントサイズ（px）
例）フォントサイズ=20pxで、行送りを36pxにしたい場合は、1.8(=36/20）を指定
参考
- プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ
- 【CSS】CSSのline-heightで単位を指定しない理由 - Qiita
- CSSの基本-インラインボックスの高さの指定
- line-height－スタイルシートリファレンス
- line-height - CSS: カスケーディングスタイルシート | MDN
- 半人前ウェブディレクターの奮闘記 - css line-heightをpx指定をしない方がいい理由
円の中心にアイコンを設定するCSS
- CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー｜Webpark
- line-heightを使用する例
- http://wp-kappa.com/css3-circle-transition/
- paddingを使用する例
- http://barktoimagine.com/web/css/1653
- line-height, position, display:table-cellとvertical-align:middle の使い分け例
flex
- ie10 でflexboxを使用すると 改行されない
参考
- http://jsdo.it/a_t/uGbn
flex box
- http://developers.linecorp.com/blog/?p=2479
- CSS3のFlexboxを基本から理解して、使い倒そう！ | 東京上野のWeb制作会社LIG
- flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
- 日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
