IEで「display:grid」は癖があるし使わない方がいい

f:id:Kawan0116:20210429112827p:plain

時間が許す限りホームページ制作をしています。

ここはブログですけどね。

はてなブログを使っております。

さて、今日の話題はIEです。

IEを嫌っている人は沢山いる印象ですが、まぁ、僕も嫌いですよ(笑)。

IEを無視して作ったサイトがいくつかあって、対応に乗り出しました。

全部で5つのサイトがあるのですが、1つ1つ対応していく・・・。

2カラムが主になっています。

ブログみたいにコンテンツとサイドバーがあるタイプですね。

結論から言うと、flexを使えば解決しました。

floatでもいいですね。

floatは苦手と言うか、flexの方が手軽。

なので、floatはあまり使いません。

5パターンほど作った

ローカルで5パターンほど作りました。

1ページのみですけどね。

持っている知識をフル稼働して対応しました。

めちゃくちゃ疲れましたね(笑)。

まぁ、カラム数を変えて作っているだけですが(笑)。

画像は撮りためたモノを使ったりしています。

display:gridでことごとくカラム落ち

実は、先ほど5パターンほど作ったと書きましたが、以前作ったモノを修正しています。

僕、display:gridが大好きなんです。

なので、積極的に使ってきました。

しかし、display:gridはIEに対応していない場合があります。

なので、IEに対して別でCSSを書かないといけない。

IEに対応するには必要な作業です。

しかし、手間を省きたい。

floatを使えばいいのですが、あまり好きでないので、flexを使えば解決。

親要素に対して、

display:flex;

と打てば良いのですよ。簡単ですねぇ~。

flexに変更で大丈夫

そういう訳で、今、flexに変更して大丈夫になっています。

今後、IEも視野にするなら、gridは使わないほうがいいかも知れないですね。

さいごに

今後、サイトを制作するときは、flexを積極的に使いたいと思っています。

そのほうが楽ですし。floatもありますが、あまり使いたくないので、flexを使います。

これで大丈夫!?

・・・

と願いたい(笑)。