flexibility.jsが効かない原因はSVGだった|HTML5・CSS3HomeWeb制作HTML5・CSS3flexibility.jsが効かない原因はSVGだったCategoryWeb制作MacWordPressデザインマーケティングライフハック2016年03月29日更新2016年04月23日flexibility.jsが効かない原因はSVGだったHTML5・CSS3HTML・CSSJavaScript最近Flexbox使いまくりです。レスポンシブでは大人の事情をかますことなくワンソースで見事にレイアウトを再現してくれます。EI9や8にも対応してくるflexibility.js僕は個人的にはFlexboxはデスクトップでは使わず、モバイルの時に使います。ブラウザの対応状況とか考えるとその方が安全だと考えたからです。!flexibility.jsってjsを使えばIE9やIE8に対応するというじゃありませんか!これで、デスクトップの時も気にせずFlexboxつかってやるぜ!って思ったのも束の間、効いてない・・・・SVGが原因でflexibility.jsが効かなかった読み込まれているjsを全て削除しても効かなくて、何が原因なんだ〜と悶えながらSVGの読み込みを削除すると効きました。色んなケースでの検証はまだなので、SVGが絶対無理とは言えませんが、当ブログではSVGの読み込みが原因で、flexibility.jsが効いてなかったぽいです。そもそも当ブログはIEに完全対応しているわけではありませんので、問題はありませんが、案件単位で考えるとIE8はともかくIE9はまだ対応必要だと思われるので、原因を知っておきたかったわけです。ついでにその他の問題点インライン要素、幅をもたないテキストなどが想定外の箇所で改行される現象がしばしばありました。それでも他のCSSの書き方をするよりFlexboxをつかった方が楽なので、インライン要素に注意しておけば、大丈夫だと思われます。flexを追記するだけです。flex;}まとめとりあえずSVGとインライン要素に気をつけて使えばすごく便利なjsです。言ってる間にMicrosoftのIE9サポートも終わるので、末長く使うことはないかもしれませんが、その間どれだけ助かるんだ!と思えば作者さんに感謝せざるをえません。ちなみ新しいバージョンのIEのF12では検証できません。実機やMicrosoftが提供してくれている、ヴァーチャル環境が必要です。WakaiMacで制作するWebデザイナーです。デザインはPhotoshop、コーディングはSublimeTextがメイン。構築の基礎理念はMECE。マーケティング思考のデザインを心がけています。LockとiPhoneでMacのセキュリティ効果アップメンタルの弱さを克服する方法について考えてみた投資と浪費News全ての一覧お知らせ重要なお知らせContentsトップページAboutコード辞典お問い合わせOtherフリーアイコンWebサイト制作系レポートスタードメインで取得したドメインをコアサーバーで設定レンタルサーバー選びのポイント。