毎日更新

143日目 Bootstrap触ってみたら面白かった

こんにちは。

今日は、「Bootstrap触ってみたら面白かった」というテーマです。

一応マークアップもやるフロントエンドエンジニアとして働いていますが、今の現場はサービスの歴史が長いレガシーな環境なので CSS フレームワークを使うことはありません。プログラミング学習の過程で軽く触れることはありましたがまともに触ったことはありませんでした。

この度副業の案件でスピーディーにサービス開発するために Bootstrap を使う予定なので、キャッチアップのためデザイン案を Bootstrap で実装してみました。

最初の数時間、慣れるまでは「自分の当てたいスタイルが Bootstrap でどの class 名を付与すればいいのか」が全然分からなくて、めっちゃストレスフルでしたね。なんやかんや合計 8 時間くらい触っていたんじゃないかな。。後半はかなりコツをつかんできて、レイアウト(margin, padding, flexbox など)に関してはほぼ 100% Bootstrap のみで完結できることが分かりました。コンポーネントも Bootstrap で用意されている物を基本的に使い、一部微調整が必要なところは SCSS 側でスタイル拡張して、追加のスタイルをあてていきます。

触っていてすごくいいなと思ったのが、「色んなレイアウトのやコンポーネントの実装例が参考になる」点です。ドキュメントにあるレイアウトの『Sticky Footer』のページで固定フッターの実装例がみれます。どんなサイトでもだいたい固定フッターは実装されていて、自分でアプリを作るときも基本的にフッターは下部固定です。この固定フッター問題になるのは、「要素が画面下までないときにどうするか」で、これまでは js を使って無理矢理に下部固定させていました。

Bootrtrap の『Sticky Footer』のページでは CSS のみで実装されていて、要素が少なくても画面縦幅いっぱいに body 要素が広がっています。

こういった「よくあるレイアウト」の実装がドキュメントとしてまとまっていて、サクッと確認できるのは Bootstrap を使わない場合においても役に立ちます。

正直、仕事である程度素の CSS を書いているので、今後 Bootstrap をはじめとした CSS のフレームワークを使うことはない(メリットを感じない)だろうと思っていました。しかし、触ってみたら面白い発見もたくさんありますね。

1 日触ってみて、本当にスピーディーに独自性にそこまでこだわりをもたなければ、CSS フレームワークを使うのはかなり「アリ」だなと思いましたね。何でも食わず嫌いではいかんなーと思いました。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。