Bootstrapの練習4日目

8月27日（火）の日記です。

先日からBootstrap4の写経を行ないまして、ようやく1つのサンプルサイトが出来上がりました。

結論から言うと、1度ハマりました。
今まではサンプルのコードを書いていたから形に出来ていただけで、いざ写経となると本当に使いこなせるのか不安がよぎっていた状態です。最初は何から進めて行けば良いのか分からず、色々考えながらがむしゃらに進めてみた結果、下記順番でサイトを組み立てていった感じです。

1. ヘッダー・メイン・フッターエリアを作る。
2. まずはrow・colクラスのみを使ってレイアウトを決める。
3. リストであれば、ul・liに加えてnavbarやlist-inlineクラス等で並べていく。
4. Bootstrap4に搭載されているmarginやpadding関連クラスをひたすら当てて、レイアウトの微調整をしていく。

完成形のBootstrap4特有のクラスが膨大に書かれていると最初は戸惑いますが、順を追って随時必要となるクラスを追加していく事で、何とか気負いせずに組み立てていく事が出来ます。

しかし、最初のレイアウト構成が間違ったのか、どうしても希望通りのレイアウトにならず、1度クラス類を破棄する羽目になりました。この辺は慣れや経験が必要ですね...。

とりあえずPC版の写経が完成したので画像を添付しておきます。次回はレスポンシブに対応させる事が目標です。