質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

サービス

サービスとはバックグラウンド上に常駐し、長時間稼動し続ける実行可能ファイルを指します。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

1424閲覧

CSSフレームワークを改造するメリット・デメリット

akkey_bambi

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

サービス

サービスとはバックグラウンド上に常駐し、長時間稼動し続ける実行可能ファイルを指します。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

1クリップ

投稿2019/12/19 09:41

編集2022/01/12 10:55

初めて質問させていただきます。
都内でフロントエンドエンジニアとしてサービス開発を担当しています。

伺いたいこと

実務案件でCSSフレームワークを改造するメリットとデメリットについて、可能であれば経験値も添えて皆様の見解を伺いたいです。

前提

今回自社の新規事業のWEBサービス開発にフロントエンド兼PMとしてジョインしました。
メンバー構成は下記になります。

役職人数
BO1名
PM1名(週2日)
FE1名(週2日)
BE2名(人日不明)

お分かりの通り、フロントエンドが不足している状態です。
また自分はSIerとして出向も含めの対応になるため、週2日のみの稼働になります。

開発環境は下記です

  • フロントエンド:React.js(TypeScript使用)
  • バックエンド :cakePHP

デザイナーは外部の方に依頼し、必要画面(Component)のみ依頼しデザインしていただいています。
基本いただいたデザインとComponentのデザインパターンから各画面を実装していく流れを想定しています。

リリースまでの速度感が重要視されている点、フロントエンドの工数が不足している点を考慮しバックエンドのメンバーの方々も機能実装する際にDOMを構築していくつもりというお話で進んでいます。
その中でCSSフレームワークをどれか採用してみてはというお話が出てきました。

想定および試した内容

本プロジェクトはプロのデザイナーの方に丁寧にデザインを構築していただいております。
デザインありきの場合、フレームワークを採用したとしてもデザインに合わせてスタイルの上書きを行う必要がある認識でいた為、今回もバックエンドの方にもDOMを構築していただいたとしても、その後フロント側がその画面をざっと見直しDOMの調整をする認識でいました。

上述した前提のもの試験的にBulmaを実装してみることにしました。
css modulesとして活用しnpmで追加したBulmaをimportし使用しました。
その上から独自のクラスを割り当てることで不要なスタイルの打ち消しと必要なスタイルの追加を実装しました。

ただ、それでは認識として上長とずれがありクラスの上書き等をせずにComponentを割り当てていくだけでDOMを構築できるように進めたいということでその上でフレームワークを入れるかどうか検討してくれというお話だった為、今回このような形で質問させていただきました。

CSSフレームワークで担保する範囲(想定)

あくまで画面単位でサーバーサイドのメンバーも画面構築をできることが前提とした話なので、画面内の要素として存在するものは全ての想定です。
ピュアにCSSフレームワーク内のものだと以下を現段階想定しています。

  • input
  • button
  • flex
  • checkbox
  • pagination
  • select
  • メディアクエリの変数

ただし、上記上げたものもデザインに合わせてスタイルを調整することが前提です。
更に画面を構築している要素且つCSSフレームワークにはないComponentも存在する為それらは独自に定義する必要がある前提です。

伺いたいこと - 詳細

その中で、何かしらのCSSフレームワークを導入するということはデザインに合わせてフレームワーク側の改修作業が発生する認識でいます。

また、BootstrapやBulmaなどSCSSで記述されているものも多く、また内包しているComponentの数も多いフレームワークはデザインが確定する前のプロトタイプ段階で使用するものという認識でおりました為、導入に対してのコスト感のイメージとメリットが思いつかずにおります。

諸先輩方の中で実務案件でデザインが存在している且つ、CSSフレームワークを使用したWEBサービス開発のご経験がある方のご意見を賜れますと幸いです。
何卒よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/12/19 09:46

CSSに限らずですが、フレームワークでどの部分を担当させるかになってくると思います。主軸に進めることもできますし、1部分だけ担当させることも出来ます。 それでいうと「正解はない」「メリットもデメリットもある」程度の回答になるかと思いますが・・・。
akkey_bambi

2019/12/19 10:05

分かりづらく大変失礼いたしました。 加筆編集させていただきました。
guest

回答1

0

個人的にはCSSフレームワークを用いてWEBサイトを開発することはほぼありません。
ただ、FWのコードの一部を流用したり参考にしたりすることは多々あります。

フレームワーク側の改修作業が発生する認識でいます。

そうそうそのような場面が発生しないはずです。
発生した場合は、他のCSSで上書きしている人が多い印象です。(teratailの質問をもとにした主観
上書きでも対処できない場合、そこだけ独自に作るというのも手です。

導入に対してのコスト感のイメージとメリットが思いつかずにおります。

長期的に見たり、他者への引き継ぎを考えると導入はメリットかと思います。

ただ、反面で無理して上にあげたメリットを求めてFWを導入するならそれは完全なるデメリットです。

投稿2019/12/19 10:31

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/12/19 21:07 編集

CSSフレームワークは大抵CDN使うので直接触ることはあまりないですね。+1
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問