この記事で作成したログイン画面がSafariで開くとレイアウト崩れを起こす。
Chromeだと大丈夫だったのに・・・
ちなみにFirefoxも大丈夫だった、Safariはダメ（IEは環境ないので見てない）
ということでログイン画面をGridレイアウトで崩れないようにします！！
Grid、Flexレイアウトとは？
そもそもレイアウトにはGrid、Flex、Floatの３種類があります。
それぞれ得意分野が違うため、それぞれが得意な部分に適用してあげるのがベストです。
※Grid, FlexがあればFloatを使うことは無いかも。
①Grid
格子状や複雑なレイアウトに適してます。
格子状
複雑なレイアウト
②Flex
縦並び、横並びに適してます。
下記の記事がよくまとまってるので詳細を知りたい方はぜひ見てください。
これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 – ICS MEDIA
ログイン画面のレイアウト崩れ
次にログイン画面のレイアウト崩れを見てみます。
Chromeの場合は綺麗に表示されます。
Safariの場合はこんな風に崩れてしまいます。
ログイン画面にGridレイアウトを適用
gridレイアウトを適用するのは簡単です。
CSSに以下のように書けばいいだけ。
gistfd9f80272cea4f997cdc100c6afcbdfd
そしてイメージは格子状で真ん中にログインをおきます。
画面全体をこんな感じのGridレイアウトにする。
gist0eae53bcbb9d3e93aaa7a4b2c4101587
２行目でGridレイアウトに。
５行目のgrid-template-columnsで３列分定義、真ん中を500pxにして左と右は1frにして500px以外の残りを１対１の幅にしてます。
６行目のgrid-template-rowsも３分割にして１行目の高さを100px、２行目を300px、3行目は残りとなってます。
次に配置です。ログイン部分に”loginBlock”クラスを設定してます。
gistf2dcce5fc00bf6c121a6002589e16598
“loginBlock”クラスのCSS部分です。
２、３行目が配置についての設定です。
この書き方で２行目、２列目に配置してます。
これでsafariで表示し直すとレイアウト崩れが直りました。
修正前
修正後
ソースはこちら
コメント