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