Bootstrapの練習5日目

8月28日（水）の日記です。

前回ではBootstrap4を用いてPC版の写経を行ないましたが、今回はこのサンプルサイトを「スマホ」と「タブレット」にも適用するレスポンシブサイトにしてみます。

Bootstrap4の規定に従い、スマホ版は画面横幅が544px以下、そしてタブレット版は768px 〜 992pxの間として設定しました。
PC版は従来通りのフルサイズですが、一応1200px以上としています。

グリッドも大分理解を得られてきたので、rowやcolクラスを使用してのレイアウト調整は比較的短時間で出来ましたが、marginやpaddingの微調整は非常に大変でした。Bootstrap4のクラスだらけになって頭がだんだん混乱してきます（汗）。
スマホやタブレットのレイアウトは大丈夫であっても、いざPC版を見返してみるとレイアウトが崩れていたり、Bootstrap4のクラスを正確に入れ込んでも、どうしてもサイズが変更しなかったりと、一筋縄ではいかない様です。

さらに、画像の幅調整となると非常に厄介で、今回のトップ画像は結局PC版・タブレット・スマホ用に画像サイズを変えて3種類用意する事で解決しました。本来は1枚の画像で上手くリサイズを行ない、希望とするレイアウトや表示に出来れば良いのですが、現時点での自分の力量では無理でした...。

最終的に何とか完成しましたので、下記にあげておきます。もっと回数をこなして慣れていきたいですね。

【PC版】

【タブレット版】

【スマホ版】