フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

ログイン画面のレイアウト崩れをGridレイアウトで直す

スポンサーリンク

スポンサーリンク

 

この記事で作成したログイン画面がSafariで開くとレイアウト崩れを起こす。

www.ksakae1216.com

 

Chromeだと大丈夫だったのに・・・

ちなみにFirefoxも大丈夫だった、Safariはダメ(IEは環境ないので見てない)

 

ということでログイン画面をGridレイアウトで崩れないようにします!!

 

 

Grid、Flexレイアウトとは?

そもそもレイアウトにはGrid、Flex、Floatの3種類があります。

 

それぞれ得意分野が違うため、それぞれが得意な部分に適用してあげるのがベストです。

※Grid, FlexがあればFloatを使うことは無いかも。

①Grid

格子状や複雑なレイアウトに適してます。

 

格子状

f:id:ksakae1216:20190414094158p:plain

複雑なレイアウト

f:id:ksakae1216:20190414094217p:plain

 

②Flex

縦並び、横並びに適してます。

f:id:ksakae1216:20190414094236p:plain

 

f:id:ksakae1216:20190414094257p:plain

 

下記の記事がよくまとまってるので詳細を知りたい方はぜひ見てください。

これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA

  

ログイン画面のレイアウト崩れ

次にログイン画面のレイアウト崩れを見てみます。

 

Chromeの場合は綺麗に表示されます。

f:id:ksakae1216:20190413214739p:plain

 

Safariの場合はこんな風に崩れてしまいます。

f:id:ksakae1216:20190413214826p:plain

 

ログイン画面にGridレイアウトを適用

gridレイアウトを適用するのは簡単です。

CSSに以下のように書けばいいだけ。

gistfd9f80272cea4f997cdc100c6afcbdfd

 

そしてイメージは格子状で真ん中にログインをおきます。

f:id:ksakae1216:20190414094404p:plain

 

画面全体をこんな感じのGridレイアウトにする。

f:id:ksakae1216:20190414094528p:plain

 

gist0eae53bcbb9d3e93aaa7a4b2c4101587

 

2行目でGridレイアウトに。

 

5行目のgrid-template-columnsで3列分定義、真ん中を500pxにして左と右は1frにして500px以外の残りを1対1の幅にしてます。

 

6行目のgrid-template-rowsも3分割にして1行目の高さを100px、2行目を300px、3行目は残りとなってます。

 

次に配置です。ログイン部分に"loginBlock"クラスを設定してます。

f:id:ksakae1216:20190414100817p:plain

 

gistf2dcce5fc00bf6c121a6002589e16598

 

"loginBlock"クラスのCSS部分です。

2、3行目が配置についての設定です。

この書き方で2行目、2列目に配置してます。

 

これでsafariで表示し直すとレイアウト崩れが直りました。

 

修正前

f:id:ksakae1216:20190414103848g:plain

 

修正後

f:id:ksakae1216:20190414103910g:plain

 

ソースはこちら

github.com