IE11からCSS Gridに対応しています。 そのため、案件の定義が「IE11以上」であればCSS Gridでコーディングすることもできます。, 「Gridでコーディングするのか?」「Flex Boxでコーディングするのか?」迷うところです。, 実際にコーディングしてみると、下記のようなレイアウトの場合は「Flex Box」によるコーディングが最適かと思いました。 トップページや、ランディングページなどに多いレイアウトで、縦のグリッド線が多くなる場合です。, CSS Gridの恩恵を受けることができるレイアウトは下記のような場合です。 レスポンシブレイアウトにした場合、ピンク色のコンテンツが2段目になるレイアウトです。 Flexboxでもコーディングできますが、構造が分かりやすい点でCSS Gridによるコーディングが最適です。, まず、名称が違うプロパティがあり「ベンダープレフィックス付けとけばOKだろう」という訳ではありません。, IEの場合は、CSSのプロパティにベンダープレフィックスの「-ms-」を追記させる必要があります。, グリッドの列サイズを指定するプロパティなどが代表例です。 モダンブラウザ:grid-template-columns IE:-ms-grid-columns, IE10では、ベンダープレフィックスを付けても対応していないプロパティもあります。, ちょっと古い情報ですが、ベンダープレフィックスでも対応していない情報をまとめられています。, IE10では「grid-area」が使えないのは不便ですね。(IE11では対応しています) 「grid-row」と「grid-column」で対応すればOKです。, グリッドの行数やサイズを指定するプロパティ「grid-rows」は、chromeやFirefoxでは不要な場合もありますが、IEの場合は必要になります。 コンテンツの縦サイズが可変する場合の値は「auto」にします。, chrome、Firefoxは「グリッド線」で指定しますが、IEは「ボックス」で指定します。, chorome、FireFoxなどのモダンブラウザだけに対応した場合は下記になります。, Gulpを利用している方ならベンダープレフィックスを自動的に付加する「autoprefixer」を使っていると思います。, gridのベンダープレフィックスはデフォルトではfalseになっているのでtrueにします。, gulpfile.jsのautoprefixerのタスクに「grid:true」を追記します。, CSS Gridはレイアウトの自由度が高くなりますが、グリッド数が多い場合やページごとにグリッド数が変わる場合はFlexBoxの方が良い場合もあります。, 令和も使えるContact Form 7の設定とカスタマイズで最高のフォームにする方法. Copyright - Minimal, 2019 All Rights Reserved. 昔制作されたページをレスポンシブ化するときにメディアクエリ(@media)が効かなくて困ったので、そんなときに確認することをまとめました。, メディアクエリは内にviewportの記述がないと動いてくれません。 ファンタスティック・ビーストと黒い魔法使いの誕生(ファンタビ2)映画ネタバレ・感想 クリーデンスの正体? パソコンのブラウザで幅を狭めていくと、ページがレスポンシブ対応されているのに、スマホで表示させるとページが小さく表示されてしまう。ここでは、そんな現象が起きた場合の対処法についてお話し … 私がハマったのは”viewport”を書いていないことが原因でした。 レスポンシブとか言われ出される前に制作されたサイトだったので、にmetaの「viewport」が書かれていなかった。 追記したらちゃんと@mediaが効きました。単純。 コンテナ 1.1. display: flexや、wrap指定などをする 1.2. レスポンシブでサイトを作成した時、スマホ用のサイトを見るとデザインがPC用のレイアウトのままでメディアクエリが効いていない。, PCのブラウザ上でウィンドウ幅を縮めた時にはきちんとレイアウトが変わるのになんで?, どや!オシャレだべっ!(チュートリアルのお手本デザインでそのまんま作ったから当たり前w), PCのブラウザ上でウィンドウ幅を動かして縮めたり広げたりして確認をしても問題ない!, スマホでサイトを見る場合、スマホは980pxの画面サイズで表示される様に初期設定がされています。, なので、スマホ用のメディアクエリでCSSを書いても、この初期設定が働いている為、PCのデザインのまま表示がされてしまいます。(厳密に言うと変わる場合もありますけどね^^), 「viewport」と呼ばれる命令文をサイトに記述させてあげる事が必要になります。, viewportの詳細な内容については書き始めると複雑で長くなってしまうので本記事では割愛します。, ここではひとまずスマホなどの他のデバイス様に設定したCSSを適用して表示してくれる呪文みたいなもんなんだ~~~って感じで捉えておいてください。(構造については慣れてきた時に改めて調べると良いと思います。), , レスポンシブでサイト作った時に、PCのブラウザでは可変するのにスマホでデザインが変わらなかった場合は、内にviewportの記述がされているか確認しましょう。. わからない事