最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！
改行防止
サイトを作成しているとPCでのwindowsやmacによって表示が異なるしスマートフォンの対応などレスポンシブ対応が求めて簡単な作業のメモです。
【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット＆デメリット】
改行してないかテスト
デベロッパーツールを使用し以下確認を行いました。
①CSSに不具合がないか確認する為にウィンドウサイズを変更してみる。
②ブラウザのフォントサイズ設定を変更してみる。（ChromeならSettingsで変更可能）
Google Chromeのフォントを変更する方法
改行バグ発見
今回は以下のCSSのコードを追加して修正しました。word-break
word-break: keep-all;
ブラウザ幅を可変にしてもある程度崩れさせたくないならflexboxと単位の相対指定でなんとかなるはず。
Flexbox (フレックスボックス)