WEBサイトを作った事のある人なら誰しもInternet Explorer(以下IE)に苦しめられた事があると思います。 一般的にIEは遅い・セキュリティが弱い等の悪名が高いですが、制作サイドから言わせてもらうと、W3C標準仕様と異なる挙動と、バグが多すぎるのが一番の問題。例えるなら、マニュアル通りに作っても決して組みあがらず、パーツの欠品も多いプラモデルのようなもの。 他のブラウザなら、W3C標準仕様の通りに作れば、ほぼ同じような表示が可能ですが、最後にIEで確認すると動かなかったり表示の崩れがあって、そ
前回はシンプルな命令で簡単にフレキシブルなレイアウトを実現できるFlexboxの基本的な使い方を説明しました。今回は応用編としてFlexboxを使って、一般的な使い方とは少し違う面白い使い方をご紹介したいと思います。 皆さんがFlexboxを使ったレイアウトと聞いて、真っ先に思い浮かべるのは基本編でも作った横並びメニューやペイン等の分割レイアウトでしょうか？実際にFlexboxはとても使い勝手が良いので、かなり広いシーンで活躍させることができます。 01.Flexboxでアイコンを中央配置させてみる まず最
リッチコンテンツを作る場合、背景全体に写真やアニメーションを表示させるのに便利なのがCSSの「position:fixed」です。 他にもヘッダーやメニューを固定したい時や、要素をスクロールに関わらず画面内に留まらせる事ができる便利な命令です。 Google Chromeやsafariのようなモダンブラウザなら問題ないのですが、この機能をEdgeやInternet Explorer(以下、IE)で使うと、「fixed」にした要素がマウスホイールを回すたびに"ガクガクブルブル"と震えてしまいます・・・。 せっ
皆さんは横並びメニューを作るときどんな方法で行っていますか？ 定番のfloat？それともinline-block？ 今回ご紹介するFlexboxは、数行のシンプルな命令で簡単にフレキシブルなレイアウトを実現できる、新しいレイアウト手法です。 それまで、横並び要素の高さ揃えや縦中央配置で苦労していた私には目からウロコものでした！グリッド・レイアウトにも適し、レスポンシブデザインとの親和性が高いのも特徴ですね。 CSS3から追加された新機能なので、ChromeやFirefoxなどのモダンブラウザでは問題なく使え