Fippiyのプログラム学習内容アウトプットBlog

日々の学習内容をアウトプットして振り返りを実施する。

Laravel開発、サイト表示崩れを解消する

現在作成しているアプリはMacにて作成を実施しています。

開発環境及び本番環境の表示確認はMacより実施していました。

本番環境に設置していることもあり、ふとWindowsからアクセスしてみました。

すると、画面表示が明らかに崩れています。

そこで、レイアウトの調整をすることにしました。

今回の目的

開発環境とは異なる環境でアクセスすると表示が崩れていた為、解消する。

なぜやるか

ユーザーのあらゆる使用環境を考慮し、どの環境からアクセスしても意図した表示がされるようにするため。

やりたいこと

Windows環境からアクセスした時の表示くずれを解消したい

やったこと

  • 接続環境毎のレイアウトを確認する
  • スタイルシートにフォント設定を追加する
  • メニュー表示のサイズを変更する
  • 後からもっと単純な解決方法に気づく

実施内容

サイト表示を確認する

ログイン後のトップページにてメニュー表示が崩れていました。

まずは、状況を確認します。

確認環境

Windows

Mac

表示を確認する

# book.index(Windows)

f:id:Fippiy:20190501125010j:plain

トップページ(Windows)

# property.index(Windows)

f:id:Fippiy:20190501125235j:plain

所有書籍ページ(Windows)

# user.index(Windows)

f:id:Fippiy:20190501125341j:plain

マイページ(Windows)

メニュー表示のテキストに改行が入っており、表示が崩れてしまっています。

 

確認の為、Mac環境のページも改めて掲載します。

f:id:Fippiy:20190501134309p:plain

トップページ(Mac)

ここでフォントの種類をそもそも設定していないことに気づいたのでフォントの種類を変更して検証してみることにしました。

 

フォントの種類を変更する

フォント指定方法

スタイルシートにフォントの種類を登録しておくことで優先的にしていする方法があります。

詳しくはこちらを参考にさせて頂きました、ありがとうございます。

saruwakakun.com

saruwakakun.com

設定を追加して、表示を確認していきます。

 

使用フォントを確認する

現状は特にスタイルシート上でフォントを指定していない状態です。

となると、現状は何のフォントを使っているのか?…ということで確認してみました。

デベロッパーツールで環境毎に確認します。

# フォント確認(Windows)

f:id:Fippiy:20190501130609j:plain

使用フォント確認(Windows)

 

確認するテキストをドラッグしてデベロッパーツールのフォントを確認します。

 

# フォント確認(Mac)

f:id:Fippiy:20190501130831p:plain

使用フォント確認(Mac)

WindowsメイリオMacヒラギノ角ゴProNを使用していました。

 

フォントの種類を変更する

Windows環境での表示が崩れていたので、Windowsで使用するフォントに対して変更をしていきます。

メニュー表示に使用しているHTMLタグはdivを使用しているので、検証としてdivタグ全てに対してフォントを指定することにしました。

 

デベロッパーツールで直接書き加えて表示を確認します。

# divタグフォント変更(Windows)

f:id:Fippiy:20190501131213j:plain

フォント変更(Windows)

headタグ内にstyleタグを追加。MSPゴシックを指定しました。

メニューの表示崩れが解消されています。

 

これで問題は解消されたと思い、設定を全体に適用させるため、divタグでなくページ全体のフォントを変更してみました。

# フォント変更(Windows)

f:id:Fippiy:20190501131506j:plain

全体フォント変更(Windows)

*指定で全テキストのフォントを変更しましたが、再び表示が崩れました。

フォントの問題と考えていましたが、これだけでは不十分のようです。

また、今回はWindowsMacで自分が用意している環境でしか確認できていない為、他の環境でも崩れる可能性があるかもしれません。

どちらにせよ、明示的にフォントは指定するべきと思いましたので、設定は有効化した上でさらなる対策を考えることにしました。

# ~/public/scss/whole.scss

// フォント設定
* {
font-family:"ヒラギノ角ゴ ProN","MS Pゴシック",sans-serif;
}

フォント設定は全体設定に明示的に記載しました。

 

メニューサイズを調整する

次に、メニュー表示の横幅を調整することにしました。

現状確認する

メニューに関連するスタイルシート設定を確認しました。

# ~/public/scss/menulist.scss

.menulist {
&__menutab {
margin-bottom: 10px;
padding: 0 30px 0;
height: 37px;
border-bottom: 1px solid #000;
display: flex;
.tab {
width: 133px;
height: 18px;
margin: 3px 8px 0 0;
padding: 9px 12px 5px 8px;
border-radius: 8px 8px 0 0;
}
}
}

メニュー内のタブサイズは133pxとしていました。

 

横幅設定を削除してみる

まずは、サイズ設定を削除してみました。

.tab {
width: 200px;
height: 18px;
margin: 3px 8px 0 0;
padding: 9px 12px 5px 8px;
border-radius: 8px 8px 0 0;
}

 

これで表示を確認します。

# メニューサイズ削除表示(Mac)

f:id:Fippiy:20190501132114p:plain

メニューサイズ削除(Mac)

横幅設定がなくなったので、テキストに応じた幅となりました。

 

Windowsについてもデベロッパーツールでwidthを削除して表示を確認。

# メニューサイズ削除表示(Windows)

f:id:Fippiy:20190501132012j:plain

メニューサイズ削除(Windows)

同様に、テキスト幅に調整されました。表示崩れは解消されています。

 

表示崩れの観点で考えると、改行されているテキストはなく、問題は解消されています。

しかし、サイズがバラバラになってしまい見栄えが良くないと思いました。

 

サイズ設定を長めに調整する

元々のメニュー表示についてはフォルダーを意識した物だったのもあり、記入テキストより長めでサイズが均一であればいいと考えました。

# フォルダーイメージ

 

f:id:Fippiy:20190501132409j:plain

フォルダ

そこで、サイズを元の設定である133pxより大きくしてみました。
# ~/public/scss/menulist.scss

.tab {
width: 200px;
height: 18px;
margin: 3px 8px 0 0;
padding: 9px 12px 5px 8px;
border-radius: 8px 8px 0 0;
}

200pxに変更してみました。

 

この状態で表示を確認します。

# メニューサイズ変更(Mac)

f:id:Fippiy:20190501132623p:plain

メニューサイズ200px(Mac)

Windowsについてもデベロッパーツールで修正して、確認します。

# メニューサイズ変更(Windows)

f:id:Fippiy:20190501132741j:plain

メニューサイズ200px(Windows)

充分余裕を持たせることで、表示崩れが解消されました。

以上で表示環境による差を考慮したスタイルが設定できました。

 

後から気づいたこと

記事内容を整理している時に気がついたのですが、メニュー内テキストのフォントサイズが設定されていませんでした。

フォントサイズを指定すると、結果として表示崩れは解消されました…。

結果としてフォントサイズさえきっちり設定していれば解消できた模様です。

しかし、サイズ調整やフォント指定・環境毎の表示の差異について学習できたので良かった…ことにしましょう。