Sass や Bootstrap でつまづいてしまいました

まずは HTML/CSS に十分に慣れることから始めましょう。
2021年8月12日
ユーザー

ドットインストールでプログラミングの勉強を始め、現在HTML、CSSが一通り終わり、Sass、Bootstrapの勉強をしつつサイト模写を行っている段階です。
模写をしている中で、疑問がいくつか出てきたので質問させていただければと思います。

(1)レスポンシブ対応にする際、メディアクエリにて対応させるのか、boostrap('md~')を使った方がいいのかどちらを基準にすればいいかわかりません。(棲み分けが分かりません。)

(2)Sassを使う中で、とても便利だと思う反面、フォルダの作成などで躓くことが増えました。(CSS設計という部分の知識になるかもしれませんが)フォルダの整理ができず、ワークスペース?というものも理解できておらず、模写をしていても、こんな中途半端な理解でSassを使っていてもいいのだろうか。という気持ちが出てきてしまいます。
きちんと理解をしたうえで進めるべきか、最初は基本的な使い方から学んで、その後にフォルダの作成などの部分を突き詰めていけばいいか、どちらがいいのでしょうか。

スタッフ

こんにちは。ご質問ありがとうございました。

(1)レスポンシブ対応にする際、メディアクエリにて対応させるのか、Bootstrap(md~)を使った方がいいのかどちらを基準にすればいいかわかりません。(住み分けが分かりません。)

これはそのプロジェクトでBootstapを使うかどうかだと思います。

  • Bootstrapを使うプロジェクト → Bootstrapのmdなどを使う。
  • Bootstrapを使わないプロジェクト → メディアクエリーを使う。

(2)Sassを使う中で、とても便利だと思う反面、フォルダの作成などで躓くことが増えました。(CSS設計という部分の知識になるかもしれませんが)フォルダの整理ができず、ワークスペース?というものも理解できておらず、模写をしていても、こんな中途半端な理解でSassを使っていてもいいのだろうか。という気持ちが出てきてしまいます。

フォルダの整理とはたとえばどういったものでしょうか...?正確に回答させていただきたいのでもう少し詳しく(できれば具体的なコードやスクリーンショットなどで)教えていただけますと幸いです。

お手数ですがどうぞよろしくお願いいたします。

ユーザー

回答ありがとうございます。
今の自分の知識量ではBootstrapを使わないと動きをつけたりするイメージができなかったので全部Bootstrap使うしかないんじゃないかと思っていました。今後Javascript等を学んでまずはできることを増やしていこうと思います。

フォルダに関しては画像のようにそれぞれのページ毎にSassを作成しているのですが、SassはSassフォルダ、自動的に作成されるCSSとCSSmapはCSSのフォルダに分類したいです。
どうにかすっきりさせようと、エクスプローラの画面でSassやCSSのフォルダを作成してそれぞれのファイルを移動させたりしたのですが、そうするとエディターでページが存在しませんというような表示が出ます。エディター優先でフォルダやファイルの作成を行わないといけないのでしょうか?
うまく言葉にできずすみません。
よろしくお願いいたします。


スタッフ

こんにちは。コメントありがとうございました。

今の自分の知識量ではBootstrapを使わないと動きをつけたりするイメージができなかったので全部Bootstrap使うしかないんじゃないかと思っていました。今後Javascript等を学んでまずはできることを増やしていこうと思います。

Bootstrapは簡単にそれっぽいデザインや動きが作ることができて便利ですが、細かいカスタマイズが難しいので、使い所が難しいですね。どちらにしろ、HTML/CSS/JavaScriptの基礎を抑えておいたほうが応用が効くのでぜひ勉強がんばってみてください!

フォルダに関しては画像のようにそれぞれのページ毎にsassを作成しているのですが、sassはsassフォルダ、自動的に作成されるCSSとCSSmapはCSSのフォルダに分類したいです。

こちらは...どのような教材を利用して学習されていますか?通常、Sassを使うとフォルダは自動的に分類されるはずですが...。

なお、SassについてもBootstrap同様、必ずしも使わないといけないものではないので、HTML/CSSにまだ慣れていない段階でしたら使わずに模写したほうが実力がつくかと思います(なお、 模写したサイトはインターネット上に公開しないようにしましょう。実在する会社や商品/サービスの名前、もしくは第三者が著作権を持つ画像などを模写サイトに掲載してしまっている場合、それが検索結果などで公開されていると法的な問題に発展する可能性があります)。

以上、参考にしてみてください。

ユーザー

ありがとうございます!
まずできることを増やしていこうと思います。

Sassに関してはProgateで勉強した後、自分で使って慣れていこうとしている状態です。
こちらのサイト等を見てファイル分割について勉強をしていましたがいまいちわからず、上記の状況です。。
https://haniwaman.com/sass/#i-5
http://tsudoi.org/guide/detail/8.html
CSS設計なども勉強して分かりやすいファイル構成ができるようにしてみようと思います。
ありがとうございます。

スタッフ

ありがとうございます!
まずできることを増やしていこうと思います。

そうですね。最初からいろいろなツールを導入すると混乱するので、まずは、

  • HTML
  • CSS

に十分に慣れてからSassやBootstrapに手をだすと良いでしょう(なお、CSS設計もやや中上級者向きなので、最初はあまり意識しなくてもいいような気もします)。

また、

https://haniwaman.com/sass/#i-5

については2019年の記事のようですね...。技術記事を参考にするときはそれが書かれた日時を参考にすると良いかと思います(技術はすぐに古くなってしまうので...)。

以上、参考にしてみてください!

ユーザー

記事の日にちにも注目するのが良いのですね!
勉強になりました!
ありがとうございます!

スタッフ

参考になったようでなによりです!またなにかあればご利用ください。

この質問はユーザーによって解決済みになりました

このレッスンの質問と回答(161)